AngularJs-Lösung zum dynamischen Laden des Controllers basierend auf der besuchten Seite_AngularJS

Der Zweck der Verwendung von Ng besteht darin, eine Einzelseitenanwendung (einfache Seitenanwendung) zu erstellen und zu versuchen, location.href nicht zu verwenden Eine Web-App, aber der einzige Nachteil besteht darin, dass Web-Apps mit der Zeit mehr Benutzer, umfangreichere Funktionen und mehr Controller haben. Sie müssen alle Controller als globale Module laden, damit Sie auf jede Seite der Site klicken können Durch das Aktualisieren mit F5 können Sie zu jeder anderen Seite weiterleiten, ohne dass der Fehler auftritt, dass das Laden aller Controller das erste Öffnen der Seite auf dem Mobiltelefon verlangsamt. Heute werde ich Ihnen mitteilen, wie ich das Problem gelöst habe Um diesen Mangel zu beheben, implementieren Sie das modulare Laden des Controllers

app.js

Code kopieren Der Code lautet wie folgt:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
Controller: $controllerProvider.register,
Direktive: $compileProvider.directive,
Filter: $filterProvider.register,
Fabrik: $provide.factory,
Dienst: $provide.service
};
});

Blockieren Sie während der Route, um die erforderlichen js zu laden, und fahren Sie dann fort, nachdem der Ladevorgang erfolgreich war. Wenn Sie nicht wissen, was $script ist, klicken Sie bitte auf http://dustindiaz.com/scriptjs

Code kopieren Der Code lautet wie folgt:

$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
Geben Sie 'plugin/' rd.plugin '/index.html';
zurück },
lösen: {
Laden: function($q, $route, $rootScope) {
var deferred = $q.defer();
var dependencies = [
          'plugin/' $route.current.params.plugin '/controller.js'
];
$script(Abhängigkeiten, Funktion () {
$rootScope.$apply(function() {
           deferred.resolve();
        });
});
Rückgabe deferred.promise;
}
}
});

controller.js

Code kopieren Der Code lautet wie folgt:

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

index.html

Code kopieren Der Code lautet wie folgt:

...

Auf diese Weise können die js, von denen die Route abhängt, während der Route dynamisch geladen werden. Im Allgemeinen gibt es jedoch viele Routen in unserer Webanwendung, und für jede muss viel Code geschrieben werden, was hässlich und schwierig ist zu pflegen. Wir könnten genauso gut eine weitere Optimierung hinzufügen

app.js

Code kopieren Der Code lautet wie folgt:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
  app.register = {
    Controller: $controllerProvider.register,
    Direktive: $compileProvider.directive,
    Filter: $filterProvider.register,
    Fabrik: $provide.factory,
    Dienst: $provide.service
  };
  app.asyncjs = Funktion (js) {
        return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {
            var deferred = $q.defer();
            var dependencies = js;
            if (Array.isArray(dependencies)) {
                for (var i = 0; i < dependencies.length; i ) {
                    dependencies[i] = "?v=" v;
                }
            } sonst {
                dependencies = "?v=" v;//v是版本号
            }
            $script(Abhängigkeiten, Funktion () {
                $rootScope.$apply(function () {
                    deferred.resolve();
                });
            });
            return deferred.promise;
        }];
    }
});

复制代码 代码如下:

$routeProvider.when('/:plugin', {
  templateUrl: function(rd) {
    return 'plugin/' rd.plugin '/index.html';
  },
  lösen: {
    Laden: app.asyncjs('plugin/controller.js')
  }
});

到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在Controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上

复制代码 代码如下:

$routeProvider.when('/:plugin', {
  templateUrl: function(rd) {
    return 'plugin/' rd.plugin '/index.html';
  },
  lösen: {
    Laden: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
  }
});

便可以了

PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker. js退出去再进就不会去请求啦