大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。
今天给大家分享一下：
如何使用ui-router？
1.配置使用ui-router
1.1导入js文件
需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。
-
<script type="text/javascript" src="JS/angular.min.js"></script> -
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>
- 1
- 2
1.2注入angular模块
var app = angular.module('myApp', ['ui.router']);- 1
注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图： 
1.3定义视图
ui-view替代的是ngroute路由的ng-view。
<div ui-view></div>- 1
1.4配置路由状态
-
app.config(["$stateProvider", function ($stateProvider){ -
$stateProvider -
.state("home", { //导航用的名字，如<a ui-sref="login">login</a>里的login -
url: '/', //访问路径 -
template:'<div>模板内容......</div>' -
}) -
}]);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2.简单示例
-
<html> -
<head> -
<title>ui-router</title> -
<meta http-equiv="pragma" content="no-cache"> -
<meta http-equiv="cache-control" content="no-cache"> -
<meta http-equiv="expires" content="0"> -
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> -
<meta http-equiv="description" content="This is my page"> -
<!-- 导入JS --> -
<script type="text/javascript" src="JS/angular.min.js"></script> -
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script> -
</head> -
<body > -
<div ng-app="myApp"> -
<div ui-view></div> <!-- 视图 --> -
</div> -
</body> -
<script type="text/javascript"> -
//定义模板，并注入ui-router -
var app = angular.module('myApp', ['ui.router']); -
//对服务进行参数初始化，这里配stateProvider服务的视图控制 -
app.config(["$stateProvider", function ($stateProvider) { -
$stateProvider -
.state("home", { -
url: '/', -
template:'<div>模板内容......</div>' -
}) -
}]); -
</script> -
</html>
- 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
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
3.嵌套路由的实现
通过url参数的设置实现路由的嵌套（父路由与子路由通过”.“连接就形成了子路由）。嵌套路由可实现多层次的ui-view。
-
<body > -
<div ng-app="myApp" > -
<a ui-sref="parent">点我显示父view内容</a> -
<a ui-sref="parent.child">点我显示父view与子view内容</a> -
<div ui-view></div> <!-- 父View --> -
</div> -
</body> -
<script type="text/javascript"> -
var app = angular.module('myApp', ['ui.router']); -
app.config(["$stateProvider", function ($stateProvider) { -
$stateProvider -
.state("parent", {//父路由 -
url: '/parent', -
template:'<div>parent' -
+'<div ui-view><div>'// 子View -
+'</div>' -
}) -
.state("parent.child", {//子路由 -
url: '/child', -
template:'<div>child</div>' -
}) -
}]); -
</script>
- 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
上面的是相对路径方式：
‘parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/parent/child。
若改成绝对路径方式，则需要在子url里加上^:
-
.state("parent.child", { -
url: '^/child', -
template:'<div>child</div>' -
})
- 1
- 2
- 3
- 4
此时，’parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/child。
4. 通过views实现多视图
多个示图时，使用views属性。该属性里包含了哪些ui-view，则对应的template或templateUrl里的内容就会填充该ui-view。
同一个状态下有多个视图示例：
-
<body > -
<div ng-app="myApp" > -
<a ui-sref="index">点我显示index内容</a> -
<div ui-view="header"></div> -
<div ui-view="nav"></div> -
<div ui-view="body"></div> -
</div> -
</body> -
<script type="text/javascript"> -
var app = angular.module('myApp', ['ui.router']); -
app.config(["$stateProvider", function ($stateProvider) { -
$stateProvider -
.state("index", { -
url: '/index', -
views:{ -
'header':{template:"<div>头部内容</div>"}, -
'nav':{template:"<div>菜单内容</div>"}, -
'body':{template:"<div>展示内容</div>"} -
} -
}) -
}]); -
</script>
- 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
5.ui-view的定位
@的作用 是用来绝对定位view，即说明该ui-view属于哪个模板。如：’header@index’表示名为header的view属于index模板。绝对和相对路径的效果一样，请看如下代码：
-
<body > -
<div ng-app="myApp" > -
<a ui-sref="index">show index</a> -
<a ui-sref="index.content1">content111111</a> -
<a ui-sref="index.content2">content222222</a> -
<div ui-view="index"><div> -
</div> -
</body> -
<script type="text/javascript"> -
var app = angular.module('myApp', ['ui.router']); -
app.config(["$stateProvider", function ($stateProvider) { -
$stateProvider -
.state("index", { -
url: '/index', -
views:{ -
'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"}, -
//这里必须要绝对定位 -
'header@index':{template:"<div>头部内容header</div>"}, -
'nav@index':{template:"<div>菜单内容nav</div>"}, -
'body@index':{template:"<div>展示内容contents</div>"} -
} -
}) -
//绝对定位 -
.state("index.content1", { -
url: '/content1', -
views:{ -
'body@index':{template:"<div>content11111111111111111</div>"} -
//'body@index'表时名为body的view使用index模板 -
} -
}) -
//相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的） -
.state("index.content2", { -
url: '/content2', -
views:{ -
'body':{template:"<div>content2222222222222222222</div>"}// -
} -
}) -
}]); -
</script>
- 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
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
由上面代码可知，相对定位不能找到的ui-view需要用@来绝对定位。
三个问题：
1、ui-sref 和 $state.go 的区别
ui-sref 一般使用在 <a> 标签上；而$state.go一般使用在 controller 里面。
2、$stateParams怎样获取参数？
在目标页面的controller里注入$stateParams，然后 "$stateParams.参数名" 获取传递的参数。
3、UI-ROUTER如何设置？
这里是如何设置一个基本url。
$stateProvider
.state('contacts', {
url:"/contacts",
templateUrl:'contacts.html'
})
当我们访问index.html/contacts时，'contacts'状态将被激活，同时index.html中的ui-view将被'contacts.html'填充。或者，通过transitionTo('contacts')方法将状态转变到'contacts'状态，同时 url 将更新为index.html/contacts。
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；
所有task均是从真实项目中提炼出来的技能点，
强调实战演练+自学优先+师兄辅导的学习方式，
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑
2215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
