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下高性能字符串连接StringBuffer类
Aug 16 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
微信小程序实现聊天室功能
Jun 14 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获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python的socket编程入门
2018/01/29 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python 的topk算法实例
2020/04/02 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
岗位职责怎么写
2014/03/14 职场文书
党风廉设责任书
2014/04/16 职场文书
青年志愿者活动感想
2015/08/07 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS