我们都知道，如果使用原生路由的话，Angular的视图是通过ng-view这个指令进行加载的。比如这样：
。一般，我们都会把这个指令放在index.html这个文件里面，然后，通过控制器来加载相应的模板视图。比如这样：rush:js;">
var bookStoreApp = 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页面：
home-list.html
创建如下的html页面：
rush:xhtml;">
about.html
创建如下的html页面：
rush:js;">
The About Page
This page demonstrates and views.
