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

问题描述

我读了很多关于lazzy加载，但我使用$ routeProvider时面临的一个问题。

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

我的目标是要加载的包含一个控制器一个JavaScript文件和一个路由添加到该控制器已加载previously。

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

不包含此文件时的角度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

下面是调用我试图设置：

Here is the call I am trying to set :

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

控制器 - {（字符串|函数（）=} - 控制器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'不是一个函数，得到了不确定的，这意味着角不可能解决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.

谁能帮我这一点吗？

推荐答案

重读这篇文章 http://ify.io/lazy-loading-in-angularjs/ 建议保持 $的ContentProvider 实例角应用中。

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

我来到了我的app.js这code

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

希望这可以帮助！

Hope this can help !

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