AngularJS 动态加载控制器 [英] AngularJS Dynamic loading a controller

问题描述

我阅读了很多关于延迟加载的文章，但在使用 $routeProvider 时遇到了问题.

I read a lot about lazzy loading, but I am facing a problem when using $routeProvider.

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

My goal is to load a javascript file which contains a controller and add a route to this controller which has been loaded previously.

要加载的 javascript 文件的内容

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

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

This file is not included when angular bootstap is called. It means, I have to load the file and create a route to this controller.

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

First, I started writing a resolve function which has to load the Javascript file. But declaring my controller parameter in route declaration gave me an error :

'MouseTestCtrlA' 不是函数，未定义

'MouseTestCtrlA' is not a function, got undefined

这是我要设置的电话:

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

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

From what I read, the controller parameter should be a registered controller

controller – {(string|function()=} – 控制器 fn 应该与新创建的范围或注册控制器的名称相关联，如果作为字符串传递.

controller – {(string|function()=} – Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.

所以我写了一个工厂，它应该能够加载我的文件，然后(承诺风格！)我会尝试声明一条新路线.

So I write a factory which should be able to load my file and then (promise style!) I whould try to declare a new route.

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

It gave me something like below where dependencies is an array of javascript files' paths to load :

使用

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' 解析为已注册的控制器.

I still have this javascript error "'MouseTestCtrlA' is not a function, got undefined" which means Angular could not resolved 'MouseTestCtrlA' as a registered controller.

有人能帮我解决这个问题吗?

Can anyone help me on this point please ?

推荐答案

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

Re-reading this article http://ify.io/lazy-loading-in-angularjs/ suggested to keep a $contentProvider instance inside Angular App.

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

I came up with this code in my app.js

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

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

It enables me to write my controller as expected in a external javascript file :

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

希望可以帮到你！

这篇关于AngularJS 动态加载控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！