Angular ui路由器为所有状态提供多个命名视图

Question

我想知道是否有任何方法可以为所有状态编写多个命名视图,最好的例子是当我希望导航栏和页脚出现在所有路径中时.

$stateProvider
  .state('home',{
    views: {
      'home': {
        templateUrl: 'home.html',
        controller: controller
      },
      'nav': {
        templateUrl: 'nav.html',
        controller:controller
      },
      'footer': {
        templateUrl: 'footer.html',
        controller: controller
      },
    }
  })

我不想使用ng-include,因为在这种情况下解析主页状态之前导航和页脚显示.

Answer 1

是的,你可以,它实际上写在ui-router如何管理多个命名视图的指南中.

首先,您需要在抽象状态下定义一组特定的命名视图,包括放置所有内容视图(例如您的home.html视图)的视图,并将其放在无名视图中(空字符串).

您可能已经注意到,下面的演示显示了一个名为root的状态app,它也是一个抽象状态(这意味着您无法在此状态下导航).它有三个视图,每个视图代表一个与其中ui-view定义的s 相对应的名称index.html.

在无名视图中,包含content.html具有无名字的视图,ui-view该名称将代表该州的所有子app状态.通过这样做,你可以分享nav.html和footer.html你的所有状态,如果你下添加这些状态app的状态.这种情况的一个例子是app.home和app.items状态.要了解更多相关信息,请阅读我上面添加的链接.

DEMO

使用Javascript

$urlRouterProvider.otherwise('/home');

$stateProvider.state('app', {
  abstract: true,
  views: {
   nav: {
     templateUrl: 'nav.html',
     controller: 'NavController as Nav'
   },

   '': {
     templateUrl: 'content.html',
     controller: 'ContentController as Content'
   },

   footer: {
     templateUrl: 'footer.html',
     controller: 'FooterController as Footer'
   }

  }
})

.state('app.items', {
  url: '/items',
  templateUrl: 'items.html',
  controller: 'ItemsController as Items'
})

.state('app.home', {
  url: '/home',
  templateUrl: 'home.html',
  controller: 'HomeController as Home'
});

HTML

的index.html

<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>

content.html

<hr>
<ui-view></ui-view>
<hr>