angularjs - Angular ui 路由器 : nested views vs multiple views

Question

ui-router是 angular 标准路由器的绝佳替代品；支持nested states and views和 multiple views .

不过，我对两者之间的区别感到有些困惑。在我看来，几乎总是可以将多个 View 视为和实现为“高阶”组件的嵌套 View 。例如，如果我们考虑一个带有侧边栏和一个内容框的应用程序，我们可以将它们建模为两个“平行” View ，或者将侧边栏设为父 View ，将内容 Pane 设为依赖于所选侧边栏项的嵌套 subview .

自述文件本身似乎表明划分并不是很明确:

Pro Tip: While multiple parallel views are a powerful feature, you'll often be able to manage your interfaces more effectively by nesting your views, and pairing those views with nested states.

何时应该使用多个 View 以及何时使用嵌套 View ？是否有一些标准可以帮助您在大多数情况下选择哪种是对状态建模的正确方法，嵌套还是多个？

Answer 1

据我了解，多 View 主要是针对的。布局目的，而嵌套 View 用于 亲子分层 View 。以您提到的案例为例:

侧边栏和内容可以排列为两个不同的 View :

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

然后在侧边栏或内容模板中，您可以嵌套其 subview /部分。