Le but de l'utilisation de Ng est de créer une application d'une seule page (application simple page). J'espère que toutes les pages du site utiliseront la Route de Ng et essaieront de ne pas utiliser location.href. Cependant, cela présente de nombreux avantages. une webapp, mais le seul inconvénient est qu'au fil du temps, les webapps ont plus d'utilisateurs, des fonctions plus riches et plus de contrôleurs. Vous devez charger tous les contrôleurs en tant que modules globaux pour pouvoir appuyer sur n'importe quelle page du site. en rafraîchissant avec F5, vous pouvez accéder à n'importe quelle autre page sans l'erreur de ne pas trouver le contrôleur. Le chargement de tous les contrôleurs ralentit la première ouverture de la page sur le téléphone mobile. Aujourd'hui, je vais partager avec vous comment je l'ai amélioré pour le résoudre. cette lacune, implémentez le chargement modulaire du Controller
app.js
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
Contrôleur : $controllerProvider.register,
directive : $compileProvider.directive,
Filtre : $filterProvider.register,
Usine : $provide.factory,
Service : $provide.service
};
});
Bloquez pendant le parcours pour charger les js requis, puis continuez une fois le chargement réussi. Si vous ne savez pas ce qu'est $script, veuillez cliquer sur http://dustindiaz.com/scriptjs<.>
$routeProvider.when('/:plugin', {
templateUrl : fonction (rd) {
Renvoie 'plugin/' rd.plugin '/index.html';
},
résoudre : {
Charger : fonction ($q, $route, $rootScope) {
var différé = $q.defer();
var dépendances = [
'plugin/' $route.current.params.plugin '/controller.js'
];
$script(dépendances, fonction() {
$rootScope.$apply(function() {
deferred.resolve();
});
});
Retour différé.promise;
>
>
});
controller.js
app.register.controller('MyPluginCtrl', fonction ($scope) {
...
});
index.html
De cette façon, les js dont dépend la route peuvent être chargés dynamiquement pendant la route. Cependant, il y a généralement de nombreuses routes dans notre webapp, et chacune nécessite beaucoup de code pour être écrite, ce qui est moche et difficile. à maintenir. Autant en ajouter un autre Optimiser
app.js
Copier le code Le code est le suivant :
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
contrôleur : $controllerProvider.register,
directive : $compileProvider.directive,
filtre : $filterProvider.register,
usine : $provide.factory,
service : $provide.service
};
app.asyncjs = fonction (js) {
return ["$q", "$route", "$rootScope", fonction ($q, $route, $rootScope) {
var différé = $q.defer();
var dépendances = js;
if (Array.isArray(dépendances)) {
pour (var i = 0; i < dependencies.length; i ) {
dépendances[i] = "?v=" v;
>
} autre {
dépendances = "?v=" v;//v是版本号
>
$script(dépendances, fonction() {
$rootScope.$apply(function () {
différé.resolve();
});
});
retourner différé.promise;
}];
>
});
$routeProvider.when('/:plugin', {
templateUrl : fonction (rd) {
return 'plugin/' rd.plugin '/index.html';
},
résoudre : {
charger : app.asyncjs('plugin/controller.js')
>
});
到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这Il s'agit d'un contrôleur de type js.模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上
$routeProvider.when('/:plugin', {
templateUrl : fonction (rd) {
return 'plugin/' rd.plugin '/index.html';
},
résoudre : {
chargement : app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
>
});
便可以了
PS : $script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有Il y a des liens vers jquery.ui.datepicker. js退出去再进就不会去请求啦