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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
详解JS ES6编码规范
May 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
初识Laravel
2014/10/30 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
酒店中秋节促销方案
2014/01/30 职场文书
会计学自荐信
2014/06/03 职场文书
老公保证书怎么写
2015/02/26 职场文书