角度ui-路由器:嵌套视图vs多视图

ui-router is a great alternative to angular's standard router; it supports nested states and views and multiple views.

ui-router是角型标准路由器的一个很好的替代方案;它支持嵌套状态和视图以及多个视图。

I am a little confused, though, by the difference between the two. It seems to me that multiple views can almost always be thinked and implemented as nested views of an "higher-order" component. For example, if we consider an app with a sidebar and a content box, we may model them as two "parallel" views or as making the sidebar the parent view and the content-pane its nested child view that depends on the selected sidebar item.

尽管如此，我还是有点困惑。在我看来，可以将多个视图作为“高阶”组件的嵌套视图进行细化和实现。例如，如果我们考虑一个具有侧边栏和内容框的应用程序，我们可以将它们建模为两个“并行”视图，或者将侧边栏建模为父视图，并将内容窗格的嵌套子视图建模为依赖于所选边栏项的子视图。

The readme itself seems to suggest the division is not really clear-cut:

自述本身似乎表明这个部门并不是很明确:

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.

专业提示:虽然多个并行视图是一个强大的特性，但是通过嵌套视图并将这些视图与嵌套状态相匹配，您通常能够更有效地管理您的接口。

When should I use multiple views and when nested views? Is there some criteria that can help you choose most of the time which is the correct way to model the states, nested vs multiple?

何时应该使用多个视图，何时使用嵌套视图?是否有一些标准可以帮助您在大多数情况下选择正确的方式来建模状态，嵌套vs多重?

2 个解决方案

#1

In my understanding, the multiple views are primarily for layout purpose, while the nested views are for parent-children hierarchical views. Using the case you mentioned as an example:

在我的理解中，多个视图主要用于布局目的，而嵌套视图用于父子层次结构视图。以你提到的案例为例:

The sidebar and the content could be arranged as two distinct views:

侧边栏和内容可以分成两个不同的视图:

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

The path/to/the/main/frame/template.html template may contain the following frame:

路径/ / /主/框架/模板。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>

Then in the sideBar or the content templates, you can nest their children subview/partials.

然后在侧边栏或内容模板中，可以嵌套子视图/部分。

#2

Nested states can be used with both nested and parallel views.

嵌套状态可以与嵌套视图和并行视图一起使用。

Just to note something about nested states.

注意一下嵌套状态。

What makes nested states great is that you can easily share/inherit data from parent to child view.

使嵌套状态很棒的是，您可以轻松地从父视图共享/继承数据。

e.g:

例句:

Lets say you have some pages that require a user has logged in.

假设您有一些需要用户登录的页面。

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

Now every state that is a child state of admin has to pass authenticate service ( even if you navigate directly to admin/users/ ).

现在，每个属于admin子状态的状态都必须通过身份验证服务(即使您直接导航到admin/users/)。

So basically in the resolve you can put anything and all the child states will inherit from that.

所以基本上在解决方案中你可以放任何东西所有的子状态都将继承它。

As for parallel views you have complete control over your layouts.
@TonyGW's example is great

对于并行视图，您可以完全控制布局。@TonyGW的例子是伟大的

You can use them both in your app at the same time, I mean nested states and parallel views and you also can have parallel nested views. It really depends on the structure of your layout layout.

你可以同时在你的应用中使用它们，我的意思是嵌套状态和并行视图你也可以有并行嵌套视图。这取决于布局布局的结构。

If you want child states to appear inside the html of the parent state you have to use nested views.

如果希望子状态出现在父状态的html中，则必须使用嵌套视图。

#1