资讯专栏INFORMATION COLUMN

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

Shonim / 1925人阅读

摘要:被认为是为开发者提供的最实用的一个模块。与集成的服务不同的是,可以将视图嵌套,因为它基于的是操作状态而仅非。与传统做法使用不同的是,在里需要使用服务。当在中处理路由和状态时,开发者的重心是当前的状态是什么以及在哪一个页面里。

初学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时,在主页面添加标签,会把视图渲染好自动加载到此标签,而如果想在视图里面再加一个,用别的子视图渲染好来填充视图里面种的标签,这是不支持的(这话说得很绕,就是不支持视图里面嵌套视图);而UI-Router支持这个特性,ui-router使用ui-view标签,可以层层嵌套视图。

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

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



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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107014.html

相关文章

  • AngularJs功能(九)--路由

    摘要:该内的内容会根据路由的变化而变化。配置,用来定义路由规则。由此我们就需要另一个第三方路由模块,叫做,当然它是基于开发的。造成这种现象的最根本原因路由没有明确的父子层级关系。监听路由路由状态发生改变时可以通过监听,通过注入实现状态的管理。 何为路由 路由机制运可以实现多视图的单页Web应用(single page web application,SPA)。 单页应用在使用期间不会重新加载...

    mingde 评论0 收藏0
  • angularjs+springMvc学习笔记

    摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太 回调 说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数success和error,下...

    dreamGong 评论0 收藏0
  • angularjs+springMvc学习笔记

    摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太 回调 说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数success和error,下...

    rozbo 评论0 收藏0
  • AngularJs

    摘要:当左右服务都被解析并返回时,会以服务为参数去调用组件的构造函数。发送或广播的消息应该限定在最小的作用域。置顶一个通过,发送的消息列表并且窒息的管理以防止命名冲突在需要格式化数据时,将格式 angular 数据双向绑定的框架 提供数据绑定,DOM指令。angular,定义了一套规则,开发中就必须遵守规则,这套规则为项目提供了一套解决方案。 模块,组件,模板,元数据,数据绑定, 指令,服务...

    sf190404 评论0 收藏0
  • ui-router学习

    摘要:关于应用程序的行为类似于状态机。将应用程序的每个功能视为一组状态。当嵌套状态处于活动状态时,该片段将附加到浏览器中父状态的。父状态可用于限制对整个子状态树的访问,但本身不提供任何。如果方案返回,则转换将暂停,直到解决状态顶级状态嵌套状态 关于state UI-Router应用程序的行为类似于状态机。 将应用程序的每个功能视为一组状态。一次只能有一个状态为活动状态。用户可以从一种状态转换...

    sixleaves 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<