欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-07 10:43:42
本文实例讲述了angularjs实现使用路由切换视图的方法。分享给大家供大家参考，具体如下： 下面是一个简单的学生信息管理实例。 注意：除了引用angular.js之外...

本文实例讲述了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程序设计有所帮助。

上一篇： 解析Lua中的全局环境、包、模块组织结构

下一篇： Angularjs 依赖压缩及自定义过滤器写法

推荐阅读