ngRoute 和 ui.router 的使用方法和区别

发布时间：2020-12-17 09:34:15 所属栏目：安全来源：网络整理

导读：在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的。本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍，并做一个对比。 ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.r

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的。本文主要对 AngularJS 原生的ngRoute路由模块和第三方路由模块ui.router的用法进行简单介绍，并做一个对比。

ngRoute

使用方法

1) 引入angular-routelib

无论是ngRoute还是ui.router，作为框架额外的附加功能，都必须以模块依赖的形式被引入。

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

2) 配置路由

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

app.config(function($routeProvider){
    $routeProvider
        .when('/Main',{
            templateUrl: "main.html",controller: 'MainCtrl'
        })
        .otherwise({ redirectTo: '/tabs' });

服务与指令

ngRoute路由模块名

$routeProvider服务提供者，用来定义一个路由表，即地址栏与视图模板的映射，对应于ui.router中的urlRouterProvider和stateProvider

$route服务，完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的 Controller，对应于下面的$urlRouter和$state
$routeParams服务，保存了地址栏中的参数，对应于下面的$stateParams

ng-view指令，用来在主视图中指定加载子视图的区域，对应于下面的ui-view

ui.router

使用方法

1) 引入angular-ui-routerlib

<script src="lib/angular-ui-router.min.js"></script>

2) 配置路由

var app = angular.module("uiRouteApp",["ui.router"]);

app.config(function($urlRouterProvider,$stateProvider) {
	$urlRouterProvider.otherwise("/index");
	$stateProvider
		.state("Main",{
			url: "/main",templateUrl: "main.html",controller: 'MainCtrl'
		})

服务与指令

ui.router路由模块名

$urlRouterProvider服务提供者，用来配置路由重定向
$stateProvider服务提供者，用来配置路由

$urlRouter服务
$state服务，用来显示当前路由状态信息，以及一些路由方法（如：跳转）
$stateParams服务，用来存储路由匹配时的参数

ui-view指令，路由模板渲染，对应的 dom 相关联
ui-sref指令，链接到特定状态

路由的创建

基本配置

调用$stateProvider.state(...)方法，并可配置以下参数

$stateProvider
    .state("Main",{
        url: "/main",templateUrl: 'main.html',controller: 'MainCtrl',})

parent

有两种方式可以指定父子状态关系。

一种是，使用点标记法，像本文最后嵌套视图部分举得栗子那样：

1	.state("tabs.tab1",{})

另一种是，使用parent属性

.state("tab1",{
    parent: 'tabs'  // 也可是一个状态对象， parent: tabs
})

abstract

使用abstract可以为所有的子状态提供一个基URL，这样做的好处就是可以在抽象出来的这个状态所对应的html页面中来定义静态资源。抽象模板不能被激活。

$stateProvider
    .state('contacts',{
        abstract: true,url: '/contacts',templateUrl: 'contacts.html',})
    .state('contacts.list',{
        url: '/list',templateUrl: 'contacts.list.html'
    })

resolve

resolve在state配置参数中，是一个对象(key-value)，每一个value都是一个可以依赖注入的函数，并且返回的是一个promise(当然也可以是值)。

resolve: {
    'myResolve': ['contacts',function(contacts){
            return contacts.all();
     }]
 }

这样做的目的：

简化了controller的操作，将数据的获取放在resolve中进行，这在多个视图多个controller需要相同数据时，有一定的作用。
只有当reslove中的promise全部resolved(即数据获取成功)后，才会触发$stateChangeSuccess切换路由，进而实例化controller，然后更新模板。

更多参数可参考angular 系列八 ui-router详细介绍及ngRoute工具区别中 state 参数的讲解。

路由控制

url动态部分被称为参数，有以下几种方式设置

1）使用花括号的方式可以设置一个正则表达式规则的参数：

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

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

//比如匹配 href="/page?type='new'"
url: "/page?type"

如果需要不止一个查询参数，用&分隔：

//比如匹配 ui-sref="page({type:'all',title:'test ui-router'})"
url: "/page?type&title"

路由的查找匹配

angular在刚开始的$digest时，$rootScope会触发$locationChangeSuccess事件（angular在每次浏览器hashchange 的时候也会触发$locationChangeSuccess事件）
ui.router监听了$locationChangeSuccess事件，于是开始通过遍历一系列rules，进行路由查找匹配列表项
当匹配到路由后，就通过$state.transitionTo(state,...)，跳转激活对应的state
最后，完成数据请求和模板的渲染

在视图中，建议使用ui-sref="xxxState"而不是href="#/abc"，这样做能减少一遍rules循环的遍历，提升性能。

两者区别

ngRoute模块是 Angular 自带的路由模块，而ui.router模块是基于ngRoute模块开发的第三方模块。

ui.router是基于state(状态)的，ngRoute是基于url的，ui.router模块具有更强大的功能，主要体现在视图的嵌套方面。

嵌套视图

页面某个动态变化区块中，嵌套着另一个可以动态变化的区块。

前面的栗子就是一个很好的业务场景。

在首页中包含一个动态区块：

<body ng-app="ngRouteApp">
    <h3>AngularJS UI-Router Tabs</h3>
    <div ng-view></div>
</body>

在标签页中又包含动态区块：

<div>
    <span><a href="#/tab1">Page-1</a></span>
    <span><a href="#/tab2">Page-2</a></span>
    <span><a href="#/tab3">Page-3</a></span>
</div>
<div ng-view></div>

一运行，报了一个这样的错误：

RangeError: Maximum call stack size exceeded

发现浏览器崩溃了，因为ng-view会陷入死循环，无限递归下去。

使用ui.router能很容易解决这个问题，因为它定义的路由有明确的父子关系，并通过ui-view指令将子路由模版插入到父路由模板的<div ui-view></div>中去，从而实现视图嵌套。看代码：

$stateProvider
	.state("tabs",{
		url: "/tabs",templateUrl: "pageTab.html"
	})
	.state("tabs.tab1",{
		url: "/tab1",templateUrl: "tab1.html"
	})

其他区别

ui-router（左）： ngRoute（右）

应用程序内的一个区域：应用程序中的 url
可以嵌套的层次结构：只是平面层次结构
名称可以自定义：名称只能是 url
通过名称或 url 导航：只能通过 url 导航
可以存在多个视图（ui-view）：只能单一视图（ng-view）
可以填充任何视图：只能填充一个视图
通过状态填充某一部件：通过指令将填充某一部件

参考

ui.router源码解析
AngularJS ui-router (嵌套路由)
ngRoute VS ui-router
angular的uiRouter服务学习

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!