[英]Angular ui router multiple named views for all states
I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes. 我想知道是否有任何方法可以为所有状态编写多个命名视图,最好的例子是当我希望导航栏和页脚出现在所有路径中时。
$stateProvider
.state('home',{
views: {
'home': {
templateUrl: 'home.html',
controller: controller
},
'nav': {
templateUrl: 'nav.html',
controller:controller
},
'footer': {
templateUrl: 'footer.html',
controller: controller
},
}
})
I dont want to use ng-include, because the nav and the footer is showing before the home state is resolved in this case. 我不想使用ng-include,因为在这种情况下解析主页状态之前导航和页脚显示。
Yes you can, its actually written in the ui-router
's guide on how to manage Multiple Named Views . 是的,你可以,它实际上写在ui-router
的指南中,关于如何管理多个命名视图 。
First, you need to define a specific set of named views in an abstract state, including the view where you would put all your content views such as your home.html
and put it in a nameless view (empty string). 首先,您需要在抽象状态下定义一组特定的命名视图,包括将所有内容视图(如home.html
放在无名视图(空字符串)中的视图。
As you may have noticed, the demo below shows a root state named app
, which is also an abstract state (this means you can't navigate in this state). 您可能已经注意到,下面的演示显示了一个名为app
的根状态,它也是一个抽象状态(这意味着您无法在此状态下导航)。 It has three views, each represents a name that corresponds to the ui-view
s defined in the index.html
. 它有三个视图,每个视图代表一个与index.html
定义的ui-view
对应的名称。
Within the nameless view, contains the content.html
that has a nameless ui-view
that will represent all the child states of the app
state. 在无名视图中,包含具有无名ui-view
的content.html
,该ui-view
将表示app
状态的所有子状态。 By doing this, you can share the nav.html
and footer.html
to all your states if you add these states under the app
state. 通过这样做,如果在app
状态下添加这些状态,则可以将nav.html
和footer.html
共享到所有状态。 An example to this would be the app.home
and app.items
state. 这方面的一个例子是app.home
和app.items
状态。 To learn more about this, read the link I've added above. 要了解更多相关信息,请阅读我上面添加的链接。
Javascript 使用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 HTML
index.html 的index.html
<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>
content.html content.html
<hr>
<ui-view></ui-view>
<hr>
Depending on the rest of your routes you can probably make use of the abstract state to do this: 根据您的其他路由,您可以使用抽象状态来执行此操作:
Angular UI Router - Views in an Inherited State might also help point you in the right direction. Angular UI路由器 - 处于继承状态的视图也可能有助于指向正确的方向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.