当Angl中的URL更改时,模板闪烁

Question

我正在开发一个带角度的小应用程序,我很难解决模板闪烁(显示一个模板然后立即显示另一个模板)我面临的问题.

我<ng-view>在我的基本模板中定义了一个标记和一些部分文件.

这是我的routeProvider设定:

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: '/static/partials/login.html',
        controller: 'LoginController',
        requireLogin: false
      }).
      when('/login', {
        templateUrl: '/static/partials/login.html',
        controller: 'LoginController',
        requireLogin: false
      }).
      when('/register', {
        templateUrl: '/static/partials/register.html',
        controller: 'RegisterController',
        requireLogin: false
      }).
      when('/profile', {
        templateUrl: '/static/partials/profile.html',
        controller: 'ProfileController',
        requireLogin: true
      }).
      otherwise({
        redirectTo: '/'
      });
}]);

如您所见,我正在定义一个requireLogin属性来检查相应的路由是否要求用户登录到webapp.

以下是我定义的拦截器,它检查是否设置了requireLogin属性,如果是,则询问服务器是否对用户进行了身份验证.如果用户未经过身份验证,则会将其重定向到登录页面.

 app.run(function($rootScope, $location, $http) {
        $rootScope.$on('$routeChangeStart' , function(event, current) {
            if(current.requireLogin) {
              $http.get('/authenticated').success(function(response){
                if(!response.authenticated) {
                  $location.path('/');
                }
              });
            }
         });
    });

当用户未经过身份验证时,会发生闪烁.

Answer 1

$ routeProvider支持'resolve'属性,该属性通过延迟路由更改来解决闪烁问题,直到解析对象的所有promise都已解决.resolve属性可注入控制器功能.以下是它的工作原理示例:

  when('/profile', {
    templateUrl: '/static/partials/profile.html',
    controller: function($scope, profile, loginInfo) {
         $scope.data = profile.data;
         $scope.loginInfo = loginInfo;
    },
    requireLogin: true,
    resolve:  {
         profile: function($http) {
             // return a promise
             return $http({ method: 'GET', url:'/getProfile' });
        },
        loginInfo: function() {
             // return an object literal
             return  { details: { ... } }
        }, 
        etc
    }
  }).