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中的函数
Jan 22 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
实例解析php的数据类型
2018/10/24 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
JS功能代码集锦
2016/05/04 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
pygame实现打字游戏
2021/02/19 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
信用卡催款律师函
2015/05/27 职场文书
监护人证明
2015/06/19 职场文书
运动会通讯稿100字
2015/07/20 职场文书
运动会班级前导词
2015/07/20 职场文书
素质教育培训心得体会
2016/01/19 职场文书