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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
前端性能优化及技巧
May 06 Javascript
TypeScript入门-接口
Mar 30 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
vue获取form表单的值示例
Oct 29 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
截获网站title标签之家内容的例子
2006/10/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
Yii框架form表单用法实例
2014/12/04 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python实现web方式logview的方法
2015/08/10 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
接口中的方法可以是abstract的吗
2015/07/23 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
初中科学教学反思
2014/01/21 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Django如何创作一个简单的最小程序
2021/05/12 Python
MySQL 分组查询的优化方法
2021/05/12 MySQL
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python