ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性，嵌套路由功能主要是依赖$stateProvider服务,$urlRouterProvider服务与 ui-view实现。
.
先创建一个叫PageTab的html文件
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.min.js"></script>
<script src="../angular/angular-ui-route.js"></script>
<script>
var app = angular.module('app',['ui.router']);
app.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.when('','PageTab');
$stateProvider.state('PageTab',{
url:'/PageTab',
templateUrl:'PageTab.html'
}).state('PageTab.page1',{
url:'/page1',
templateUrl:'page1.html'
}).state('PageTab.page2',{
url:'/page2',
templateUrl:'page2.html'
}).state('PageTab.page3',{
url:'/page3',
templateUrl:'page3.html'
})
})
</script>
</head>
<body>
<div ui-view></div>
</body>
</html>
PageTab.html
<div>
<a href="#/page1" ui-sref=".page1">tab1</a>
<a href="#/page2" ui-sref=".page2">tab2</a>
<a href="#/page3" ui-sref=".page3">tab3</a>
<div ui-view></div>
</div>
然后再创建三个子页面
page1.html
<div>
page1
</div>
page2.html
<div>
page2
</div>
page3.html
<div>
page3
</div>