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

  
  
  
  
  


  
学生信息
  

  

    
学号
    
姓名
    
性别
    
年龄
  
  

    
{{student.id}}
    
{{student.name}}
    
{{student.sex}}
    
{{student.age}}
  

  
学号：{{Student.id}}
  
姓名：{{Student.name}}
  
性别：{{Student.sex}}
  
年龄：{{Student.age}}
  返回

//创建模块
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];
})