12

ui-routerは、angular の標準ルーターの優れた代替手段です。ネストされた状態とビュー、および複数のビューをサポートします。

とはいえ、両者の違いに少し戸惑います。複数のビューは、ほとんどの場合、「高次」コンポーネントのネストされたビューとして考えて実装できるように思えます。たとえば、サイドバーとコンテンツ ボックスを備えたアプリを検討する場合、それらを 2 つの「並列」ビューとしてモデル化するか、サイドバーを親ビューにし、コンテンツ ペインを選択したサイドバー アイテムに依存するネストされた子ビューとしてモデル化することができます。 .

readme自体は、分割が明確ではないことを示唆しているようです:

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

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

4

2 に答える 2

11

私の理解では、複数のビューは主にレイアウト用であり、ネストされたビューは親子階層ビュー用です。あなたが例として挙げたケースを使用して：

サイドバーとコンテンツは、2 つの異なるビューとして配置できます。

$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テンプレートには、次のフレームが含まれる場合があります。

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

次に、サイドバーまたはコンテンツ テンプレートで、それらの子サブビュー/パーシャルをネストできます。

于 2015-12-22T15:31:03.850 に答える