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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
JS验证字符串功能
2017/02/22 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python requests获取网页常用方法解析
2020/02/20 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
导游的职业规划书范文
2013/12/27 职场文书
高中军训广播稿
2014/01/14 职场文书
学校评语大全
2014/05/06 职场文书
解除劳动合同证明书
2014/09/26 职场文书
电工实训心得体会
2016/01/14 职场文书
建房合同协议书
2016/03/21 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书