UI-Router是angular路由插件，上一篇我们讲到了angularJS自带路由，可惜在路径嵌套上表现的有所欠缺，而angular-UI-Router插件正好弥补了这一点。
[示例]：
□、UIRoute3.html： //先写总的路由文件
<!doctype html>
<html ng-app="routerApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/angular-1.3.0.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-ui-router.js"></script> //用angular-ui-router.js代替上一篇所讲到的angular-route.js
<script src="UIRoute3.js"></script> //自定义路由文件UIRoute3.js
</head>
<body>
<div ui-view></div> //在ui-view中生成视图
</body>
</html>
□、UIRoute3.js：
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index'); //与原生的$routerProvider写法不一样的就是$urlRouterProvider先写默认路径
$stateProvider //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法
.state('index', {
url: '/index',
views: {
'': {
templateUrl: 'tpls3/index.html' //看到templateUrl:后面包含了很多的模板
},
'topbar@index': {
templateUrl: 'tpls3/topbar.html'
},
'main@index': {
templateUrl: 'tpls3/home.html'
}
}
})
.state('index.usermng', {
url: '/usermng',
views: {
'main@index': {
templateUrl: 'tpls3/usermng.html',
controller: function($scope, $state) {
$scope.addUserType = function() {
$state.go("index.usermng.addusertype");
}
}
}
}
})
.state('index.usermng.highendusers', {
url: '/highendusers',
templateUrl: 'tpls3/highendusers.html'
})
.state('index.usermng.normalusers', {
url: '/normalusers',
templateUrl: 'tpls3/normalusers.html'
})
.state('index.usermng.lowusers', {
url: '/lowusers',
templateUrl: 'tpls3/lowusers.html'
})
.state('index.usermng.addusertype', {
url: '/addusertype',
templateUrl: 'tpls3/addusertypeform.html',
controller: function($scope, $state) {
$scope.backToPrevious = function() {
window.history.back();
}
}
})
.state('index.permission', {
url: '/permission',
views: {
'main@index': {
template: '这里是权限管理'
}
}
})
.state('index.report', {
url: '/report',
views: {
'main@index': {
template: '这里是报表管理'
}
}
})
.state('index.settings', {
url: '/settings',
views: {
'main@index': {
template: '这里是系统设置'
}
}
})
});
□、模板文件分别如下：
1、tpls3/index.html:
<div class="container">
<div ui-view="topbar"></div>
<div ui-view="main"></div>
</div>
2、tpls3/topbar.html:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">ui-router综合实例</a>
</div>
<ul class="nav navbar-nav">
<li>
<a ui-sref="index">首页</a>
</li>
<li>
<a ui-sref="index.usermng">用户管理</a>
</li>
<li>
<a ui-sref="index.permission">权限管理</a>
</li>
<li>
<a ui-sref="index.report">报表管理</a>
</li>
<li>
<a ui-sref="index.settings">系统设置</a>
</li>
</ul>
</nav>
3、 'tpls3/home.html'：
<div class="jumbotron text-center">
<h2>首页</h2>
<p>
首页的形式一般比较<span class="text-danger">灵活</span>，而且可能随时发生变化。
</p>
</div>
4、'tpls3/usermng.html'：
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="list-group">
<a ui-sref="#" class="list-group-item active">用户分类</a>
<a ui-sref="index.usermng.highendusers" class="list-group-item">高端用户</a>
<a ui-sref="index.usermng.normalusers" class="list-group-item">中端用户</a>
<a ui-sref="index.usermng.lowusers" class="list-group-item">低端用户</a>
<a ui-sref="#" class="list-group-item">黑名单</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" ng-click="addUserType()">新增用户</button>
</div>
</div>
</div>
<div class="col-md-9">
<div ui-view></div>
</div>
</div>
5、'tpls3/highendusers.html'：
<div class="row">
<div class="col-md-12">
<h3>高端用户列表</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>作品</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>中华烟云</td>
<td>29</td>
<td>《用AngularJS开发下一代WEB应用》</td>
</tr>
<tr>
<td>中华烟云</td>
<td>29</td>
<td>《用AngularJS开发下一代WEB应用》</td>
</tr>
<tr>
<td>2</td>
<td>中华烟云</td>
<td>29</td>
<td>《Ext江湖》</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">中华烟云</td>
<td>《ActionScript游戏设计基础（第二版）》</td>
</tr>
</tbody>
</table>
</div>
</div>
6、'tpls3/normalusers.html'：
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong>This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong>Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
7、'tpls3/lowusers.html'：
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>Star</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span>Star</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star"></span>Star</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span>Star</button>
</div>
8、'tpls3/addusertypeform.html'：
<h3>新增用户</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">
邮箱：
</label>
<div class="col-md-10">
<input type="email" class="form-control" placeholder="推荐使用126邮箱">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">
密码：
</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="只能是数字、字母、下划线">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox">自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-primary" ng-click="backToPrevious()">返回</button>
</div>
</div>
</form>
8个模板文件