Demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<style>
ul li {
float:left;
background-color: pink;
text-align: center;
list-style: none;
}
ul li a {
display: block;
height: 40px;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
.active {
background-color: yellow;
}
.clearfix:after{ /*伪元素清除浮动。父级元素引用clearfix类*/
content:"."; /*可以为空*/
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear:both; /*清除浮动*/
}
.clearfix{ /*兼容ie浏览器*/
zoom:1;
}
</style>
<script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script> <!-- 引入AngularJS框架(1.5.8) -->
<script src="http://cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script> <!-- 引入路由模块 -->
</head>
<body ng-app="App">
<div>
<ul class="clearfix">
<li><a href="#/index/zhangsan/12">index</a></li> <!-- 链接都是锚点。 通过"/"传递参数 -->
<li><a href="#/introduce">introduce</a></li>
<li><a href="#/contact">contact</a></li>
<li><a href="#/list/test?name=zhangsan&age=12">List</a></li> <!-- 通过"?"传递参数 -->
</ul>
<div class='content'>
<div ng-view></div> <!-- 占位符 -->
</div>
</div>
<script>
// 依赖ngRoute模块
var App = angular.module('App',['ngRoute']);
// 配置路由模块
App.config(['$routeProvider',function($routeProvider) {
// AngularJS路由中的锚点一般以"#/"开头
$routeProvider.when('/index/:name/:id',{ //第二个"/"后的内容表示锚点中的参数(:id表示形参)
template: "<h3>Index Pages</h3>", //简单内容可以直接使用template。 用模板替换占位符
controller: 'IndexController' //指定视图的控制器(视图中的数据根据控制器动态生成。控制器可以接收锚点中的参数($routeParams))
}).when('/introduce',{
//template: "<h3>Introduce Pages</h3>"
templateUrl: './xxx.html' //复杂的内容可以用templateUrl。(发送Ajax请求,必须有服务器才生效)
}).when('/contact',{
template: "<h3>Contact Pages</h3>"
}).when('/list/:testID',{
templateUrl: "./list.html", //视图模板
controller: 'ListController' //指定视图的控制器
}).otherwise({
redirectTo: '/index' //其他情况跳转到"/index"
});
}]);
// 锚点中的"/"传递参数时,必须严格匹配对应路由;"?"传递参数不需要严格匹配路由(只匹配"?"前的路由)
// 锚点中可以用"/"和"?"同时传递参数。 "#index/zhangsan/12?sex=男" (路由只匹配"?"前的内容)
// 控制器 $routeParams获取锚点链接中参数的服务(通过"?"和"/"传递的参数都可以接收)
App.controller('IndexController',['$scope','$routeParams',function($scope,$routeParams) {
console.log($routeParams); // Object {name: "zhangsan", id: "12"}
}]);
// 控制器 $routeParams获取锚点链接中参数的服务
App.controller('ListController',['$scope','$routeParams',function($scope,$routeParams) {
console.log($routeParams); // Object {name: "zhangsan", age: "12"}
$scope.items = ['html','css','js']; //模拟获取的动态数据
}]);
</script>
</body>
</html>
