Javascript 当url以角度更改时，模板会闪烁

我正在用angular开发一个小应用程序，我很难解决我面临的模板闪烁（显示一个模板，然后立即显示另一个模板）问题

我在基本模板和一些部分文件中定义了一个

标记

这是我的

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('/');
                }
              });
            }
         });
    });

---

当用户未通过身份验证时，会发生闪烁。

查看ngClock。这可能是一个解决办法。它说

---

“NgClope指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示角度html模板。使用此指令可避免html模板显示引起的不良闪烁效果”。

查看ngClock。这可能是一个解决办法。它说

---

“NgClope指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示角度html模板。使用此指令可避免html模板显示引起的不希望出现的闪烁效果。”

如前所述：您可以使用ng-Clope

但我认为这不能解决你的问题，因为请求是事后发生的

也许您可以使用模式来询问用户的凭据。我做了类似的事情，效果很好。（如果用户未经授权，则模式显示为淡入）

在$routeChangeStart事件中，您可以检查是否需要授权。如果没有，请发送所需的登录广播

    $rootScope.$on('$stateChangeStart', function (event, nextState) {
            if (nextState.requireLogin) {
                event.preventDefault();
                $rootScope.$broadcast('auth-change', 'loginRequired', nextState.name);
            }
        });

---

logincontroller处理loginRequired事件并显示模式。

如前所述：您可以使用ng斗篷

但我认为这不能解决你的问题，因为请求是事后发生的

也许您可以使用模式来询问用户的凭据。我做了类似的事情，效果很好。（如果用户未经授权，则模式显示为淡入）

在$routeChangeStart事件中，您可以检查是否需要授权。如果没有，请发送所需的登录广播

    $rootScope.$on('$stateChangeStart', function (event, nextState) {
            if (nextState.requireLogin) {
                event.preventDefault();
                $rootScope.$broadcast('auth-change', 'loginRequired', nextState.name);
            }
        });

---

logincontroller处理loginRequired事件并显示模式。

$routeProvider支持“resolve”属性，该属性通过延迟路由更改来解决闪烁问题，直到来自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
    }
  }).

---

$routeProvider支持“resolve”属性，该属性通过延迟路由更改来解决闪烁问题，直到来自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
    }
  }).