Solution AngularJs pour charger dynamiquement le contrôleur en fonction de la page visitée_AngularJS

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

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
};
});

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<.>

Copier le code Le code est le suivant :

$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

Copier le code Le code est le suivant :

app.register.controller('MyPluginCtrl', fonction ($scope) {
...
});

index.html

Copier le code Le code est le suivant :

...

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退出去再进就不会去请求啦