为什么推荐用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!
为什么推荐用ui-router替代ngRoute的更多相关文章
- ngRoute 与ui.router区别
		angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ... 
- 【原创】ui.router源码解析
		Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ... 
- angularjs ngRoute和ui.router对比
		ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ... 
- ngRoute 和 ui.router 的使用方法和区别
		在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ... 
- 免费UI框架推荐--Charisma UI
		基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 在项目设计和开发工作中,做过一些后台管理系统的设计和开发,用的很多都是比较传统的UI框架. 老是走在这个圈子里 ... 
- angular : $location & $state(UI router)的关系
		次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ... 
- angular ui.router 路由传参数
		angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ... 
- AngularJS 使用 UI Router 实现表单向导
		Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ... 
- [转]AngularJS 使用 UI Router 实现表单向导
		本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ... 
随机推荐
- 架构师养成记--30.Redis环境搭建
			Redis的安装 下载地址http://redis.io/download 安装步骤: 首先需要安装gcc,把下载好的redis-3.0.0-rc2.tar.gz 放到 /usr/local 文件夹下 ... 
- Learn to See in the Dark(论文阅读笔记)
			最近做项目看了一篇论文<Learn to See in the Dark>下面是一些论文笔记 概括: 这篇论文主要介绍的是在低光照的环境下用两个标准的FCN网络,通过控制变量法来对比不同的 ... 
- 原 form 表单中 disabled 属性的元素不参与表单提交
			https://blog.csdn.net/benben683280/article/details/79173336 
- 思科设备配置DHCP服务
			路由器,三层交换机都是可以做DHCP服务的,下面以Cisco 3750G-24TS-S为例配置DHCP服务,指令如下: ip dhcp pool DHCP-Server network 192.168 ... 
- 怎么搭建一个5T的私有云盘
			视频 点击打开视频 下载地址 免费域名网址: https://www.freewebhostingarea.com/ ftp工具: http://t.cn/EXWxYUI oneindex: http ... 
- JavaScript数据结构-4.栈操作
			<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ... 
- HDU 1465 不容易系列之一(排错公式)
			大家常常感慨,要做好一件事情真的不容易,确实,失败比成功容易多了! 做好“一件”事情尚且不易,若想永远成功而总从不失败,那更是难上加难了,就像花钱总是比挣钱容易的道理一样. 话虽这样说,我还是要告诉 ... 
- 分布式一致性协议介绍(Paxos、Raft)
			两阶段提交 Two-phase Commit(2PC):保证一个事务跨越多个节点时保持 ACID 特性: 两类节点:协调者(Coordinator)和参与者(Participants),协调者只有一 ... 
- 虚拟机下的zookeeper集群安装
			ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ... 
- [转]MVC Razor模板引擎 @RenderBody、@RenderPage、@RenderSection及Html.RenderPartial、Html.RenderAction
			本文参考自下面文章整理 MVC Razor模板引擎 @RenderBody.@RenderPage.@RenderSection及Html.RenderPartial.Html.RenderActio ... 
