無需預先加載即可使AngularJS Transition更清潔

Question

我記得讀過一個指南，該指南如何確保角度在最終渲染之前的幾秒鍾內不會預加載{{}}和其他各種位，但是我無法對其進行深入研究。

誰能指出我正確的方向？

Answer 1

您可以使用ui-route的$ stateChangeStart事件來檢查用戶是否嘗試進入需要身份驗證的狀態。 您需要在應用的運行階段監聽該事件，您可以檢查以下內容。

angular.module("yourApp").run(function($rootScope, $state){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
         if(toState === "yourStateWhichRequiresAuthentication" && authenticationFailed){
         event.preventDefault();
         $state.go("loginState");

}}）}）;

更好的是，您可以將數據添加到狀態中，並使用以下數據值來定義哪些狀態需要認證，並檢查toState是否需要認證：

//Data Definition in your state definition
$stateProvider
  .state("main", {
    url: "main",
    template: "<div>Main State</div>",
    data: {needsAuthentication: true})

if (toState.data && toState.data.needsAuthentication) {
   if (!$rootScope.isAuthenticated()) { // user is not logged in
      event.preventDefault();
      $state.go("login");
   }
}