ui-router是一个可以用来替换AngularJS原生路由的插件，它最大的特点就是支持嵌套路由。
如果使用原生路由的话，Angular的视图是通过ng-view这个指令进行加载的。比如这样：<div ng-view></div>。一般，我们都会把这个指令放在index.html这个文件里面，然后，通过控制器来加载相应的模板视图。比如这样：
/* 在router.js文件里，使用AngularJS原生的路由 */
angular.module('myApp', [])
.config('myAppCtrl', ['$routeProvider', function ( $routeProvider ) {
$routeProvider
.when('/', {
templateUrl: 'views/page-a.html',
controller: 'pageACtrl'
})
.when('/next', {
templateUrl: 'views/page-b.html',
controller: 'pageBCtrl'
})
/* 对其他不合法的路由进行处理 */
$routeProvider.otherwise('/404');
}])
/* 继续后面的各个视图的路由定义 */
这是属于AngularJS的原生路由定义。从表面上看似乎挺方便，没有什么太大的问题。但是细想一下，如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？而我们想要的只是右边的视图刷新。所以，这就要用到嵌套路由了。
关于嵌套路由
所谓嵌套路由，就是视图里面还可以再嵌套视图，路由里还可以再嵌套路由。并且，通过ui-router，可以实现不同视图之间的参数传递。
关于ui-router的简单使用
ui-router定义路由的时候，与ngRouter不一样，它是使用.来进行定义的，并且在html标签里，不使用ng-view，而是使用ui-view。比如<div ui-view></div>
ui-router提供了$stateProvider，$urlRouterProvider来进行路由定义。具体使用如下：
/* 使用ui-router来进行路由定义，需要注入ui.router模块 */
var myApp = angular.module('myApp', ['ui.router']);
/* 注入$stateProvider，$urlRouterProvider */
myApp.config(['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider ) {
/* 使用when来对一些不合法的路由进行重定向 */
$urlRouterProvider.when('', '/main');
/* 通过$stateProvider的state()函数来进行路由定义 */
$stateProvider.state('main', {
url: '/main',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).state('detail', {
url: '/main/detail/store',
templateUrl: 'views/detail.html',
controller: 'DetailCtrl'
})
$stateProvider.state('404', {
url: '/404',
templateUrl: '404.html'
})
}]);
以上是关于ui-router的简单用法。当然，这还看不出来和Angular的原生路由的区别。因为这都是只涉及了一层路由。
关于ui-router的嵌套路由的使用
关于嵌套路由的使用，可以用这样一个例子来说明。以AngularJS的API Guide为例。
这是一个典型的左右结构。左边为菜单条目，右边为视图。并且，菜单条目里，有主条目，主条目下面有子条目。
点击就会现，刷新的只是右边的视图，左边并没有刷新。说明左边和右边是分开的视图。那么，这个就是用的ui-router来实现的。
在主页面文件里：
2 <!-- index.html --> <div ui-view></div>
那么，有了index.html之后，就需要把主要的页面加载到这里面，所以，添加一个main.html文件。
<!-- main.html --> <div>这是侧边栏的菜单条目</div> <div ui-view></div>
OK，现在在main.html里也定义了一个ui-view，这个ui-view就是用来加载视图的。
在router.js里，就可以这样写。
/* router.js */
var myApp = angular.module('myApp', ['ui.router']);
myApp
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
//为主菜单声明abstract属性和template属性
//那么视图就会自动加载到ui-view里
.state('main', {
abstract: true,
url: '/main',
template: '<ui-view />'
})
//通过"."的方式声明子视图
//这样，就能实现嵌套路由了
.state('main.page_a', {
url: '/page_a',
templateUrl: 'views/template-a.html',
controller: 'pageACtrl'
})
.state('main.page_b', {
url: '/page_b',
templateUrl: 'views/template-b.html',
controller: 'pageBCtrl'
})
}]);
通过这样一层一层的不断定义，就可以简单实现嵌套路由了。
如果需要了解ui-router更深层次的用法，可以查看其官方文档。
未经允许不得转载：蒋丽君的小站 » Angular-ui-router：基于AngularJS的可嵌套路由
