Utiliser NG signifie faire une application de page simple, et j'espère que toutes les pages du site utiliseront NG Route et essaieront de ne pas utiliser l'emplacement.href. Cependant, ces WEBApps présentent de nombreux avantages, mais le seul inconvénient est que, car votre WebApp a plus d'utilisateurs et plus de fonctions, et plus de contrôleurs sont devenus de plus en plus. Vous devez charger tous les contrôleurs en tant que modules globaux afin qu'après avoir appuyé sur F5 pour actualiser n'importe quelle page du site, vous pouvez se rendre vers une autre page sans erreur de ne pas trouver le contrôleur. Le chargement de tous les contrôleurs rend la première vitesse d'ouverture de la page plus lentement sur le téléphone mobile. Aujourd'hui, je vais partager avec vous comment j'ai amélioré ce désavantage et réaliser le chargement modulaire du contrôleur.
app.js
La copie de code est la suivante:
app.config (fonction ($ ControllerProvider, $ compileprovider, $ filterprovider, $ fournis) {
app.register = {
Contrôleur: $ ControllerProvider.Register,
Directive: $ compileprovider.directive,
Filtre: $ filterprovider.register,
usine: $ fournir.factory,
Service: $ fournit.service
};
});
Bloquez le js requis lorsque l'itinéraire et continuez après le chargement avec succès. Si vous ne savez pas ce qu'est le script $, cliquez sur http://dustindiaz.com/scriptjs
La copie de code est la suivante:
$ RouteProvider.When ('/: Plugin', {
templateUrl: function (rd) {
return 'plugin /' + rd.plugin + '/index.html';
},
résoudre: {
Charge: fonction ($ q, $ Route, $ rootscope) {
var différé = $ q.defer ();
Var dépendances = [
'Plugin /' + $ Route.current.params.plugin + '/Controller.js'
]]
$ script (dépendances, fonction () {
$ rootscope. $ appliquer (function () {
Deferred.Resolve ();
});
});
retour différé.promes;
}
}
});
contrôleur.js
La copie de code est la suivante:
app.register.controller ('mypluginctrl', fonction ($ scope) {
...
});
index.html
La copie de code est la suivante:
<div ng-contrôleur = "mypluginctrl">
...
</div>
De cette façon, la transformation peut charger dynamiquement le JS dont la route dépend du moment où l'itinéraire est acheminé. Cependant, il y a généralement de nombreux itinéraires dans nos webapps, et chacun doit écrire un tas de code, à la fois laid et difficile à maintenir. Nous pourrions aussi bien l'optimiser.
app.js
La copie de code est la suivante:
app.config (fonction ($ ControllerProvider, $ compileprovider, $ filterprovider, $ fournis) {
app.register = {
Contrôleur: $ ControllerProvider.Register,
Directive: $ compileprovider.directive,
Filtre: $ filterprovider.register,
usine: $ fournir.factory,
Service: $ fournit.service
};
app.asyncjs = fonction (js) {
retourner ["$ q", "$ Route", "$ rootscope", fonction ($ q, $ Route, $ rootscope) {
var différé = $ q.defer ();
VAR DÉPÉLENCES = JS;
if (array.isArray (dépendances)) {
pour (var i = 0; i <dépendances.length; i ++) {
dépendances [i] + = "? v =" + v;
}
} autre {
dépendances + = "? v =" + v; // v est le numéro de version
}
$ script (dépendances, fonction () {
$ rootscope. $ appliquer (function () {
Deferred.Resolve ();
});
});
retour différé.promes;
}];
}
});
La copie de code est la suivante:
$ RouteProvider.When ('/: Plugin', {
templateUrl: function (rd) {
return 'plugin /' + rd.plugin + '/index.html';
},
résoudre: {
chargement: app.asyncjs ('plugin / contrôleur.js')
}
});
À ce stade, divisez simplement le Controller.js d'origine en JS multiples en fonction du module, puis ajoutez des dépendances du module pour s'ouvrir pour améliorer la vitesse de chargement. Cette méthode peut non seulement être utilisée pour le chargement du contrôleur à la demande, mais aussi pour d'autres modules JS, tels que jQuery.ui.datePicker.js, ajouter le nœud de route qui doit être sélectionné.
La copie de code est la suivante:
$ RouteProvider.When ('/: Plugin', {
templateUrl: function (rd) {
return 'plugin /' + rd.plugin + '/index.html';
},
résoudre: {
Load: app.asyncjs (['plugin / contrôleur.js', 'plugin / jquery.ui.datepicker.js'])
}
});
C'est très bien
PS: $ Script peut juger le JS qui doit être chargé. S'il a été chargé auparavant, il reviendra directement au succès. C'est-à-dire, uniquement lorsque vous entrez la première interface de sélection de date pour la première fois, vous demanderez jQuery.ui.datepicker.js pour sortir, puis entrez, et vous ne le demanderez pas.