标签：color block str bsp 冒号 hid hidden 路由 play
获取参数，在控制中注入$routeParams可以获取传递的参数。获取的参数部分是锚点#后的部分，以冒号为标识。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
font-family: Arial;
}
.wrapper {
width: 980px;
margin: 50px auto;
}
ul {
padding: 0;
margin: 0;
overflow: hidden;
list-style: none;
background-color: #000;
border-radius: 4px;
}
li {
float: left;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 18px;
}
li.active {
background-color: #333;
}
li a {
display: block;
color: #FFF;
text-decoration: none;
}
.content {
margin-top: 30px;
font-size: 24px;
padding: 0 20px;
}
</style>
</head>
<body ng-app="App">
<div class="wrapper">
<!-- 导航菜单 -->
<ul>
<li class="active">
<a href="#/index/5/abc/7">Index</a>
</li>
<li>
<a href="#/introduce">Introduce</a>
</li>
<li>
<a href="#/contact">Contact Us</a>
</li>
</ul>
<!-- 内容 -->
<div class="content">
<!-- 占位符 -->
<div ng-view></div>
</div>
</div>
<!--AngularJS核心框架-->
<script src="angular.min.js"></script>
<!--路由模块(插件)-->
<script src="angular-route.min.js"></script>
<script>
var App = angular.module(‘App‘, [‘ngRoute‘]);// 依赖ngRoute模块
App.config([‘$routeProvider‘, function ($routeProvider) {// 需要对路由模块进行配置，使其正常工作
$routeProvider.when(‘/index/:id/:page/:p‘, {
templateUrl: ‘tp_01.html‘,
controller: ‘IndexController‘
}).otherwise({
redirectTo: ‘/index‘
});
}]);
// 提供了一个专门负责获取参数的一个服务$routeParams
App.controller(‘IndexController‘, [‘$scope‘, ‘$http‘, ‘$routeParams‘, function ($scope, $http, $routeParams) {
$scope.value = ‘index‘;
$scope.color = ‘red‘;
console.log($routeParams);
}]);
</script>
</body>
</html>
模板html：
<p style="background-color:{{color}}">{{value}}</p>
控制台输出结果：
Object {id: "5", page: "abc", p: "7"}
标签：color block str bsp 冒号 hid hidden 路由 play
原文地址：http://www.cnblogs.com/wuqiuxue/p/7762763.html
