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代码加载优化方法
Jan 30 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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中取得image按钮传递的name值
2006/10/09 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
js获取视频时长代码
2014/04/10 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python求众数问题实例
2014/09/26 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
优秀教师事迹材料
2014/12/15 职场文书
护士自荐信范文
2015/03/25 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android