Question

ui-router是角度标准路由器的绝佳替代品;它支持nested states and views和multiple views。

但是，由于两者之间的差异，我有点困惑。在我看来，几乎总是可以将多个视图视为并实现为＆＃34;更高阶＆＃34;的嵌套视图。零件。例如，如果我们考虑带有侧边栏和内容框的应用程序，我们可以将它们建模为两个＆＃34; parallel＆＃34;视图或使侧边栏成为父视图和内容窗格的嵌套子视图取决于所选的侧边栏项。

自述文件本身似乎表明这种划分并不是非常明确：

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

何时应该使用多个视图和嵌套视图？是否有一些标准可以帮助您选择大部分时间，这是建模状态的正确方法，嵌套与多个？

Answer 1

根据我的理解，多个视图主要用于布局目的，而嵌套视图用于父子层次视图。使用您提到的案例作为示例：

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

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

然后在sideBar或内容模板中，您可以将子视图嵌套为子视图/部分。

Answer 2

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

只是要注意嵌套的状态。

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

e.g：

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

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

Angular ui-router：嵌套视图与多个视图

2 个答案: