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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
layui表格实现代码
May 20 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
从0搭建vue-cli4脚手架
Jun 17 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编程开发“虚拟域名”系统
2006/10/09 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
python正则表达式的使用
2017/06/12 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Python list运算操作代码实例解析
2020/01/20 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
详解Python多线程下的list
2020/07/03 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
介绍一下linux的文件权限
2012/02/15 面试题
大学生求职自我评价
2014/01/16 职场文书
商场消防演习方案
2014/02/12 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
验房委托书
2014/08/30 职场文书
绿色环保倡议书
2015/04/28 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
Tomcat用户管理的优化配置详解
2022/03/31 Servers