AngularJS实现使用路由切换视图的方法

本文实例讲述了AngularJS实现使用路由切换视图的方法。分享给大家供大家参考，具体如下：
下面是一个简单的学生信息管理实例。
注意：除了引用angular.js之外，还要引用angular-route.js。
1、创建index.html主视图
在index.html主视图中，我们将会把多个视图共有的东西都放在里面，例如菜单。在这个例子中，我们仅仅把应用的标题放在里面，然后再用ng-view指令来告诉Angular把视图显示在哪儿。

<！DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ng-app="StuApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>学生信息</title><script src="/Scripts/angular.min.js"></script><script src="/Scripts/angular-route.min.js"></script><script src="controllers.js"></script></head><body><h1>学生信息</h1><div ng-view></div></body></html>

2、创建list.html列表视图

<table><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr><tr ng-repeat="student in StudentList"><td>{{student.id}}</td><td><a ng-href="#/view/{{student.id}}">{{student.name}}</a></td><td>{{student.sex}}</td><td>{{student.age}}</td></tr></table>

3、创建detail.html详细视图

<div><div><strong>学号：</strong>{{Student.id}}</div><div><strong>姓名：</strong>{{Student.name}}</div><div><strong>性别：</strong>{{Student.sex}}</div><div><strong>年龄：</strong>{{Student.age}}</div><a href="#/">返回</a></div>

4、创建controllers.js控制器脚本

//创建模块var StuServices = angular.module（"StuApp", ["ngRoute"]）;//在URL、模板和控制器之前建立映射关系function StuRouteConfig（$routeProvider） {$routeProvider.when（"/", {controller: "ListController",templateUrl: "list.html"}）.when（"/view/:id", {controller: "DetailController",templateUrl: "detail.html"}）.otherwise（{ redirectTo: "/" }）;}//配置路由，以便学生服务能够找到它StuServices.config（StuRouteConfig）;//一些虚拟的学生信息StudentList = [{ id: 0, name: "张三", sex: "男", age: 18 },{ id: 1, name: "李四", sex: "女", age: 15 },{ id: 2, name: "王五", sex: "男", age: 16 }];//列表模板StuServices.controller（"ListController", function （$scope） {$scope.StudentList = StudentList;}）//详细模块：从路由信息（从URL中解析出来的）中获取邮件id,然后用它找到正确的邮件对象StuServices.controller（"DetailController", function （$scope, $routeParams） {$scope.Student = StudentList[$routeParams.id];}）

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。