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


Posted in Javascript onJanuary 24, 2017

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

Javascript 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
javascript 正则表达式去空行方法
Jan 24 #Javascript
JavaScript中动态向表格添加数据
Jan 24 #Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 #Javascript
ajax分页效果(bootstrap模态框)
Jan 23 #Javascript
jquery easyui DataGrid简单示例
Jan 23 #Javascript
浅谈javascript的闭包
Jan 23 #Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 #Javascript
You might like
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
preg_match_all使用心得分享
2014/01/31 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
通过Pandas读取大文件的实例
2018/06/07 Python
pandas带有重复索引操作方法
2018/06/08 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python 实现简单的FTP程序
2019/12/27 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python接口自动化测试的实现
2020/08/28 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
行政文员岗位职责
2013/11/08 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
质量安全标语
2014/06/07 职场文书
中职生自荐信范文
2014/06/15 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL