Heim > Web-Frontend > js-Tutorial > Hauptteil

So laden Sie den Controller dynamisch in AngularJS

零到壹度
Freigeben: 2018-04-13 17:29:15
Original
1863 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, Ihnen mitzuteilen, wie Sie den Controller dynamisch in AngularJS laden. Er hat einen bestimmten Referenzwert.

Wir werden dynamisch implementieren Laden der Controller-Methode ist in ein allgemeines Modul gekapselt und wird dieses Modul ngCommon genannt.

(function (angular) {'use strict';
    var CommonApp = angular.module('ngCommon');
    ...
    })(angular);
Nach dem Login kopieren

Als nächstes implementieren wir eine Methode zum dynamischen Laden von js$require.

/* 记录已加载的js */
var loaded = {};
/* 检测是否加载 */
var checkLoaded = function (url) {
    return !url || !angular.isString(url) || loaded[url];};
    
    CommonApp.factory('$require', ['$document', '$q', '$rootScope', function ($document, $q, $rootScope) {
    return function (url) {
        var script = null;
        var onload = null;
        var doc = $document[0];
        var body = doc.body;
        var deferred = $q.defer();
        if (checkLoaded(url)) {
            deferred.resolve();
        } else {
            script = doc.createElement('script');
            onload = function (info) {
                if (info === 1) {
                    deferred.reject();
                } else {
                    loaded[url] = 1;
                    /* AngularJS < 1.2.x 请使用$timeout */
                    $rootScope.$evalAsync(function () {
                        deferred.resolve();
                    });
                }
                script.onload = script.onerror = null;
                body.removeChild(script);
                script = null;
            };
            script.onload = onload;
            script.onerror = function () {
                onload(1);
            };
            script.async = true;
            script.src = url;
            body.appendChild(script);
        }
        return deferred.promise;
    };}]);
Nach dem Login kopieren

Dann ist der entscheidende Punkt, den Controller über die $routeProvider route-Funktion von resolve dynamisch zu laden.

CommonApp.provider(&#39;$routeResolver&#39;, function () {
    this.$get = function () {
        return this;
    };
    this.route = function (routeCnf) {
        var controller = routeCnf.controller;
        var controllerUrl = routeCnf.controllerUrl;
        if (controllerUrl) {
            routeCnf.reloadOnSearch = routeCnf.reloadOnSearch || false;
            routeCnf.resolve = {
                load: [&#39;$route&#39;, &#39;$require&#39;, &#39;ControllerChecker&#39;,
                    function ($route, $require, ControllerChecker) {
                        var controllerName = angular.isFunction(controller) ? controller($route.current.params) : controller;
                        var url = angular.isFunction(controllerUrl) ? controllerUrl($route.current.params) : controllerUrl;
                        if (checkLoaded(url) || (controllerName && ControllerChecker.exists(controllerName))) {
                            loaded[url] = true;
                            return;
                        }
                        return $require(url);
                }]
            };
        }
        return routeCnf;
    };})
Nach dem Login kopieren

Beachten Sie, dass der obige Code auch etwas namens ControllerChecker einfügt. Dies wird verwendet, um zu erkennen, ob der aktuelle Controller registriert wurde. Wenn nicht, laden wir die entsprechenden js, um einen neuen Controller zu registrieren. . Der Code lautet wie folgt:

CommonApp.service(&#39;ControllerChecker&#39;, [&#39;$controller&#39;, function ($controller) {
    return {
        exists: function (controllerName) {
            if (angular.isFunction(window[controllerName])) {
                return true;
            }
            try {
                $controller(controllerName, {}, true);
                return true;
            } catch (e) {
                return false;
            }
        }
    };}]);
Nach dem Login kopieren

Zuletzt fügen wir noch eine Registrierungsmethode hinzu.

CommonApp.setupRegister = function (module) {
    module.config([
        &#39;$controllerProvider&#39;,
        &#39;$compileProvider&#39;,
        &#39;$filterProvider&#39;,
        &#39;$provide&#39;,
        function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
            module.register = {
                controller: $controllerProvider.register,
                directive: $compileProvider.directive,
                filter: $filterProvider.register,
                factory: $provide.factory,
                service: $provide.service,
                value: $provide.value,
                constant: $provide.constant            };
        }
    ]);};
Nach dem Login kopieren

Dies ist im Grunde vollständig. Wie wird es verwendet?

var DemoApp = angular.module(&#39;DemoApp&#39;,[&#39;ngRoute&#39;,&#39;ngCommon&#39;]);
/* 调用动态注册方法,为当前模块添加动态注册方法 */
angular.module(&#39;ngCommon&#39;).setupRegister(DemoApp);
DemoApp.config([&#39;$routeProvider&#39;, &#39;$routeResolverProvider&#39;, function ($routeProvider, $routeResolverProvider) {
    var route = $routeResolverProvider.route;
    $routeProvider.when(&#39;/index&#39;, route({
        templateUrl: &#39;./view/index.html&#39;),
        controller: &#39;IndexController&#39;, /* 在此申明了controller就不需要再html里面申明ng-controller了 */
        controllerUrl: &#39;./controller/index.js&#39;)
    }))
    .otherwise(&#39;/index&#39;);/* ./controller/index.js */DemoApp.register.controller(&#39;IndexController&#39;, [&#39;$scope&#39;, &#39;$require&#39;, function($scope, $require) {
    ...
    /* 动态加载某个js文件 */
    $require(url).then(function () {
        ...
    });}]);
Nach dem Login kopieren

                                       

Das obige ist der detaillierte Inhalt vonSo laden Sie den Controller dynamisch in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage