So laden Sie den Controller dynamisch in AngularJS

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

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

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

CommonApp.provider('$routeResolver', 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: ['$route', '$require', 'ControllerChecker',
                    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;
    };})

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('ControllerChecker', ['$controller', function ($controller) {
    return {
        exists: function (controllerName) {
            if (angular.isFunction(window[controllerName])) {
                return true;
            }
            try {
                $controller(controllerName, {}, true);
                return true;
            } catch (e) {
                return false;
            }
        }
    };}]);

Zuletzt fügen wir noch eine Registrierungsmethode hinzu.

CommonApp.setupRegister = function (module) {
    module.config([
        '$controllerProvider',
        '$compileProvider',
        '$filterProvider',
        '$provide',
        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            };
        }
    ]);};

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

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

                                       

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!