前言

AngularJS路由主要有内置的ngRoute和一个基于ngRoute开发的第三方路由模块ui-router,内置的ngRoute有时满足开发需求,使用ui-router可以解决很多原生ngRoute的不足。 
AngularJS的路由实际上是一种纯前端的解决方案,它的本质是:当请求一个url时,根据路由配置这个url,然后再请求模板片段,并插入到ng-view中。AngularJS的路由更倾向于通过改变url进行页面的局部刷新。

 

一 ngRoute

使用ngRoute需要额外加载这个模块文件,如:

<script src="../angular/angular.js"></script>
<script src="../angular-route/angular-route.js"></script>

同时还需要在模块声明中注入对ngRoute的依赖:

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

使用ngRoute包含以下几个内容:

名称 所属 使用
ngView directive 提供不同路由模板插入的视图层
$routeProvider provider 提供路由配置
$route service 用于构建各个路由的url,view,controller的关系
$routeParams service 解析返回路由中带有的参数

$routeProvider提供了定义路由表的服务,有两个核心方法: 
1. when(path,route) 
path: string类型,表示该条路由规则所匹配的路径。 
注意: 如果路径中需要匹配参数,如path路径是:/show/:name,如果地址栏为:/show/lydia,那么这里的name以及所对应的值lydia都会保存在$routeParams服务中,需要通过$routeParams.name来获取。 
route: object类型,用来指定一系列配置项。

配置 说明
controller 控制器名称
controllerAs 给控制器起个别名
template 对应路径的页面模板,会出现在ng-view处
templateUrl 对应模板的路径
resolve 该属性会以键值对对象的形式,给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用,注入到控制器中。如果resolve中是一个promise对象,那么会等它执行成功后,才注入到控制器中,此时控制器会等待resolve中的执行结果。
redirectTo 重定向地址
reloadOnSearch 设置是否在只有地址改变时,才加载对应的模板。search和params改变都不会加载模板。默认为true,当$location.search()发生变化时会重新加载路由。
caseInsensitiveMatch 路径区分大小写

2.otherwise(params) 
对应了路径匹配不到时的情况。

使用方法

第一步:添加页面 
html页面,哪里需要局部刷新,哪里就用ng-view:

<body ng-app="routeApp">
<div ng-view></div> <script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>

第二步:controller添加路由配置

var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/route/list.html',
controller: 'RouteListCtl'
})
.when('/list/:id', {
templateUrl: 'views/route/detail.html',
controller: 'RouteDetailCtl'
})
.otherwise({
redirectTo: '/list'
});
}]);

再添加两个controller

routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.id;
});

上面这个例子只是简单的例举一下带参数和不带参数的url的路由配置和获取方法,具体的html页面和结果就不展示了。

resolve的用法

$routeProvider的第二个参数是路由的一些具体配置项目,这里有一个比较重要的配置,即resolve。配置resolve意味着在进入这个路由之前必须等待resolve中的数据返回,也就是说,在跳转目标路由之前先做一些额外工作去预加载数据,只有当数据准备妥当之后,才会去载入目标路由的模板和执行相应的controller。

$routeProvider
.when("/news", {
templateUrl: "newsView.html",
controller: "newsController",
resolve: {
message: function(messageService){
return messageService.getMessage();
}
}
})

在上例中,只有message有值的情况下才会去加载html页面和js。 
在路由跳转之前,会触发resolve下的所有promise,只有当所有的promise都被正确的resolve之后才会进行路由切换,此时$route会抛出$routeChangeSuccess的事件,如果没有被正确的resolve,那么$route会抛出$routeChangeError的事件,并且终止路由切换。

二 ui-router

ui-router相比ngRoute的优势在于,一个页面可以嵌套多个视图,,创建嵌套分层的视图,多个视图去控制某一个视图等。 
安装:

npm install angular-ui-router --save

同时在项目中引入:

<script type="text/javascript" src="app/bower_components/angular-ui-router/release/angular-ui-router.js"></script>

对应的controller中引入ui-router的依赖:

angular.module('myApp', ['ui.router']);

ui-router包含的内容与ngRoute很像,可以进行一下类比:

ngRoute ui-router
ng-view ui-view
$routeProvider $stateProvider
$routeParams $stateParams
$route $state

1.$state配置参数

参数 说明
url 默认相对路径(以^开头的是绝对路径)
views views里的每个子视图可以包含自己的模板、控制器和预载入数据
abstract 抽象模板不能被激活
template HTML字符串或者返回HTML字符串的函数

举个例子: 
html页面:

<body>
<div>
<div ui-view="filters"></div>
<div ui-view="mailbox"></div>
<div ui-view="priority"></div>
</div>
</body>

js:

angular.module('myApp').config(['$stateProvider',function($stateProvider) {
$stateProvider
.state('report',{
views: {
'filters': {
template: '<h4>Filter inbox</h4>',
controller: function($scope) {}
},
'mailbox': {
templateUrl: 'partials/mailbox.html'
},
'priority': {
template: '<h4>Priority inbox</h4>',
resolve: {
facebook: function() {
return FB.messages();
}
}
}
}
}).state('blog',{
url:'/blog',
views:{
'container':{templateUrl:'templates/blog/layout.html'}
}
})

abstract抽象模板 
抽象模板不能被激活,但是它的子模板可以被激活。抽象模板通常用于提供一个包括了很多视图的模板,它可以传递$scope作用域给子模板,也可以在同一个url下传递自定义数据或预加载的依赖。如:

$stateProvider
.state('admin', {
abstract: true,
url: '/admin',
template: '<div ui-view></div>'
})
.state('admin.index', {
url: '/index',
template: '<h3>Admin index</h3>'
})
.state('admin.users', {
url: '/users',
template: '<ul>...</ul>'
});

2.$stateParams 
使用$stateparams来提取在url中的不同参数。 
如果一个url是这样的:

'/inbox/:inboxId/messages/{sorted}?from&to'

当用户访问时,请求的url是这样的:

'/inbox/123/messages/ascending?from=10&to=20'

那么$stateParams对象的值为:

{inboxId: '123', sorted: 'ascending', from: 10, to: 20}

3.$urlRouterProvider 
$urlRouterProvider和ngRoute一样,有when()和otherwise()两种用法,除此之外,还有rule()方法,可以越过任何url的匹配或者在其他路由前做路由修改,函数返回一个有效的路径的字符串。

app.config(function($urlRouterProvider){
// 忽略url的大小写
$urlRouterProvider.rule(function ($injector, $location) {
var path = $location.path(), normalized = path.toLowerCase();
if (path != normalized)
return normalized;
});
})

路由的匹配方式

url:"/user/:id"
url:"/user/{id}"

上面的这两个写法是一样的。

// 只会匹配 contactId 为1到8位的数字
url: "/contacts/{contactId:[0-9]{1,8}}"

可以通过?来指定参数作为查询参数,如:

url: "/contacts?myParam"     //匹配 "/contacts?myParam=value"

url: "/contacts?myParam1&myParam2"
// 匹配 "/contacts?myParam1=value1&myParam2=wowcool"

angularjs 路由机制的更多相关文章

  1. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  2. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  3. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  4. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  5. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  6. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  7. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  8. AngularJS路由系列(1)--基本路由配置

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...

  9. angularJs路由的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 多GPU计算

    多GPU计算已经可以说,只要是个成熟的模型,都使用了这一点. 例如: gluoncv:https://github.com/dmlc/gluon-cv/blob/master/scripts/dete ...

  2. luogu P2742 【模板】二维凸包

    嘟嘟嘟 没错,我开始学凸包了. 其实挺简单的. 前置技能: 1.极坐标系 2.向量叉积 1.极坐标系 就是一种二维坐标系.只不过两个坐标分别表示向量和极轴的角度和自身的长度.对于不同的问题,极轴可以自 ...

  3. Odoo中的onchange

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9280723.html  [onchange=前端js函数,可以实现前端实时更新以及修改验证] onchange ...

  4. (转)ci

    1  从代码管理器签出源文件 2  修改代码 3  编译代码 4  遇到错误,转到2继续修改直到达到预期 5  运行单元测试,期望所有的测试绿色(通过) 6  单元测试出错,转入2 7  重构代码,按 ...

  5. 2.4G电动车防盗方案 超低功耗单发器 SI24R2F

           对于现在的电动车防盗标签和校园卡的市场,主要以2.4G为主做标签,各色各样的2.4G国产芯片渐渐的能满足这块RFID领域.但是作为RFID的推动领导者,深圳市动能世纪科技有限公司专注于超 ...

  6. PAT——1039. 到底买不买

    小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要的珠子?如果是,那么告诉她有多少多余的珠子 ...

  7. 【Dubbo源码阅读系列】服务暴露之本地暴露

    在上一篇文章中我们介绍 Dubbo 自定义标签解析相关内容,其中我们自定义的 XML 标签 <dubbo:service /> 会被解析为 ServiceBean 对象(传送门:Dubbo ...

  8. Vcenter虚拟化三部曲----SQL Server 2008 R2 数据库安装

    操作系统    Windows server 2008 R2 数据库      SQL Server 2008 R2 注意:SQL Server 2008 R2需要操作系统首先安装.NET Frame ...

  9. 多种移动平均计算总结(MA,EMA,SMA,DMA,TMA,WMA)

    多种移动平均计算总结 股票期货里面经常会遇到这些公式,通达信,同花顺,文华,基本都有.作为一个程序员觉得网上比较的思路不清晰,在此做个总结,一目了然. 一.函数简介 MA(x,n)-移动平均,是最简单 ...

  10. Redis 之武林大会 - 哨兵(Sentinel)

    前言 Redis在出从复制的模式下,一旦主节点由于故障不能提供服务,需要人工降从节点晋升为主节点,同时还要通知应用方更新主节点的地址,在很多应用场景下,这样的故障处理方式是无法被接受的.不过幸运的是R ...