大佬教程收集整理的这篇文章主要介绍了ngRoute 和 ui.router 的使用方法和区别,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的。本文主要对 AngularJS 原生的ngRoute
路由模块和第三方路由模块ui.router
的用法进行简单介绍,并做一个对比。
1) 引入angular-route
lib
无论是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
1) 引入angular-ui-router
lib
<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',})
有两种方式可以指定父子状态关系。
一种是,使用点标记法,像本文最后嵌套视图部分举得栗子那样:
1
|
.state("tabs.tab1",{}) |
另一种是,使用parent
属性
.state("tab1",{ parent: 'tabs' // 也可是一个状态对象, parent: tabs })
使用abstract
可以为所有的子状态提供一个基URL
,这样做的好处就是可以在抽象出来的这个状态所对应的html
页面中来定义静态资源。抽象模板不能被激活。
$stateProvider .state('contacts',{ abstract: true,url: '/contacts',templateUrl: 'contacts.html',}) .state('contacts.list',{ url: '/list',templateUrl: 'contacts.list.html' })
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
在每次浏览器hash
change 的时候也会触发$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(右)
以上是大佬教程为你收集整理的ngRoute 和 ui.router 的使用方法和区别全部内容,希望文章能够帮你解决ngRoute 和 ui.router 的使用方法和区别所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。