简介:
与集成的ngRoute服务不同的是,UI-Router可以将视图嵌套,因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是,在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时,开发者的重心是当前的状态是什么以及在哪一个页面里
和ngRoute一样,为特定状态指定的模板将会放在<div ui-view></div>
元素中。在这些模板中也可以包含自己的ui-view
,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由,与传统的方法相同:使用.config
方式,但使用的不是$routeProvider
而是$stateProvider
。
使用ng-route已经不能满足多视图嵌套,所以开发了ui-router路由,l例如当实现导航栏的时候,使用到多个视图嵌套,那么可以使用ui-router来实现。
用法基本和上节讲的ng-router一样,ng-view换成ui-view,$routeProvider换成 $stateProvider和$urlRouterProvider
参考:
http://www.open-open.com/lib/view/open1416878937309.html
代码:
一.一个页面只有一个ui-view
1.index.html
主页面index.html中嵌入导航栏(pageTab.html)
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 这里使用ui-view来做页面填充 -->
<div ui-view></div>
<script src="../js/angular.js"></script>
<script src="../js/angular-animate.js"></script>
<script src="../js/angular-ui-router.min.js"></script> <!---这里使用ui-router->
<script src="app.js"></script>
</body>
</html>
2.app.js
var myapp = angular.module('myapp',['ui.router','ngAnimate']);
myapp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider,$urlRouterProvider){
//$urlRouterProvider.when("", "/pageTab1");
$stateProvider
.state("PageTab", { //路由状态
url: "/pageTab", //路由路径
templateUrl: "pageTab.html" //路由填充的模板
})
.state("PageTab.Page1", {
url:"/xiaomi",
templateUrl: "xiaomi.html"
})
.state("PageTab.Page2", {
url:"/meizu",
templateUrl: "meizu.html"
})
.state("PageTab.Page3", {
url:"/huawei",
templateUrl: "huawei.html"
});
$urlRouterProvider.otherwise("/pageTab");
}]);
解释:1.和ng-router不同的是,这里使用state表示路由状态,有2个参数,一个是路由的状态xxx.xxx
2.路由状态,这里存在一个继承关系,例如,子页面xiaomi.html嵌入到pageTab.html页面,那么/xiaomi继承了/pageTab,就是母模板和子模板的关系,当母模板激活的时候(访问),子模板不会被激活,当子模板激活时,目模板一定会被激活,例如,我们可以使用直接访问子模板,假如使用超链接<a href="#/pageTab/xiaomi"></a>,这意味着状态是PageTab.Page1,xiaomi.html这个页面激活,同时pageTab.html也被激活。
3.$urlRouterProvider.when("", "/pageTab1");当路由引擎匹配的路径是空的时候,就跳该路径
$urlRouterProvider.otherwise("/pageTab");表示路由引擎匹配不到路径时,就跳该路径
3.导航菜单pageTab.html
<!-- 导航栏 -->
<div>
<div>
<!--这里使用ui-sref将超链接和路由建立联接-->
<span style="width:100px" ui-sref=".Page1"><a href="">小米</a></span>
<span style="width:100px" ui-sref=".Page2"><a href="">魅族</a></span>
<span style="width:100px" ui-sref=".Page3"><a href="">华为</a></span>
</div>
<div ui-view></div>
</div>
解释: 这里使用ui-sref链接路由状态,将该状态的url替换到href中,相当 与href="#/PageTab/ xiaomi "
4.三个子页面
xiaomi.html
<div>
<span style="background-color:red">xiaomi</span>
</div>
meizu.html
<div>
<span style="background-color:red">meizu</span>
</div>
huawei.html
<span style="font-size:14px;"><div>
<span style="background-color:red">hauwei</span>
</div></span>
效果:
嵌入页面效果:导航页面pageTab.html嵌入到index.html中,点击超链接的时候,3个页面分别嵌入到pageTab.html中。
二.一个页面有多个ui-view
参考:http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/
可以给ui-view
指定名称,这样一个模板中就可以有多个ui-view
在app.js中,
$stateProvider.state('abc',{
url:xxx,
views:{
'view1':{ //1.这里的名字对应html中<div ui-view="view1"></div> 可以随便命名2.可以使用view1@bcd表示默
认继承bcd视图
templateUrl: xxx,
controller:xxx
},
'view2':{
templateUrl: xxx,
controller:xxx
}}
}).state('xxx',{
...
})...
三.最后,讲一下ui-router的状态
所谓状态,就是我页面要求什么状态下填充那部分模板。
假如当一个页面有多个ui-view的时候,有view1,view2,view3,view4,我在状态a下,我要填充view1,view2,
状态b下填充view2,view4,状态c下填充view1,3,4,当前有3个状态,所以在母模块下要写3个state,例如:
$stateProvider.state('question',{ //母模块
....
}).state('question.init.attention.test',{ //子状态1 显示view1
url:"/test",
views:{
/*'first':{
template:'<div>first</div>'
},*/
'second':{
template:'<div>second</div>'
}
}).state('question.init.attention.test',( //子状态2 显示view2
url:"/test2",
views:{
'first':{
template:'<div>first</div>'
}
/*'second':{
template:'<div>second</div>'
}*/
}
)}.state('question.init.attention.test',{ //子状态3 显示view1,view2
url:"/test2",
views:{
'first':{
template:'<div>first</div>'
}
'second':{
template:'<div>second</div>'
}
}
});