做网站的时候,网站的导航始终处于顶端,保持不变,而只改变局部内容。我们可以将不变固定的内容称为“布局模板”,而经常改变内容的那块称为“局部模板”。angular通过路由功能轻松实现了这个功能。
1.布局模板index.html
如下所示:首先要的导入angular路由功能的js,注意导入顺序,红色部分为固定不变的部分,而局部模板的内容将显示在带有"ng-view"指令的标签内。
<!doctype html>
<html ng-app="myapp">
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<span style="color:#ff6600;"> <div>XXX学校</div></span>
<div ng-view></div>
</body>
</html>
2.局部模板
list.html
注意:a标签内的链接之前,有“#”,后边会讲解。
<div>
<table>
<tr><td>名称</td><tr>
<tr ng-repeat="item in items">
<td><a href="#/student/view/{{item.id}}">{{item.name}}</a></td>
</tr>
</table>
</div>
detail.html
<div>
id:{{item.id}}<br>
name:{{item.name}}<br>
age:{{item.age}}
</div>
3.核心js的编写
<script type="text/javascript">
function listController($http,$scope){
$http.post('/angular/class.json').success(function(data, status, headers,config){
$scope.items=data.students;
}).error(function(data){
alert("error");
});
}
function detailController($http,$scope,$routeParams){
alert($routeParams.id);//获取参数Id的值
}
function myRoute($routeProvider,$locationProvider){
$routeProvider.when('/student',{
controller:'listController',
templateUrl:'/angular/list.html'
}).when('/student/view/:id',{
controller:'detailController',
templateUrl:'/angular/detail.html'
}).otherwise({redirectTo:'/student'});
}
var module=angular.module('myapp',['ngRoute']);
module.config(myRoute);
</script>
当请求index.html时,局部模板会默认请求list.html,请求地址为:localhost:8080/demo/index.html#/student,这也是为什么list.html页面中的链接要加“#"的原因。