使用 ocLazyLoad 时注入延迟加载 AngularJS 控制器

Question

我开始使用 ocLazyload 来延迟加载我的几个 AngularJs 控制器。我已经将它与 $routeProvider 一起使用

  $routeProvider.when("/login", {
        templateUrl: "login.html",
        resolve: {
            loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load('LoginCtrl.js');
            }]
        }
    }).

这很好用。

我有另一个路由定义，它使用 resolve 属性在加载控制器之前解析一些项目。

 when("/dashboard", {
        templateUrl: "dashboard.html",
        controller: "DashboardCtrl",
        resolve: {
            profileData: getProfile,
            count : getCount
        }
    }).

现在我也想懒加载这个controller，试了一下

   when("/dashboard", {
        templateUrl: "dashboard.html",
        resolve: {
            profileData: getProfile,
            count : getCount,
            loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load(['DashboardCtrl.js']);
            }]
        }
    }).

在这种情况下加载了页面，但 profileData 和 count 没有注入到控制器中。控制器定义如下。

var app = angular.module('gt');
app.controller('DashboardCtrl', ['$scope', '$rootScope', 'profileData', 'count',
    function($scope, $rootScope, profileData, count) {
...
}]);

在调试时，我发现 getProfile 和 getCount 方法被调用了，但它是异步发生的，控制器也延迟加载而不等待这些方法。如何同时注入和延迟加载？我可以使用承诺以任何方式解决这个问题吗？

我正在使用 AngularJS 1.3.10 和 ocLazyLoad 1.0.5 版本

getProfile函数供参考

var getProfile = function($q, $http, Profile, localStorageService) {
        var deferred = $q.defer();
        if (!localStorageService.get("loggedInUser")) {
            $http.post('/loggedin').success(function(user) {
                if (user) {
                    localStorageService.set("loggedInUser", user.email)
                    Profile.get(localStorageService.get("loggedInUser"), function(profileData) {
                        if (profileData) {
                            deferred.resolve(profileData);
                        } else {
                            deferred.resolve();
                        }
                    });
                } else {
                    deferred.reject();
                }
            });
        } else {
            Profile.get(localStorageService.get("loggedInUser"), function(profileData) {
                if (profileData) {
                    deferred.resolve(profileData);
                } else {
                    deferred.resolve();
                }
            });
        }
        return deferred.promise;
    }

getProfile.$inject = ["$q", "$http", "Profile", "localStorageService"];

Answer 1

getProfile和getCountreturn是承诺吗？我猜这是问题所在，因为这是必需的。 resolve 中的每个对象都应该 return 一个承诺。见 the documention

Answer 2

我可以使用 $routeProvider

的以下配置来实现此功能

when("/dashboard", {
    templateUrl: "dashboard.html",
    controller :"DashboardCtrl"
    resolve: {
        profileData: getProfile,
        count : getCount,
        loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load(['DashboardCtrl.js']);
        }]
    }
}).

其中 DashboardCtrl 是 DashboardCtrl.js

中定义的控制器

Answer 3

如果您需要您的解决方案以特定顺序发生，您可以将它们注入到另一个解决方案中，如下所示：

   when("/dashboard", {
    templateUrl: "dashboard.html",
    resolve: {
        profileData: getProfile,
        count : getCount,
        loadCtrl: ['$ocLazyLoad', 'profileData', 'count', function($ocLazyLoad, profileData, count) {
            return $ocLazyLoad.load(['DashboardCtrl.js']);
        }]
    }
}).

使用 ocLazyLoad 时注入延迟加载 AngularJS 控制器

Injecting into lazy loaded AngularJS Controller when using ocLazyLoad

javascript

angularjs

oclazyload