初学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的更多相关文章

  1. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  2. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  3. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  4. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  5. 免费UI框架推荐--Charisma UI

    基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 在项目设计和开发工作中,做过一些后台管理系统的设计和开发,用的很多都是比较传统的UI框架. 老是走在这个圈子里 ...

  6. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  7. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  8. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  9. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

随机推荐

  1. leetcode-409-Longest Palindrome(统计字母出现次数)

    题目描述: Given a string which consists of lowercase or uppercase letters, find the length of the longes ...

  2. 有向图的拓扑排序的理解和简单实现(Java)

    如果图中存在环(回路),那么该图不存在拓扑排序,在这里我们讨论的都是无环的有向图. 什么是拓扑排序 一个例子 对于一部电影的制作过程,我们可以看成是一个项目工程.所有的工程都可以分为若干个" ...

  3. 一段话理解 MDX中的Select 、轴、COLUMNS、ROWS

    理解 SELECT  Understanding the SELECT statement SELECT 语句的目的是定义新的 Cube 空间,新的Cube 空间是由类似于 COLUMNS或者ROWS ...

  4. Welcome! This is the documentation for Python 3.6.8

    The Zen of Python, by Tim Peters Beautiful is better than ugly.Explicit is better than implicit.Simp ...

  5. npm install 报错:ERR! code EINTEGRITY 解决方案

    npm升级后,npm install 报错了,报错信息:ERR! code EINTEGRITY到处百度搜索解决方案,终于找到了!“npm cache verify”这条命令帮助了不少人 npm ca ...

  6. 03-树2 List Leaves (25 分)

    Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...

  7. TryParse用法

    int.Parse()是一种类型转换:表示将数字内容的字符串转为int类型. 如果字符串为空,则抛出ArgumentNullException异常: 如果字符串内容不是数字,则抛出FormatExce ...

  8. feignClient中修改ribbon的配置

    1.使用@FeignClient注解发现服务 服务提供者的controller: @RestController public class StudentController { @Autowired ...

  9. JVM-ClassLoader类加载器

    类加载器: 对于虚拟机的角度来看,只存在两种类加载器: 启动类加载器(Brootstrap ClassLoader)和“其他类加载器”.启动类加载器是由C++写的,属于虚拟机的一部分,其他类加载器都是 ...

  10. php 判断字符串之间包含关系

    之前常用stristr ,  strpos判断. 因为处理1000W * 1000W级别,循环就是漫长漫长... 在此,对stristr, strpos, explode判断字符串包含关系处理速度对比 ...