如何在AngularJS路线中延迟加载页面?

时间:2014-08-11 10:55:56

标签: angularjs authorization

我想在主页出现之前,如果用户未登录则将其移至登录页面。

此时出现主页面(半秒),然后加载登录页面。

var app = angular.module("app", ["ngRoute", "ngAnimate"])

.constant('ACCESS_LEVELS', {
    guest: 1,
    user: 2,
    admin: 3
});


app.config(["$routeProvider", "$locationProvider", "ACCESS_LEVELS", function($routeProvider, $locationProvider, ACCESS_LEVELS) {

    $routeProvider
        .when("/", {
            template: "",
            access_level: ACCESS_LEVELS.user
        });
}]);

app.run(["$rootScope", "$window", "LoginService", function($rootScope, $window, LoginService) {

    $rootScope.$on('$routeChangeStart', function(evt, next, curr) {

        if(next.access_level !== undefined) {
            LoginService.checkSession().then(function(response) {
                $rootScope.isLoggedIn = response;
                if(!response)  {
                    $window.location.href = '/login.html';
                }
            }, function(error) {
                $rootScope.isLoggedIn = error;
            });
        }
 })
}]);

有没有办法在没有Flash主页的情况下完成角度? 问候

2 个答案:

答案 0 :(得分:0)

您可以使用routeProvider的'resolve'属性。

来自文档:

  

resolve - 一个可选的依赖关系图,应该将<>注入控制器。如果这些依赖项中的任何一个是promise,路由器将等待&gt;以便在实例化控制器之前解析所有依赖项或拒绝其中一个依赖项。

https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

因此,您的routeProvider可能如下所示,会话承诺被指定为您的归属路由的依赖关系。然后,您需要将会话注入家庭控制器。

 $routeProvider
   .when("/", {
     template: "",
     access_level: ACCESS_LEVELS.user,
     controller: ‘homeCtrl’,
     resolve: {
       session: function(LoginService) {
         return LoginService.checkSession();
       }
     }
   });

一篇好文章:http://blog.brunoscopelliti.com/show-route-only-after-all-promises-are-resolved

答案 1 :(得分:0)

我目前的代码:

主app.js中的

var app = angular.module("app", ["ngRoute", "ngAnimate", "ngResource"])

.constant('ACCESS_LEVELS', {
    guest: 1,
    user: 2,
    admin: 3
});


besecure.config(["$routeProvider", "$locationProvider", "ACCESS_LEVELS", function($routeProvider, $locationProvider, ACCESS_LEVELS) {

    $routeProvider
        .when("/", {
            template: "",
            label: "Home",
            access_level: ACCESS_LEVELS.user,
            resolve: {
                session: function(LoginService) {
                    return LoginService.checkSession();
                }
            }

        });
}]);

app.run(["$rootScope", "$window", "$location", "LoginService", function($rootScope, $window, $location, LoginService) {

    $rootScope.loadingView = false;

    $rootScope.$on('$routeChangeStart', function(evt, curr, prev) {
        if(curr.access_level !== undefined) {
            if(curr.$$route && curr.$$route.resolve) {
                $rootScope.loadingView = true;
            } else {
                $window.location.href = '/login.html';
            }
        }
    })
}]);

服务:

app.factory("LoginService", function($resource, $q) {
    var LoginService,
        Login = $resource("/auth/login");
LoginService = {
        checkSession: function() {
            var deferred = $q.defer();

            Login.get().$promise.then(function(response) {
                deferred.resolve(response.result);
            }, function(error) {
                deferred.reject(false);
            });

            return deferred.promise;
        }
};

    return LoginService;
});

服务还可以。 而不是重定向工作