ui-router多视图使用
开发者可以在一个状态中设置多个有名称的视图。该功能在ui-router中很强大,开发者可以在同一个模板中改变和切换不同的视图。
如果设置了视图选项,则该状态的‘template’,‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板,就需要创建一个包含模板的抽象模板。
1.设置占位符,绑定视图
<div class="header" ui-view="head"></div>
<div class="content">
<div class="content_l" ui-view="left"></div>
<div class="content_r" ui-view="right"></div>
</div>
2.配置路由
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url:'/index',
views:{
head:{
template:'<h1>头部</h1>'
},
left:{
template:'<h1>左边</h1>'
},
right:{
template:'<h1>右边</h1>'
}
}
});
$urlRouterProvider.otherwise('/index');
}]);