Angularjs - 一條路線兩個可能的視圖

Question

我希望能夠爲兩個不同的視圖使用一條單一路線。

例如，現在，我有兩條路線。

一個是/ home這是當一個人可以註冊/登錄

而另外一個/飼料的主要頁面，這是當用戶登錄。

我想要做的是遇到了什麼像Twitter例如單路線：

twitter.com/

首先，他們要求你登錄

twitter.com/

比我們可以看到我們的飼料牆。它仍然是相同的「/」。希望我清楚:)

這是到目前爲止我的代碼：

$stateProvider 
      .state('index', { 
       url: '/', 
       controller: function($state, $auth) { 
        $auth.validateUser() 
         .then(function(resp) { 
          $state.go('feed'); 
         }) 
         .catch(function(resp) { 
          $state.go('home'); 
         }); 
       } 
      }) 

      .state('home', { 
       url: '/home', 
       templateUrl: 'home.html' 
      }) 

      .state('feed', { 
       url: '/feed', 
       templateUrl: 'feed.html' 
      }) 

Answer 1

至於我記得UI的路由器不支持這樣的功能，所以你必須自己做。

你可以做的只是定義一個單一的狀態，就像你在'index'中所做的那樣，而不是在控制器中執行$ auth邏輯，在「resolve」部分執行。

那麼你可以使用 「NG-if」 和 「NG-包括」 來定義你想加載，這樣的事情該.html文件和控制器：

app.js

$stateProvider 
     .state('index', { 
      url: '/', 
      resolve: { 
       isAuthenticated: function() { 
        return $auth.validateUser().then(function(res) { 
         return true; 
        }, function(error) { 
         return false; 
        }); 
       } 
      }, 
      controller: function($scope, isAuthenticated) { 
       $scope.isAuthenticated = isAuthenticated; 
      }, 
      templateUrl: 'index.html' 
     }) 

index.html

<div ng-if="isAuthenticated"> 
    <div ng-include="'feed.html'"></div> 
</div> 

<div ng-if="!isAuthenticated"> 
    <div ng-include="'login.html'"></div> 
</div>