angular之路由，模板

最新推荐文章于 2018-01-02 14:02:39 发布

江湖小迷童

最新推荐文章于 2018-01-02 14:02:39 发布

阅读量3.1k

点赞数

分类专栏： angular.js

本文链接：https://blog.csdn.net/zh_w_h163/article/details/26584095

版权

angular.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做网站的时候，网站的导航始终处于顶端，保持不变，而只改变局部内容。我们可以将不变固定的内容称为“布局模板”，而经常改变内容的那块称为“局部模板”。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页面中的链接要加“#"的原因。