角度ui-router：ネストされたビュー対複数のビュー

Question

ui-routerは、角度の標準的なルータの素晴らしい代替手段です。 nested states and viewsとmultiple viewsをサポートしています。

私はちょっと混乱していますが、両者の違いによっては少し混乱します。ほとんどの場合、複数のビューは、「高次」コンポーネントのネストされたビューとして考えることができます。たとえば、サイドバーとコンテンツボックスがあるアプリを2つの「並列」ビューとしてモデル化したり、サイドバーを親ビューにしたり、コンテンツペインを選択したサイドバーアイテムに依存する入れ子の子ビューにすることができます。

readmeファイル自体は本当に明確でない部門を示唆しているようだ：

プロヒント：複数の並列ビューは強力な機能ですが、あなたは多くの場合で、より効果的にあなたのインターフェイスを管理できるようになりますビューを入れ子にし、それらのビューをネストされた状態とペアリングします。

いつ複数のビューを使用し、ネストされたビューを使用する必要がありますか？ネストと複数の状態をモデル化する正しい方法であるほとんどの時間を選択するのに役立ついくつかの基準がありますか？私の理解で

Answer 1

ネストされたビューは、親子階層ビューのためのものである一方で、複数のビューは、レイアウト目的のために主にあります。サイドバー

およびコンテンツは、2つの異なるビューとして配置することができる：あなたが例として挙げ場合を次に

<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> 

：path/to/the/main/frame/template.htmlテンプレートは、次のフレームを含んでいてもよい

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

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

今管理の子状態で、すべての状態もあなた場合（authenticateサービスを通過しなければなりません。直接admin/users/に移動します）。

したがって、基本的に解決策には何かを置くことができ、すべての子状態はそれを継承します。

パラレルビューの場合、レイアウトを完全に制御できます。
@TonyGWの例では、私は、ネストされた状態と並列ビューを意味し、また、パラレルネストされたビューを持つことができ、同時にあなたのアプリで をそれらの両方を使用することができます

素晴らしいです。レイアウトレイアウトの構造に大きく依存します。

子状態を親状態のhtmlの内部に表示するには、ネストされたビューを使用する必要があります。