AngularJS动态加载控制器

Question

我读了很多关于lazzy加载，但我使用$ routeProvider时遇到问题。

我的目标是加载一个JavaScript文件，其中包含一个控制器，并添加一个路由到此控制器之前已经加载。

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

此文件时的角度bootstap被称为不包括我的javascript文件的

要加载的内容。这意味着，我必须加载文件并创建一个到这个控制器的路由。

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

“MouseTestCtrlA”是不是一个功能，得到了不确定

这里是调用我想设置：

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

从我看到的，控制器参数应该是注册的控制器

con troller - {（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实例。

我想出了这个代码在我的应用程序。JS

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

它使我预期的外部JavaScript文件中写入我的控制器：

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

希望这可以帮助！