如何在角度ui路由器状态下呈现模板之前等待解析依赖关系

时间:2014-08-18 13:38:44

标签: angularjs angular-ui-router

我需要在templateUrl函数中使用已解析的数据(使用resolve块)。我怎样才能做到这一点?或者我们可以在调用templateUrl函数之前等待解析完成吗?

2 个答案:

答案 0 :(得分:0)

以下是在加载每个视图之前需要检查用户是否已经过身份验证的身份验证服务。

app.factory('appAuth', function ($http, $q, $location, $cookies, redirectToUrlAfterLogin, myHomePage) {
            var self = {};
            self.loginStatus= false;
            self.userDetails = {};
            self.Terminal = {};
            self.monument = {};
            self.loggedIn = function (callback) {
                    var deferred = $q.defer();
                    $http({
                        method: "GET",
                        url: 'rest/operator/loginStatus'
                    }).success(function (response, status, headers, config) {
                        if (callback) 
                            callback(response.IsSuccess, response.data);  
                        deferred.resolve();
                    });
                    return deferred.promise;
                };
            self.loggedOut = function(callback){
                    var deferred = $q.defer();
                    $http({
                        method: "POST",
                        url: 'rest/operator/logout'
                    }).success(function (response, status, headers, config) {
                        if (callback) 
                            callback(response.IsSuccess, response.data);  
                        deferred.resolve();
                    });
                    return deferred.promise;
                };        
            self.saveAttemptUrl = function () {
                if ($location.path().toLowerCase() != '/login') {
                    redirectToUrlAfterLogin.url = $location.path();
                } else {
                    redirectToUrlAfterLogin.url = myHomePage.url;
                }
            };
            self.redirectToAttemptedUrl = function () {
                    $location.path(redirectToUrlAfterLogin.url);
                };
            return self;
        });



-- config Section of Angular use this.

 $routeProvider
            .when("/", angularAMD.route({
               templateUrl: function (rp) { return rootUrl + 'index.html'; },
               controllerUrl: rootUrl + "indexController.js",
               resolve: {
                   login: function($q,appAuth,$rootScope) {
                    var deferred = $q.defer();
                    appAuth.loggedIn(function(err, data){
                        appAuth.loginStatus = true;
                        $rootScope.ConfigVersion = data.monument.ConfigVersion;
                        $rootScope.monument = data.monument;
                        if (!err) {
                            appAuth.loginStatus = false;
                            appAuth.userDetails = {};
                            appAuth.Terminal = {};
                            appAuth.mounument = {};
                            deferred.resolve();
                            return;
                        }   
                        if (data.User == 0) {
                            appAuth.loginStatus = false;
                            deferred.resolve();
                            return;
                        }
                        appAuth.userDetails = data.userDetails;
                        appAuth.Terminal = data.model;
                        appAuth.monument = data.monument;
                        deferred.resolve();
                    });
                    return deferred.promise;
                   }
               }
            }))

答案 1 :(得分:-1)

你可以在设置角度路由时实现它 -

示例:

$routeProvider.when("/home", {
    controller: "HomeController", templateUrl: "/app/home/home.html",
    resolve: {
        user: function (SessionService) {
            return SessionService.getCurrentUser();
        }
    }
});

有了解决方法,您正在为控制器设置依赖性。如果这些依赖项是promise,它们将被解析并在加载控制器之前和触发$ routeChangeSuccess事件之前设置为值。

resolve是一个关键的值对 -

  • key:将注入控制器的依赖项的字符串名称
  • value:factory,其中工厂可以是服务名称的字符串,将结果注入控制器的函数,或者要解析的承诺