AngularJS中ngRouter和uiRouter的区别

路由(route)，几乎所有的MVC(VM)框架都应该具有的特性，因为它是前端构建单页面应用(SPA)必不可少的组成部分。
那么，对于angular而言，它自然也有内置的路由模块：做ngRoute。
不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！
于是，一个基于ngRoute开发的第三方路由模块，叫做ui.router，受到了大家的“追捧”。

那么它们有什么不同呢？

ngRoute在路由配置时用$routeProvider。
ui-router路由配置时用 $stateProvider 和$urlRouterProvider。
ngRoute是官方路由。
ui-route是第三方路由。
ngroute是用AngularJS框架的核心部分。
ui-router是一个社区库，它是用来提高完善ngroute路由功能的。
ui-router允许嵌套视图(nested views)和多个命名视图(multiple named views)。

接下来看看ngRoute模块和ui.router模块各自都提供了哪些服务，哪些指令？

ng-router

$routeProvider–用于进行路由配置的内置服务
$routeParams–径性路由参数传递时使用的一个内置服务
ng-view–用于展示对应模板的指令

ui-router

$stateProvider–ui路由中状态的服务提供者。
$urlRouterProvider–用于默认访问位置的指定。
views–用于进行多数据展示的情况。
ui-view–主要进行目标视图模板的展示。
ui-sref–该属性主要用于替换HTML中a标签的href属性，用于指定目标路由的名称。

从上述看，其实ui.router和ngRoute大体的设计思路，对应的模块划分都是一致的！
那么ui-Router解决了原生的ng-route哪些不足呢？

多视图—页面可以显示多个动态变化的不同区块。

比如：页面一个区块用来显示页面状态，另一个区块用来显示页面主内容，当路由切换时，页面状态跟着变化，对应的页面主内容也跟着变化。

首先，我们尝试着用ngRoute来做：

html页面：

<div ng-view>区块1</div>
<div ng-view>区块2</div>

JS代码：

$routeProvider.when('/', {template: 'hello world'
});

我们在html中利用ng-view指令定义了两个区块，于是两个div中显示了相同的内容，这很合乎情理，但却不是我们想要的，但是又不能为力，因为，在ngRoute中：

视图没有名字进行唯一标志，所以它们被同等的处理。
路由配置只有一个模板，无法配置多个。

针对上述两个问题，我们尝试用ui.router来做：

HTML页面：

<div ui-view></div><div ui-view="status"></div>

JS代码：

$stateProvider.state('home', {url: '/',views: {'': {template: 'hello world'},'status': {template: 'home page'}}});

这次，结果是我们想要的，两个区块，分别显示了不同的内容，原因在于，在ui.router中：

可以给视图命名，如：ui-view=”status”。
可以在路由配置中根据视图名字(如：status)，配置不同的模板（其实还有controller等）。

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

AngularJS中ngRouter和uiRouter的区别相关推荐

angularjs 中的$digest和$apply区别
$digest和$apply 在Angular中,有$apply和$digest两个函数,我们刚才是通过$digest来让这个数据应用到界面上.但这个时候,也可以不用$digest,而是使用$appl ...
angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
理解AngularJS中的依赖注入
作者 CraftsCoder 冷月无声 - 博客频道 - CSDN.NET http://blog.csdn.net/jaytalent/article/details/50986402 本文结合一些 ...
如果我有jQuery背景，那么“ AngularJS中的思考”吗？ [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
Angularjs中的IGGird创建和使用
AngularJs Ignite 中的Iggrid 官网:http://www.igniteui.com/grid/angular Angularjs的Iggrid使用有两种方式,第一种为iggrid ...
python中break和continue的区别
python中break和continue的区别 break 结束for 或者while 循环后面还没循环到的不再循环 continue 当满足某种条件时结束当前值的循环后面没有循环的继续循环 ...
java中separator_java - File.separator和路径中的斜杠之间的区别
java - File.separator和路径中的斜杠之间的区别在Java Path-String中使用/和普通的File.separator有什么区别? 与双反斜杠相比,/平台独立似乎不是原因, ...
PHP中self和static的区别,php中self与static的区别
原文链接,猛击这里. php中self与static的区别通过一些示例,我们可以很容易看出self和static的区别.假定我们有class Car – 它有两个方法,model和getModel. ...

AngularJS中ngRouter和uiRouter的区别

AngularJS中ngRouter和uiRouter的区别相关推荐

最新文章

热门文章