分享人：王旭东
angular路由 路由 (route) ，几乎所有的 MVC(VM) 框架都应该具有的特性，因为它是前端构建单页面应用 (SPA) 必不可少的组成部分。 那么，对于 angular 而言，它自然也有 内置 的路由模块：叫做 ngRoute 。 不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！ 于是，一个基于 ngRoute 开发的 第三方路由模块 ，叫做 ui.router ，受到了大家的“追捧”。
ngRoute vs ui.router 首先，无论是使用哪种路由，作为框架额外的附加功能，它们都将以 模块依赖 的形式被引入，简而言之就是：在引入路由 源文件 之后，你的代码应该这样写(以 ui.router 为例)： angular.module("myApp", ["ui.router"]); // myApp为自定义模块，依赖第三方路由模块ui.router 这样做的目的是： 在程序启动(bootstrap)的时候，加载依赖模块(如：ui.router)，将所有 挂载 在该模块的 服务(provider) ， 指令(directive) ， 过滤器(filter) 等都进行注册 ，那么在后面的程序中便可以调用了。
$urlRouterProvider(服务提供者) --------- 用来配置路由重定向 $urlRouter(服务) $stateProvider(服务提供者) --------- 用来配置路由 $state(服务) --------- 用来显示当前路由状态信息，以及一些路由方法（如：跳转） $stateParams(服务) --------- 用来存储路由匹配时的参数 ui-view(指令) --------- 路由模板渲染，对应的dom相关联 ui-sref(指令)
我们在html中利用ng-view指令定义了两个区块，于是两个div中显示了相同的内容，这很合乎情理，但却不是我们想要的，但是又不能为力，因为，在ngRoute中：
1.视图没有名字进行唯一标志，所以它们被同等的处理。
2.路由配置只有一个模板，无法配置多个。
$stateProvider
.state('home', {
url: '/abc',
template: 'hello world'
1.规则名：'home'
2.匹配的url：'/abc'
3.对应的模板：'hello world'
angular 在刚开始的$digest时， $rootScope 会触发 $locationChangeSuccess 事件（angular在每次浏览器hash change的时候也会触发 $locationChangeSuccess事件）
ui.router 监听了 $locationChangeSuccess 事件，于是开始通过遍历一系列rules，进行路由查找匹配
当匹配到路由后，就通过 $state.transitionTo(state,...) ，跳转激活对应的state
最后，完成数据请求和模板的渲染
感谢大家观看
BY : 王旭东