12

ui-router是 Angular 标准路由器的绝佳替代品；它支持嵌套状态和视图以及多个视图。

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

自述文件本身似乎表明该部门并不是很明确：

专业提示：虽然多个并行视图是一项强大的功能，但您通常可以通过嵌套视图并将这些视图与嵌套状态配对来更有效地管理界面。

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

4

2 回答 2

11

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

侧边栏和内容可以安排为两个不同的视图：

$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 回答
6

嵌套状态可以用于嵌套视图和并行视图。

只是要注意一些关于嵌套状态的事情。

嵌套状态的好处在于您可以轻松地从父视图共享/继承数据到子视图。

例如：

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

$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 中，则必须使用嵌套视图。

于 2016-01-13T12:37:14.287 回答