Angular ui-router：嵌套視圖與多個視圖

Question

ui-router是angular標准路由器的絕佳替代品; 它支持嵌套狀態和視圖以及多個視圖 。

不過，我有點困惑，兩者之間的區別。 在我看來，幾乎總是可以將多個視圖視為“高階”組件的嵌套視圖。 例如，如果我們考慮具有側邊欄和內容框的應用程序，我們可以將它們建模為兩個“並行”視圖，或者將側邊欄設置為父視圖，將內部窗格設置為依賴於所選側邊欄項目的嵌套子視圖。

自述文件似乎表明這種划分並不是很明確：

專業提示：雖然多個並行視圖是一個強大的功能，但您通常可以通過嵌套視圖並將這些視圖與嵌套狀態配對來更有效地管理界面。

什么時候應該使用多個視圖和嵌套視圖？ 是否有一些標准可以幫助您選擇大部分時間，這是建模狀態的正確方法，嵌套與多個？

Answer 1

在我的理解中，多個視圖主要用於布局目的，而嵌套視圖用於父子層次視圖。 使用您提到的案例作為示例：

側邊欄和內容可以安排為兩個截然不同的視圖：

$stateProvider.state('main', {
      abstract: true,
      url: '/main', //base url for the app
      views: {
         '': {
              //this serves as a main frame for the multiple views
              templateUrl: 'path/to/the/main/frame/template.html'
         },
         'sideBar@main': {
             templateUrl: 'path/to/the/sidebar/template.html'
          },
        'content@main': {
             templateUrl: 'path/to/the/content/template.html'
         }
      }
});

path/to/the/main/frame/template.html模板的path/to/the/main/frame/template.html可能包含以下框架：

<div class="row"> Header section </div>
<div class="row>
  <div class="col-sm-4"><div ui-view="sideBar"></div></div>
  <div class="col-sm-8"><div ui-view="content"></div></div>
</div>

然后在sideBar或內容模板中，您可以嵌套他們的子視圖子部分。

Answer 2

嵌套狀態可以與嵌套視圖和並行視圖一起使用。

只是要注意嵌套狀態 。

嵌套狀態的優點在於您可以輕松地共享/繼承父視圖到子視圖的數據。

例如：

假設您有一些頁面需要用戶登錄。

$stateProvider
.state('admin', {
    url: '/admin'
    resolve: { authenticate: authenticate }
})
.state('admin.users', {
    url: '/users'
})

function authenticate(Auth) { 
    if (Auth.isLoggedIn()) {
        // Resolve the promise successfully
        return $q.when();
    } else {
        $timeout(function() {
            // This code runs after the authentication promise has been rejected.
            // Go to the log-in page
            $state.go('login', {}, {reload:true});
        });
        // Reject the authentication promise to prevent the state from loading

    return $q.reject();
}     

現在，每個狀態為admin的狀態都必須通過authenticate服務（即使您直接導航到admin/users/ ）。

所以基本上在決心中你可以放任何東西，所有的子狀態都將繼承。

對於並行視圖，您可以完全控制布局。
@TonyGW的例子很棒

你可以在你的應用程序中同時使用它們，我的意思是嵌套狀態和並行視圖，你也可以有並行的嵌套視圖。 這實際上取決於布局布局的結構。

如果您希望子狀態出現在父狀態的html中，則必須使用嵌套視圖。