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 相关文章推荐
javascript Keycode对照表
Oct 24 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
实例详解Node.js 函数
Jun 10 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
js作用域及作用域链工作引擎
Jul 07 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重定向的三种方法分享
2012/02/22 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Django的session中对于用户验证的支持
2015/07/23 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python mock测试的示例
2020/10/19 Python
德国网上药房:Apotal
2017/04/04 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
基督教婚礼主持词
2014/03/14 职场文书
督导岗位职责
2015/02/04 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
组织委员竞选稿
2015/11/21 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书