使用 AngularJS 和 RequireJS 按需加载控制器答案

【问题标题】：Loading controller on demand using AngularJS and RequireJS使用 AngularJS 和 RequireJS 按需加载控制器
【发布时间】：2014-10-10 07:56:46
【问题描述】：

我正在使用 Angular UI-router 并尝试在路由更改时下载/加载控制器。我使用了resolve和category，data.data将js文件内容作为字符串返回。我不确定使控制器可用于角度。请帮忙

我的 module.js 包含以下路由代码

state("privacy", {
        url: "/privacy",
        controllerProvider: function ($stateParams) {
            return "PrivacyController";
        },
        resolve: {
            category: ['$http', '$stateParams', function ($http, $stateParams) {
                return $http.get("js/privacy.js").then(function (data) {
                    return data.data;
                });
            } ]
        },
        templateUrl: localPath + "templates/privacy.html"
    })

以下控制器存在于“js/privacy.js”中

socialinviter.controller("PrivacyController", function ($scope) { $scope.me = "你好世界"; });

我也尝试过使用 require js，但出现错误“http://errors.angularjs.org/1.2.16/ng/areq?p0=PrivacyController&p1=not%20aNaNunction%2C%20got%20undefined”

resolve: {
            deps: function ($q, $rootScope) {
                var deferred = $q.defer(),
                    dependencies = ["js/privacy"];
                    require(dependencies, function () {
                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });
                        deferred.resolve()
                    })
                return deferred.promise;
            }
        }

【问题讨论】：

PrivacyController 是否在 data.data 中定义？
PrivacyController 在单独的文件中定义，$http.get 正在下载该文件，data.data 包含 socialinviter.controller("PrivacyController", function ($scope) { $scope.me = "你好世界"; });
你不能那样做。你只是在下载一个文件..
我也试过用requirejs，看上面的代码，它下载文件但它抛出错误。

标签： angularjs angularjs-scope angular-ui-router

【解决方案1】：

我已经解决了这个问题，我认为该解决方案对其他人会有所帮助

第 1 步：在您的配置中，包含参数 $controllerProvider

mytestapp.config(function ($stateProvider, $controllerProvider)

步骤 2：告诉 Angular 将下载的控制器注册为控制器，在配置中添加以下内容

mytestapp.config(function ($stateProvider, $controllerProvider) {
mytestapp._controller = mytestapp.controller
mytestapp.controller = function (name, constructor){
    $controllerProvider.register(name, constructor);
    return (this);
}
......

第3步：添加resolve方法如下

state("privacy", {
        url: "/privacy",
        controller: "PrivacyController",
        resolve: {
            deps : function ($q, $rootScope) {
                var deferred = $q.defer();
                require(["js/privacy"], function (tt) {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });
                    deferred.resolve()
                });
                return deferred.promise;
            }
        },
        templateUrl: "templates/privacy.html"
    })

【讨论】：