UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。
使用时需要用ui-view指令指定，如:<div ui-view></div>
需要下载 ui-route文件
然后再页脚引入
<script type="text/javascript" src="../js/angular-ui-route.js"></script>
接下来，将UI-Router作为web应用的依赖，注入到主程序：
var app = angular.module('app', ['ui.router']);
与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。
<body ng-controller=“ctrl”>
<div ui-view>
</div>
</body>
和ngRoute一样，为特定状态指定的模板将会放在<div ui-view></div>元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', 'PageTab');
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html'
}).state('PageTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('PageTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('PageTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
})
})
基本流程大概就是这样了
分享我自己写的一个小案例。
点击page1，下面内容就会有相应的page1.
点击page2，下面内容就会有相应的page2.
点击page3，下面内容就会有相应的page3.
html文件：
tab1.html
创建如下的html页面
<div>page1</div>
tab2.html
创建如下的html页面
<div>page2</div>
tab3.html
创建如下的html页面
<div>page3</div>
PageTab.html
创建如下的html页面
<div>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab1">page1</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab2">page2</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab3">page3</a>
<div ui-view>
</div>
</div>
请注意：这儿的<div ui-view></div>，要存放的是子页面的内容。它们就是路由配置中需要被展示的页面.
接下来创建main.html
maim.html里面要引入所需要的插件
还有如何实现他们之间的切换
上面PageTab.html中，我们写了ui-sref这个属性。说白了这个属性就是关联的意思。用了’.‘这个符号
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
100px;
height: 60px;
background: red;
color: white;
line-height: 60px;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<div ui-view>
</div>
</body>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-ui-route.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ui.router']);//声明AngularJS模块, 并把ui-router传入AngularJS主模块
app.config(function($stateProvider, $urlRouterProvider) {//声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了.
$urlRouterProvider.when('', 'PageTab');//默认路径路由
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html'
}).state('PageTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('PageTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('PageTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
})
})
</script>
</html>