189 8069 5689

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

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

目前创新互联已为上1000家的企业提供了网站建设、域名、虚拟空间、网站托管运营、企业网站设计、四川网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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

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

1、创建index.html主视图

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




  
  学生信息
  
  
  


  
学生信息

2、创建list.html列表视图


  

    学号
    姓名
    性别
    年龄
  

  

    {{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实现使用路由切换视图的方法
标题网址：http://cdxtjz.cn/article/jpgipg.html

其他资讯