下面以一个具体的例子来解释ui-router的用法：
准备工作
page1.html
<div>this is the page1 con</div>
page2.html
<div>this is the page2 con</div>
extra.html
<div>this is the extra con</div>
main.html
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
//这里要记得引入angular框架和ui-router
<script src="./node_modules/angular/angular.min.js" charset="utf-8"></script>
<script src="./node_modules/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<h1>Angularjs ui-router demo</h1>
//ui-view相当于一个占位符,用来放置切换的页面
<div ui-view=""></div>
</body>
</html>
pageTab.html
<div>
//这里添加的ui-sref表示的就是要显示的页面，"."表示的是子页面
<span ui-sref=".page1"><a href="">page1</a></span>
<span ui-sref=".page2"><a href="">page2</a></span>
</div>
<div>
<div ui-view=""></div>
</div>
接下来就是要编写js代码了，我们把它下载app.js中（main.html中引入了）：
//声明angular模块，并把ui-router传入
var myApp = angular.module('myApp',['ui.router'])
//传入$stateProvider和$urlRouteProvider两个路由引擎参数，这样，我们后面就可以配置我们想要的路由了
.config(function($stateProvider,$urlRouterProvider) {
//如果后面没有匹配的路由，那么将会跳转到$urlRouterProvider这儿设定的路径(也就是设置默认路径)，就和switch..case..中的default是一个道理
$urlRouterProvider
.when('','/pageTab');
$stateProvider
//第一行表示会在main.html页面第一个显示出来的页面
.state('pageTab',{
url: '/pageTab',templateUrl: 'pageTab.html'
})
//这里加上“.“表示告诉路由引擎，我们在这里定义的是子页面／嵌入页面，也就是说它会显示在pageTab.html页面中的ui-view处。
.state('pageTab.page1',{
url: '/page1',templateUrl: 'page1.html'
})
.state('pageTab.page2',{
url: '/page2',templateUrl: 'page2.html'
})
.state('extra',{
url: '/extra',templateUrl: 'extra.html'
});
});
参考： http://www.oschina.net/translate/angularjs-ui-router-nested-routes?print
