一.背景介绍

UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，

                而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、

                在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭

二.知识剖析

使用前提：安装和引入

            安装：安装方式可以选择下载发行版本或者使用Bower（前端包管理器）：

   $ bower install angular-ui-router --save

            引入：在html页面，script type="text/javascript" src="app/bower_components/angular-ui-router/release/angular-ui-router.js"

             注入：将UI-Router作为web应用的依赖，注入到主程序；angular.module('myApp', ['ui.router']);

与ngRoute服务不同

             UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，

             在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。

如何配置和使用

            第一：在html里，和ngRoute一样，为特定状态指定的模板将会放在div ui-view元素中。在这些模板中也可以包含自己的ui-view,

三.常见问题

ui-router具体怎么实现路由界面

四.解决方案

              先设置主页面，在主页面搭好ng框架，放入ui-view。再写几个路由子页面，相当于把本来写在主页面上的一些标签单独放在.html文件里 。再去配置文件里，注入 ui-router，写配置模板，路径。

参数：

name：状态的名称。

stateConfig：状态配置对象。配置具有以下各项属性（全部属性，看一下好了）：

template： string/function，html模板字符串，或者一个返回html模板字符串的函数。

templateUrl：string/function，模板路径的字符串，或者返回模板路径字符串的函数。

templateProvider：function，返回html模板字符串或模板路径的服务。

controller：string/function，新注册一个控制器函数或者一个已注册的控制器的名称字符串。

controllerProvider：function，返回控制器或者控制器名称的服务

controllerAs：string，控制器别名。

parent：string/object，手动指定该状态的父级。

resolve：object，将会被注入controller去执行的函数，string,function>形式。

url：string，当前状态的对应url。

views：object，视图展示的配置。string,object>形式。

abstract：boolean，一个永远不会被激活的抽象的状态，但可以给其子级提供特性的继承。默认是true。

onEnter：function，当进入一个状态后的回调函数。

onExit：function，当退出一个状态后的回调函数。

reloadOnSearch：boolean，如果为false，那么当一个search/query参数改变时不会触发相同的状态，用于当你修改$location.search()的时候不想重新加载页面。默认为true。

data：object，任意对象数据，用于自定义配置。继承父级状态的data属性。换句话说，通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。

params：url里的参数值，通过它可以实现页面间的参数传递。

五.代码实战

demo

六.拓展思考

ng-route和ui-router区别

                    ① ng路由实现不了多页面应用

                    ② ui路由：更加方便地处理路由嵌套，在state（）函数中进行即可。

                    ③ngRoute 和 ui-route 相比:

                    $when —> $state      路由状态配置的时候

                    $routeParams —> $stateParams    带参数的时候的配置

                    $routeProvider —> $stateProvider    依赖注入的模块

                div ng-view>/div  —>  div ui-view>/div>   页面中绑定的指令

                ④ uiRoute中可以嵌套更深层次的路由，也就是路由中可以有路由（大致有两种情况：1.横向的 2.纵向的）。

                　　（1）嵌套路由

                　　（2）多视图路由

                   ngRoute中就不能嵌套更深的路由。

七.参考文献

参考一：AngularJS ui-router (嵌套路由)

参考二： 菜鸟教程