Angular路由

Angular路由

ngRouter

语法

1
2
3
4
5
6
7
8
9
10
11
12
模块对象.config(function($routeProvider){
// $routeProvider 配置路由的对象 想象成 保安大爷
$routeProvider.when('锚点值',{
templateUrl:''
})
<div ng-view></div>
angular会在页面中查找拥有ng-view指令的元素 并且将获取过来的内容放到这个元素里面
})
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
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl:'./tpl/index.html',
//template:'<div>首页</div>',
controller:'indexCtrl'
})
.when('/list',{
templateUrl:'./tpl/list.html',
//template:'<div>列表页</div>',
controller:'listCtrl'
})
})
myApp.controller('indexCtrl',function($scope){
$scope.msg = "我是首页的内容";
})
myApp.controller('listCtrl',function($scope){
$scope.msg = "我是列表页的内容";
})

路由传参

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<ul>
<li>
<a href="#!/article/1/我是第1篇文章">我是第1篇文章</a>
</li>
<li>
<a href="#!/article/2/我是第2篇文章">我是第2篇文章</a>
</li>
<li>
<a href="#!/article/3/{a:1,b:2}">我是第3篇文章</a>
</li> // 跳转的页面写上实际参数
</ul>
/*
1.向被传参页面的路由中写 参数占位符
2.在跳转链接中将实际参数 写上
3.在被传参页面的控制器中获取 传递过来的参数
*/
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl:'./tpl/index.html',
controller:'indexCtrl'
})
.when('/list',{
templateUrl:'./tpl/list.html',
controller:'listCtrl'
})
.when('/article/:id/:title',{ // 参数占位符
templateUrl:'./tpl/article.html',
controller:'articleCtrl'
})
})
myApp.controller('indexCtrl',function($scope){
})
myApp.controller('listCtrl',function($scope){
})
myApp.controller('articleCtrl',function($scope,$routeParams){
// $routeParams 对象类型 里面存储的是 当前路由的参数
// console.log($routeParams.id)
// console.log($routeParams['id'])
console.log( $routeParams )
$scope.id = $routeParams.id;
})

ui-router

语法

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body ng-app="myApp">
<!--
在A标签中可以直接以#!/的形式书写 但是不建议
-->
<a href="#!/index">首页</a>
<a href="#!/list">列表页</a>
<br/>
<!--
在ui-router中 提供了一个ui-sref指令
将路由的name值填在这里即可
ui-router会自动查找name至对应的锚点链接
并生成对应的链接地址
-->
<a ui-sref="index">首页</a>
<a ui-sref="list">列表页</a>
<div ui-view></div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.min.js"></script>
<script>
/*
路由模块的名字是ui.router 把这个名字作为主模块的依赖模块
*/
angular.module('myApp',['ui.router'])
/*
ui-router中提供了一个$stateProvider对象,用来配置路由
state方法负责具体的配置
参数以对象的形式存在
name:当前路由的名字(状态)
url:当前路由的url锚点值
template:当前路由的模板
这里也有templateUrl属性 和ngRoute中的意思一样
*/
.config(['$stateProvider',function($stateProvider){
$stateProvider
.state({
name:'index',
url:'/index',
template:'<div>首页</div>'
})
.state({
name:'list',
url:'/list',
template:'<div>列表页</div>'
})
}])
</script>
</body>

ui-router传参

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<body ng-app="myApp">
<!--
在路由名字的后面加上一个小括号 -> 类似于函数小括号
在小括号中写一个对象 并把参数写在对象中 -> 类似于给函数传递了一个对象类型的值
-->
<a ui-sref="index">首页</a>
<a ui-sref="list({pagenumber:1,pagesize:10})">列表页</a>
<div ui-view></div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.min.js"></script>
<script>
angular.module('myApp',['ui.router'])
.config(['$stateProvider',function($stateProvider){
$stateProvider
.state({
name:'index',
url:'/index',
template:'<div>首页</div>'
})
.state({
name:'list',
// 路由配置中参数的配置和ngRoute一样
url:'/list/:pagesize/:pagenumber',
template:'<div>列表页</div>',
controller:'listCtrl'
})
}])
.controller('listCtrl',['$stateParams',function($stateParams){
/*
在获取的参数的时候 ui-router提供了一个 $stateParams 对象
*/
}])
</script>
</body>
angular.module("uiRouter", ["ui.router"])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state({
url: "/index",
name: "index",
templateUrl: "indexTpl",
// controller: ""
})
.state({
url: "/list",
name: "list",
templateUrl: "listTpl",
// abstract:true,
// controller: "listCtrl"
})
.state({
url: "/article/:id",
name: "article",
// params:{id:1}, params可以传参
templateUrl: "articleTpl",
controller: "articleCtrl"
})
$urlRouterProvider.otherwise('article');
})
.controller("articleCtrl",["$scope","$stateParams",function($scope,$stateParams){
console.log($stateParams)
}])
</script>
<script type="text/ng-template" id="indexTpl">
<span>我是首页</span>
</script>
<script type="text/ng-template" id="listTpl"> templateUrl可以是模板id
<a ui-sref="article({id:2})">跳转详情</a> 模板中可以传参
<!-- 我是列表 -->
</script>
<script type="text/ng-template" id="articleTpl">
<ul>
<li>文章</li>
<li>而已</li>
</ul>
</script>

ui-router 多view用法

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
43
44
45
46
47
48
49
50
51
52
53
54
<body ng-app="myApp">
<a ui-sref="index">首页</a>
<a ui-sref="list">列表页</a>
<!--
在ui-router中可以存在多个 ui-view
为了区分 可以给每个ui-view起一个不同的名字
-->
<div ui-view="view-a"></div>
<div ui-view="view-b"></div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.min.js"></script>
<script>
angular.module('myApp',['ui.router'])
.config(['$stateProvider',function($stateProvider){
/*
当页面中有多个ui-view时,在路由配置中可以使用views属性配置
views属性的值是对象的形式,属性名是view的名字,其值又是一个对象
是当前view的具体配置 比如templateUrl controller等等
*/
$stateProvider
.state({
name:'index',
url:'/index',
views:{
'view-a':{
template:'<div>首页a</div>'
},
'view-b':{
template:'<div>首页b</div>'
}
}
})
.state({
name:'list',
url:'/list',
views:{
'view-a':{
template:'<div>列表页A</div>'
},
'view-b':{
template:'<div>列表页B</div>'
}
}
})
}])
</script>
</body>

ui-router路由嵌套

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
43
44
45
46
47
<body ng-app="myApp">
<!-- html入口文件的ui-view -->
<div ui-view></div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.min.js"></script>
<script>
angular.module('myApp',['ui.router'])
.config(['$stateProvider',function($stateProvider){
$stateProvider
.state({
url:'/tab',
name:'tab',
// 此参数代表当前路由需要和其他路由配合使用
// 不能单独使用
// 当前模板会被插入到html入口文件中的ui-view指令所在标签
abstract:true,
template:'<a ui-sref="tab.index">首页</a>\
<a ui-sref="tab.list">列表页</a>\
<a ui-sref="article">文章页</a>\
<div ui-view></div>' // tab模板中的ui-view 和当前路由配合使用的路由模板被插入到这里
})
.state({
url:'/index',
// tab.index表示当前路由需要和tab路由配合使用
// 当前路由的模板被插入到tab模板中的ui-view指令所在标签
name:'tab.index',
template:'<div>首页</div>'
})
.state({
url:'/list',
// tab.list表示当前路由需要和tab路由配合使用
// 当前路由的模板被插入到tab模板中的ui-view指令所在标签
name:'tab.list',
template:'<div>列表页</div>'
})
.state({
url:'/article',
// 当前路由可以独立使用
// 模板被插入到html入口文件中的ui-view指令所在标签
name:'article',
template:'<div>列表页</div>'
})
}])
</script>
</body>

ui-router $urlRouterProvider

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
<body ng-app="myApp">
<a ui-sref="index">首页</a>
<a ui-sref="list">列表页</a>
<div ui-view></div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.min.js"></script>
<script>
angular.module('myApp',['ui.router'])
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
.state({
name:'index',
url:'/index',
template:'<div>首页</div>'
})
.state({
name:'list',
url:'/list',
template:'<div>列表页</div>'
})
// 当以上路由都不能匹配的时候 跳转到index页面
$urlRouterProvider.otherwise('index');
}])
</script>
</body>