简介:
与集成的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>
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><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>'
}
}
});
4100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
