AngularJS动态加载控制器

前端之家收集整理的这篇文章主要介绍了AngularJS动态加载控制器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我读了很多关于lazzy加载,但是我使用$routeProvider时面临一个问题.

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

要加载我的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);

希望这可以帮助!

猜你在找的Angularjs相关文章