Question

我读了很多关于lazzy加载的内容，但是在使用$ 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);

希望这有帮助！

AngularJS动态加载控制器

1 个答案: