Angular ui路由器:嵌套视图与多个视图



ui路由器是angular标准路由器的一个很好的替代品;它支持嵌套状态和视图以及多个视图。

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

自述本身似乎表明分歧并不明确:

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

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

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

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

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

然后在边栏或内容模板中,可以嵌套它们的子视图/部分。

嵌套状态既可以用于嵌套视图,也可以用于并行视图。

只是要注意一些关于嵌套状态的内容。

嵌套状态之所以出色,是因为您可以轻松地从父视图到子视图共享/继承数据。

例如:

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

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

最新更新