https://github.com/angular-ui/ui-router
我们都知道，如果使用原生路由的话，Angular的视图是通过ng-view这个指令进行加载的。比如这样：
。一般，我们都会把这个指令放在index.html这个文件里面，然后，通过控制器来加载相应的模板视图。比如这样：[javascript]view plaincopy
varbookStoreApp = angular.module('bookStoreApp', [
'ngRoute','ngAnimate','bookStoreCtrls',
]);
bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl:'tpls/hello.html',
controller:'HelloCtrl'
}).when('/list', {
templateUrl:'tpls/bookList.html',
controller:'BookListCtrl'
}).otherwise({
redirectTo:'/hello'
})
});
这是属于AngularJS的原生路由定义。从表面上看似乎挺方便，没有什么太大的问题。但是细想一下，如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？而我们想要的只是右边的视图刷新。所以，这就要用到嵌套路由了。
所谓嵌套路由，就是视图里面还可以再嵌套视图，路由里还可以再嵌套路由。并且，通过ui-router，可以实现不同视图之间的参数传递。
ui-router定义路由的时候，与ngRouter不一样，它是使用.来进行定义的，并且在html标签里，不使用ng-view，而是使用ui-view，比如
。ui-router提供了$stateProvider，$urlRouterProvider来进行路由定义。下面的实例演示如何实现路由嵌套：
home.html
创建如下的html页面：
[html]view plaincopy
Home
This page demonstrates
nestedviews.
List
Paragraph
home-list.html
创建如下的html页面：
[html]view plaincopy
{{ topic }}
about.html
创建如下的html页面：
[html]view plaincopy
The About Page
This page demonstrates
multipleand
namedviews.
table-data.html
创建如下的html页面：
[html]view plaincopy
Ice-Creams
Name
Cost
{{ topic.name }}
${{ topic.price }}
注意，到目前为止，我们还没有插入任何angularjs路由或者其它任何框架。目前我们只是创建了一些页面片段，我们需要一个占位或者说父页面来装下这些页面片段。让我们把这个页面叫做 index.html.
index.html
用如下内容创建这个html页面
[html]view plaincopy
AngularUI Router
Home
About
在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class为Container的div中我们创建了一个
， 该 div 内的 HTML 内容会根据路由的变化而变化。在中ui-sref 指令链接到特定状态。在app.JS文件的内容，我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下：
[javascript]view plaincopy
varrouterApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
/*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 home.html,
*这个页面就是状态名称被声明的地方. */
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url:'/home',
templateUrl:'tpls2/home.html'
})
/* nested list with custom controller*/
.state('home.list', {
url:'/list',
templateUrl:'tpls2/home-list.html',
controller:function($scope) {
$scope.topics = ['Butterscotch','Black Current','Mango'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url:'/paragraph',
template:'I could sure use a scoop of ice-cream. '
})
.state('about', {
url:'/about',
/* view 用在该状态下有多个 ui-view 的情况，可以对不同的 ui-view 使用特定的 template, controller, resolve data
绝对 view 使用 '@' 符号来区别，比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的
模板(template)，相对 view 则无*/
views: {
// 无名 view
'': {
templateUrl:'tpls2/about.html'
},
// for "ui-view='columnOne'"
'columnOne@about': {
template:'这里是第一列的内容'
},
// for "ui-view='columnTwo'"
'columnTwo@about': {
templateUrl:'tpls2/table-data.html',
controller:'Controller'
}
}
});
});
routerApp.controller('Controller',function($scope) {
$scope.message ='test';
$scope.topics = [{
name:'Butterscotch',
price: 50
}, {
name:'Black Current',
price: 100
}, {
name:'Mango',
price: 20
}];
});
