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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
js 函数的副作用分析
Aug 23 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
让table变成exls的示例代码
Mar 24 Javascript
js中unicode转码方法详解
Oct 09 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
JavaScript动态生成表格的示例
Nov 02 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
轻松修复Discuz!数据库
2008/05/03 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
joomla组件开发入门教程
2016/05/04 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
理解javascript闭包
2015/12/15 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
解决pip install psycopg2出错问题
2020/07/09 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
中专生的个人自我评价
2013/12/11 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
大学生自我鉴定书
2014/03/24 职场文书
关于建议书的格式范文
2014/05/20 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
大一学生个人总结
2015/02/15 职场文书
叶问观后感
2015/06/15 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书