angular路由

ngRoute需要引进以下文件

<script src="http://code.angularjs.org/1.2.5/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.5/angular-route.min.js"></script>

ui.router需要引进以下文件

<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-ui-router.js"></script>

为什么特意强调引进，因为自己就是因为没有分辨这两者的区别，白白浪费了一个早上，谨记谨记

---

ui-router的优势：多视图 嵌套视图

（1）多视图：页面可以显示多个动态变化的不同区块。
　　比如：页面一个区块用来显示页面状态，另一个区块用来显示页面主内容，当路由切换时，页面状态跟着变化，对应的页面主内容也跟着变化。
首先，我们尝试着用 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等）。

注 ：视图名是一个字符串，不可以包含 @ （原因后面会说）。

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

比如：页面一个主区块显示主内容，主内容中的部分内容要求根据路由变化而变化，这时就需要另一个动态变化的区块嵌套在主区块中。

其实，嵌套视图，在html中的最终表现就像这样：

<div ng-view> I am parent <div ng-view>I am child</div> </div>

转成javascript，我们会在程序里这样写：

$routeProvider .when('/', { template: 'I am parent <div ng-view>I am child</div>' });

倘若，你真的用 ngRoute 这样写，你会发现浏览器崩溃了，因为在ng-view指令link的过程中，代码会无限递归下去。

那么造成这种现象的最根本原因： 路由没有明确的父子层级关系！

看看 ui.router 是如何解决这一问题的？

$stateProvider .state('parent', { abstract: true, url: '/', template: 'I am parent <div ui-view></div>' }) .state('parent.child', { url: '', template: 'I am child' });

巧妙地，通过 parent 与 parent.child 来确定路由的 父子关系 ，从而解决无限递归问题。 另外子路由的模板最终也将被插入到父路由模板的div[ui-view]中去，从而达到视图嵌套的效果。

ui.router工作原理路由，大致可以理解为：一个 查找匹配 的过程。

---

参考网址：http://www.codesec.net/view/170627.html（这里写的更加详细，自己主要是做了归纳整理）