ui-router是为实现多视图与视力的嵌套而开发出来的第三方的AngularJS插件。大多数的开发都不使用AngularJS自带的路由模块,而使用ui-router路由。
准备工作
额外引入文件
<script src="lib/angular-ui-router.min.js"></script>
Example
html页面
1、入口页面–index.html
<!--页面中只需要在一个DIV中添加ui-view。在控制器中视图的改变会不断更换DIV中的内容。-->
<div ui-view></div>
2、导航模板–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、首页模板 – home.html
<div class="jumbotron text-center">
<h2>首页</h2>
<p>
首页的形式一般比较<span class="text-danger">灵活</span>,而且可能随时发生变化。
</p>
</div>
4、用户管理页面模板–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>
还有highendusers.html,normalusers.html,lowusers.html模板,纯HTML展示内容
js文件
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {
url: '/index',
views: {
'': {
templateUrl: 'tpls3/index.html'
},
'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();
}
}
})
});