AngularJS ui-router
原文地址：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" }
}
})
});
