原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ui-router/
ui-router是angularjs的一個客戶端的單頁應用路由解決方案，它提供了一種類似一個層次樹的狀態來方便的實現各個頁面間的跳轉。
Q:路由是怎麼顯示各個模板？
當ui-routr狀態被激活時，它的模板會自動插入到父狀態對應的模板中包含ui-view屬性的元素內部。如果是頂層狀態，那麼它的父模板就是index.html。
Q：激活路由狀態有三種方法：
1.調用$state.go()方法；
2.點擊包含ui-sref指令的鏈接；
3.導航到與狀態相關聯的 url。
使用ui-router的準備工作：
（1）下載angular-ui-router.js
（2）在index.html中下載angular-ui-router.js
（3）把ui.router依賴注入
例：<!doctype html>
<htmlng-app="myApp">
<head>
<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<scriptsrc="js/angular-ui-router.js"></script>
<script>
var myApp =angular.module('myApp', ['ui.router']);
// For Component users, it should look like this:
// var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>
...
</head>
<body>
...
</body>
</html>
例一、嵌套的狀態和視圖
（1）首先完成上邊準備工作的設置
（2）然後添加一個ui-view指令到<body />
<!-- index.html -->
<body>
<divui-view></div>
<!-- We'll also add some navigation: -->
<aui-sref="state1">State 1</a>
<aui-sref="state2">State 2</a>
</body>
（3）可能你會注意到我們還添加了ui-sref指令，另外爲了管理狀態轉換，如果對應的狀態有一個URL，這個指令還會自動生成<a>鏈接的href屬性，這些內容將會插入index.html的ui-view，注意：嵌套狀態和視圖的關鍵就是它們擁有自己的ui-view。
<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<aui-sref="state1.list">Show List</a>
<divui-view></div>
<!-- partials/state2.html -->
<h1>State 2</h1>
<hr/>
<aui-sref="state2.list">Show List</a>
<divui-view></div>
（4）接下來，我們添加一些子模板。這些模板將會插入它們的父模板的ui-view。
<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
<ling-repeat="item in items">` item `</li>
</ul>
<!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<ling-repeat="thing in things">` thing `</li>
</ul>
（5）最後，我們用$stateProvider來把所有的state連成一條線，像下面這樣設置你的狀態：
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url:"/state1",
templateUrl:"partials/state1.html"
})
.state('state1.list', {
url:"/list",
templateUrl:"partials/state1.list.html",
controller:function($scope) {
$scope.items= ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url:"/state2",
templateUrl:"partials/state2.html"
})
.state('state2.list', {
url:"/list",
templateUrl:"partials/state2.list.html",
controller:function($scope) {
$scope.things= ["A", "Set", "Of", "Things"];
}
});
});
這些只是一些簡單的使用，具體的我們可以根據自己的需要改動。
例二、多個的命名視圖
這是ui-router的另一個強大的功能，可以在一個模板頁面中有多個ui-view。
（1）首先完成上邊準備工作的設置
（2）添加一個或多個ui-view到你的應用並命名好。
<!-- index.html -->
<body>
<divui-view="viewA"></div>
<divui-view="viewB"></div>
<!-- Also a way to navigate -->
<aui-sref="route1">Route 1</a>
<aui-sref="route2">Route 2</a>
</body>
（3）在config中設置你的狀態
myApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url:"",
views: {
"viewA": { template:"index.viewA" },
"viewB": { template:"index.viewB" }
}
})
.state('route1', {
url:"/route1",
views: {
"viewA": { template:"route1.viewA" },
"viewB": { template:"route1.viewB" }
}
})
.state('route2', {
url:"/route2",
views: {
"viewA": { template:"route2.viewA" },
"viewB": { template:"route2.viewB" }
}
})
});