ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。
在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置
通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为
通过嵌套的方式来解决页面中的一些重复出现的部位
最简单的形式
模板可以通过下面这种最简单的方式来指定
<!-- in index.html --> <body ng-controller="MainCtrl"> <section ui-view></section> </body>
// in app-states.js (or whatever you want to name it) $stateProvider.state('contacts', { template: '<h1>My Contacts</h1>' })
模板将被插入哪里?
状态被激活时，它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态，那么它的父模板就是index.html。
激活状态
有三种方法来激活状态：
调用$state.go()方法，这是一个高级的便利方法。
点击包含ui-sref指令的链接。
导航到与状态相关联的 url。
Templates 模板
可以通过下面几种方法来配置一个状态的模板。 方法一：配置template属性，指定一段 HTML 字符串，这人是设置模板的最简单的方式。
$stateProvider.state(<span>'contacts'</span>, { template: <span>'<h1>My Contacts</h1>'</span> })
方法二：配置templateUrl属性，来加载指定位置的模板，这是设置模板的常用方法。
$stateProvider.state(<span>'contacts'</span>, { templateUrl: <span>'contacts.html'</span> })
templateUrl 的值也可以是一个函数返回的url，函数带一个预设参数stateParams。
方法三：通过 templateProvider 函数返回模板的 HTML。
<span>$stateProvider</span>.state(<span>'contacts'</span>, { templateProvider: <span><span>function</span> <span>(<span>$timeout</span>, <span>$stateParams</span>)</span> </span>{ <span>return</span> <span>$timeout</span>(<span><span>function</span> <span>()</span> </span>{ <span>return</span> <span>'<h1>'</span> + <span>$stateParams</span>.contactId + <span>'</h1>'</span> }, <span>100</span>); } })
如果想在状态被激活前，让<ui-view>有一些默认的内容，当状态被激活之后默认内容将被状态对应的模板替换。
<span><<span>body</span>></span> <span><<span>ui-view</span>></span> <span><<span>i</span>></span>Some content will load here!<span></<span>i</span>></span> <span></<span>ui-view</span>></span> <span></<span>body</span>></span>
Controllers 控制器
可以为模板指定一个控制器（controller）。警告：控制器不会被实例化如果模板没有定义。 设置控制器：
$stateProvider.state('contacts', { <span>template</span>: '<h1>{{title}}</h1>', controller: function($scope){ $scope.title = '<span>My</span> <span>Contacts</span>'; } })
如果在模块中已经定义了一个控制器，只需要指定控制器的名称即可：
$stateProvider.state(<span>'contacts'</span>, { template: <span>...</span>, controller: <span>'ContactsCtrl'</span> })
使用 controllerAs语法：
$stateProvider.state(<span>'contacts'</span>, { template: <span>...</span>, controller: <span>'ContactsCtrl as contact'</span> })
对于更高级的需要，可以使用controllerProvider来动态返回一个控制器函数或字符串：
$stateProvider.state(<span>'contacts'</span>, { template: <span>...</span>, controllerProvider: <span>function</span>($stateParams) { var ctrlName = $stateParams.type + <span>"Controller"</span>; <span>return</span> ctrlName; } })
控制器可以使用 $scope.on()方法来监听事件状态转换。 控制器可以根据需要实例化，当相应的 scope 被创建时。例如，当用户点击一个 url 手动导航一个状态时，$stateProvider 将加载对应的模板到视图中，并且将控制器和模板的 scope 绑定在一起。
解决器 Resolver
可以使用 resolver 为控制器提供可选的依赖注入项。 resolver 配置项是一个由key/value构成的对象。
key – {string} ：注入控制器的依赖项名称。
factory – {string|function} ：
1、string：一个服务的别名
2、function：函数的返回值将作为依赖注入项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（be resolved）才会被实例化。
例子
在 controller 实例化之前，resolve 中的每一个对象都必须 be resolved，请注意每个 resolved object 是怎样作为参数注入到控制器中的。