如何使用ui-router实现页面的分离呢?看代码!
index.html

1
2
3
<div ui-view="header"></div>
<div ui-view="body"></div>
<div ui-view="footer"></div>

Js code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$stateProvider
.state('root', {
abstract: true,
views: {
'header': {
templateUrl: 'layout/header/header.tpl.html',
controller: 'HeaderController',
controllerAs: 'vm'
},
'footer': {
templateUrl: 'layout/footer/footer',
controller: 'FooterController',
controllerAs: 'vm'
},
'body': {
templateUrl: 'layout/body/body.tpl.html'
}
}

})
.state('find',{
parent:'root',
templateURl:'find/find.tpl.html',
controller:'FindControlller',
//....other settings
})

记得把root状态设置成抽象的,即不能直接实例化,其他状态中需要设置parent属性为’root’,即我们的状态的父状态,这样在其他代码中写链接的时候就可以直接写成ui-sref="find"而不用都写成ui-sref="root.find"了。

参考:

[1] http://stackoverflow.com/questions/27603252/angular-ui-router-multiple-named-views-for-all-states
[2] http://angular-ui.github.io/ui-router/site/#/api