正文
Angular——路由参数
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
基本介绍
在控制中注入$routeParams可以获取传递的参数
区别对比
angular中的路由是指#之后的内容，包括之后的？，而在之前的http地址中我们习惯性的将？放在前面
具体使用
1、形参
#/index/:id==>#/index/5
2、具体的值
#/index/page==>#/index/page
3、地址中？后的参数
#/index？name=wqx
在angular中在控制中注入$routeParams可以获取传递的参数
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .clearfix:after {
content: '';
display: block;
visibility: hidden;
clear: both;
} .wrap {
width: 600px;
margin: 30px auto;
} ul {
list-style: none;
border: 1px solid black;
border-bottom: none;
} li {
width: 199px;
height: 30px;
line-height: 30px;
float: left;
/*margin-left: -2px;*/
text-align: center;
position: relative;
} li a {
text-decoration: none;
color: black;
} li:after {
content: '';
display: block;
position: absolute;
width: 1px;
height: 16px;
border-right: 1px solid black;
top: 7px;
right: 0px;
} li:last-child:after {
border: none;
} .wrap .main {
height: 400px;
border: 1px solid #000;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="clearfix">
<li><a href="#/index1?name=wqx">index1</a></li>
<li><a href="#/index2/5">index2</a></li>
<li><a href="#/index3/5/page?name=wqx">index3</a></li>
</ul>
<div class="main">
<div ng-view=""></div>
</div>
</div>
<script src="../libs/angular.min.js"></script>
<script src="../libs/angular-route.js"></script>
<script>
//之前路由模块也是处于核心模块之中,后来独立出去了
//对路由模块的使用主要是进行config配置，配置完成之后即可使用
var App = angular.module('App', ['ngRoute']);
App.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/index1', {
template: '<h1>index1</h1>',
controller:'Demo1Controller'
}).when('/index2/:id', {
template: '<h1>index2</h1>',
controller:'Demo2Controller'
}).when('/index3/:id/page/', {
template: '<h1>index3</h1>',
controller:'Demo3Controller'
}).otherwise({
redirectTo: '/index1'
})
}]);
App.controller('Demo1Controller',['$routeParams',function ($routeParams) {
console.log($routeParams);
}]);
App.controller('Demo2Controller',['$routeParams',function ($routeParams) {
console.log($routeParams);
}]);
App.controller('Demo3Controller',['$routeParams',function ($routeParams) {
console.log($routeParams);
}]);
</script>
</body>
</html>
