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

这篇文章主要介绍了AngularJS实现使用路由切换视图的方法,结合学生信息管理系统为例分析了使用controllers.js控制器来切换视图的具体步骤与相关操作技巧,需要的朋友可以参考下

本文实例讲述了AngularJS实现使用路由切换视图的方法。分享给大家供大家参考，具体如下：

下面是一个简单的学生信息管理实例。

注意：除了引用angular.js之外，还要引用angular-route.js。

1、创建index.html主视图

在index.html主视图中，我们将会把多个视图共有的东西都放在里面，例如菜单。在这个例子中，我们仅仅把应用的标题放在里面，然后再用ng-view指令来告诉Angular把视图显示在哪儿。

   学生信息 学生信息

2、创建list.html列表视图

   学号 姓名 性别 年龄
 {{student.id}} {{student.name}} {{student.sex}} {{student.age}}

学号	姓名	性别	年龄
{{student.id}}	{{student.name}}	{{student.sex}}	{{student.age}}

3、创建detail.html详细视图

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

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程序设计有所帮助。

以上就是AngularJS实现使用路由切换视图的方法的详细内容，更多请关注易知道|edz.cc其它相关文章！