AngularJS动态加载控制器

Question

我读了很多关于lazzy loading的内容,但是在使用$ routeProvider时我遇到了一个问题.

我的目标是加载一个包含控制器的javascript文件,并添加一个先前已加载的控制器的路由.

我要加载的javascript文件的内容

angular.module('demoApp.modules').controller('MouseTestCtrlA', ['$scope', function ($scope) {
    console.log("MouseTestCtrlA");
    $scope.name = "MouseTestCtrlA";
}]);

调用angular bootstap时不包含此文件.这意味着,我必须加载文件并创建到该控制器的路由.

首先,我开始编写一个必须加载Javascript文件的resolve函数.但是在路由声明中声明我的控制器参数给了我一个错误:

'MouseTestCtrlA'不是函数,未定义

这是我要设置的电话:

demoApp.routeProvider.when(module.action, {templateUrl: module.template, controller: module.controller, resolve : {deps: function() /*load JS file*/} });

从我读到的,控制器参数应该是一个注册的控制器

controller - {(string | function()=} - 如果作为字符串传递,则应与新创建的作用域或已注册控制器的名称相关联的控制器fn.

所以我写了一个工厂,应该能够加载我的文件,然后(承诺风格!)我试图宣布一个新的路线.

它给了我类似下面的东西,其中依赖是一个javascript文件的加载路径数组:

用法

ScriptLoader.load(module.dependencies).then(function () {
    demoApp.routeProvider.when(module.action, {templateUrl: 'my-template', controller: module.controller});
});

脚本加载器

angular.module('demoApp.services').factory('ScriptLoader', ['$q', '$rootScope', function ($q, $rootScope) {
        return {
            load: function (dependencies)
            {
                var deferred = $q.defer();
                require(dependencies, function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });
                });
                return deferred.promise;
            }
        }
    }]);

问题

我仍然有这个javascript错误"'MouseTestCtrlA'不是一个函数,得到了未定义"这意味着Angular无法解析'MouseTestCtrlA'作为注册控制器.

有人可以帮我这一点吗？

Answer 1

重新阅读这篇文章http://ify.io/lazy-loading-in-angularjs/建议$contentProvider在Angular App中保留一个实例.

我在app.js中想出了这段代码

demoApp.config(function ($controllerProvider) {
     demoApp.controller = $controllerProvider.register;
});

它使我能够在外部javascript文件中按预期编写我的控制器:

angular.module("demoApp").controller('MouseTestCtrlA', fn);

希望这可以帮助!