我读了很多关于lazzy加载,但是我使用$routeProvider时面临一个问题.
我的目标是加载一个包含控制器的javascript文件,并向之前加载的控制器添加路由.
angular.module('demoApp.modules').controller('MouseTestCtrlA',['$scope',function ($scope) { console.log("MouseTestCtrlA"); $scope.name = "MouseTestCtrlA"; }]);
当调用角度引导程序时,不包括此文件.这意味着,我必须加载文件并创建一个到该控制器的路由.
首先,我开始编写一个解析函数,它必须加载Javascript文件.但是在路由声明中声明我的controller参数给了我一个错误:
‘MouseTestCtrlA’ is not a function,got undefined
这是我试图设置的电话:
demoApp.routeProvider.when(module.action,{templateUrl: module.template,controller: module.controller,resolve : {deps: function() /*load JS file*/} });
从我读到的,控制器参数应该是已注册的控制器
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.
所以我写了一个工厂,应该可以加载我的文件,然后(承诺样式!)我应该尝试声明一个新的路由.
它给了我下面的东西,其中依赖关系是一组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.
有人可以帮我吗?
重新阅读本文
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);
希望这可以帮助!