这篇文章主要记录个人学习 angularUI router 的笔记。ui-router传送门
Q：首先明确一点，angular本身有 $route 可以提供页面状态切换服务，为什么要有 ui-router ？
A：因为angular本身的那种是围绕url进行组织的，而 ui-router 则是围绕自定义 states 进行组织的，可以有更丰富的内容，不仅仅可以有 routes ，也可以有其他的行为附加。
Q：在项目中如何使用呢？
A：三步走战略：
1. 获得 angular-ui-router ：直接下载 minified 版本或者通过 bower 安装
2. 在你的项目的 index.html 中通过 <script> 标签引用第一步中的文件
3. 在你的项目的 module 的依赖中，加入 ui.router
// setup should look similar to the following:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ui.router']);
</script>
...
</head>
<body>
...
</body>
</html>
Q：ui-router 的作用关键在于它能够进行 states 和 views 的嵌套，具体是怎么完成的呢？
A：在以上引入了 ui-router 的基础上之后，主要是通过 ui-view 的嵌套完成的。
// 第一步：index.html 文件中
<body>
<div ui-view></div>
<!-- We'll also add some navigation: -->
</body>
// 第二步：子页面文件中也有 ui-view ，如 child.html 中
<div ui-view></div>
// 第三步：孙子页面，如 grandchild.html 中
<ul>
<li ng-repeat="thing in things">{ {thing} }</li>
</ul>
// 第四步：把所有的东西通过 $stateProvider 连接起来
myApp.config(function($stateProvider, $urlRouterProvider) {
// 对于所有不能匹配的url，直接定向到以下url：
$urlRouterProvider.otherwise("state1");
// 接下来设置 states
$stateProvider.
state("state1", {
url: "/state1",
templateUrl: "child.html"
})
.state("state1.list", {
url: "/list",
templateUrl: "grandchild.html",
controller: function($scope) {
...
}
})
})