【知识点】为什么推荐用ui-router替代ngRoute

初学angularjs，第一个实例是官网的phoneCat，里面路由用的是ngRoute，后来看到别的用ui-router，觉得好奇，ui-route是什么呢？百度一些，得到如下解释：

ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。

ui-router是一个web客户端的路由解决方案，它最大的作用是将web界面的设计分块了

UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）

看了以上解释后，懂了吗？我是没动，但好像很牛掰的样子，继续研究，终于看到说不同的地方了：

AngularUI Router是AngularUI 团队开发的一个AngularJS路由模块，相比AngularJS的标准路由ngRoute，它更灵活，基于state而不是URL在一个页面中加载多个View并保持View的层次，Nested States & Views以及Multiple & Named Views。UI-Router被认为是AngularUI为开发者提供的最实用的一个模块。

与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。

上面说集成的ngRoute服务不同，实际上在我当前用的版本中已经把ngRoute模块独立出来了；

1、UI-Router支持嵌套视图，ngRoute不支持

使用ngRoute时，在主页面添加<ng-view></ng-view>标签，会把视图渲染好自动加载到此标签，而如果想在视图里面再加一个<ng-view></ng-view>，用别的子视图渲染好来填充视图里面种的<ng-view>标签，这是不支持的（这话说得很绕，就是不支持视图里面嵌套视图）；而UI-Router支持这个特性，ui-router使用ui-view标签，可以层层嵌套视图。

2、UI-Router支持多视图，ngRoute不支持

ngRoute的页面只能添加一个<ng-view></ng-view>标签，及时添加多个，都是填充同样的内容；
UI-Router可以通过为ui-view命名的方式支持多个视图，如:

<ng-view="profile"></ng-view>
<ng-view="main"></ng-view>

这里有对的详细分析：ui.router源码解析

最后，还是要根据自己的需求来：是否需要用到这些特性？ngRoute是否能够满足你的要求？如果ngRoute够用了，还是使用ngRoute吧，虽然UI-Router不会增加使用难度，但是UI-Router压缩后还有30kb，而ngRoute压缩后只有5kb！

（编辑：李大同）

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