AngularJS 动态加载控制器

Question

我阅读了很多关于延迟加载的内容，但是在使用 $routeProvider 时遇到了问题。

我的目标是加载一个包含控制器的 javascript 文件并添加一个路由到该控制器，该控制器之前已加载。

要加载的 javascript 文件的内容

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

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

首先，我开始编写一个解析函数，它必须加载 Javascript 文件。但是在路由声明中声明我的控制器参数给了我一个错误：

'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/ 建议在Angular App 中保留一个$contentProvider 实例。

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

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

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

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

希望这能有所帮助！