AngularJS入门教程之路由机制ngRoute实例分析


Posted in Javascript onDecember 13, 2016

本文实例讲述了AngularJS路由机制ngRoute。分享给大家供大家参考,具体如下:

引言

在我们介绍路由之前我们首先谈一下SPA,所以SPA就是我们现在经常说的单页应用single page APP,为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中,但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效,为了解决这个问题我们通常使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也有人把这叫pjax技术。基本流程如下:

AngularJS入门教程之路由机制ngRoute实例分析

如此一来,便形成了通过地址栏进行导航的深度链接(deeplinking ),也就是我们所需要的路由机制。通过路由机制,一个单页应用的各个视图就可以很好的组织起来了。

ng-route包含的内容

ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块,包含以下内容:

•服务$routeProvider用来定义一个路由表,即地址栏与视图模板的映射

•服务$routeParams保存了地址栏中的参数,例如{id : 1, name : 'tom'}

•服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录

•服务$route完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller

•指令ngView用来在主视图中指定加载子视图的区域

路由机制的实现

第一步、引入两个依赖文件

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

因为路由机制上一个单独的模块,所以我们需要单独的引入路由文件,仅仅引入AngularJS.min.js是不包含路由的,引入文件以后我们还需要在模块声明中注入对ng-route的依赖:

var app = angular.module("myApp", ['ngRoute']);

完成了这些,我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。

第二步:完成路由表的配置

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/div1', {
        template: '<p>这是div1{{text}}</p>',
        controller: 'div1Controller'
      })
      .when('/div2', {
        template: '<p>这是div2{{text}}</p>',
          controller: 'div2Controller'
      })
      .when('/div3', {
        template: '<p>这是div3{{text}}</p>',
        controller: 'div3Controller'
      })
      .when('/content/:id', {
        template: '<p>这是content{{id}}</p>',
        controller: 'div4Controller'
      })
      .otherwise({
        redirectTo: '/div1'
      });
}]);

$routeProvider提供了定义路由表的服务,它有两个核心方法,when(path,route)和otherwise(params),先看一下核心中的核心when(path,route)方法。

when(path,route)方法接收两个参数,path是一个string类型,表示该条路由规则所匹配的路径,它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数,可以在path中使用冒号加名称的方式,如:path为/show/:name,如果地址栏是/show/tom,那么参数name和所对应的值tom便会被保存在$routeParams中,像这样:

{name : tom}。我们也可以用*进行模糊匹配,如:/show*/:name将匹配/showInfo/tom。

参数说明如下:

controller //function或string类型。在当前模板上执行的controller函数,生成新的scope
controllerAs //string类型,为controller指定别名
template //string或function类型,视图所用的模板,这部分内容将被ngView引用
templateUrl //string或function类型,当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用
resolve //指定当前controller所依赖的其他模块
redirectTo //重定向的地址

第三步:在主视图模板中指定加载子视图的位置

我们的单页面程序都是局部刷新的,那这个“局部”是哪里呢,这就轮到ngView出马了,只需在模板中简单的使用此指令,在哪里用,哪里就是“局部”。

通过以上我们就完成了了一个路由的全部配置过程,在没有接触路由的时候感觉路由这一块是比价难的,但是当我们真正的了解到这一块的原理的时候并不是非常的难,路由在AngularJS中是核心部分所以我们需要牢牢的掌握这一部分。

友情推荐:

看到这可能会有人说如果有个完整的Ddeo就好了,所以说小编给大家推荐一个编写前台代码的工具RunJS并且可以实现代码的共享,小编的这个Demo就在这上面,可在此处查看效果;http://sandbox.runjs.cn/show/gj894e3t#/content/13

此处查看源码:
http://runjs.cn/code/gj894e3t

这样以后我们就可以随意的分享代码,尤其是我们在讲课的时候非常的方便!

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
原生js实现简单轮播图
Oct 26 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 #Javascript
浅析Jquery操作select
Dec 13 #Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 #Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 #Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 #Javascript
JS实现图片垂直居中显示小结
Dec 13 #Javascript
Javascript this 函数深入详解
Dec 13 #Javascript
You might like
php 全文搜索和替换的实现代码
2008/07/29 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
自我评价范文分享
2014/01/04 职场文书
电气工程师岗位职责
2015/02/12 职场文书
学生退学证明
2015/06/23 职场文书
八年级作文之友情
2019/11/25 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技