AngularJs之angular-ui-router
2018-08-22 本文已影响0人
b08d45cdf2ac
AngularJS中提供ngRoute路由模块实现路由切换，在1.2+后的版本独立出来angular-router.js，但是在遇到路由深层次嵌套的情况下，该模块就力不从心，这时就需要angular-ui-router登场。
Angularjs
1. 目录结构
目录结构
-
app文件夹为项目资源主文件夹 -
plugin为引入的框架和库文件夹 -
templates为各模板的文件夹 -
index.html项目启动主页 -
app.js为项目启动js文件
2. 主页index.html
<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<meta charset="UTF-8">
<title>ui router</title>
<link rel="stylesheet" href="plugin/bootstrap.min.css" />
<script type="text/javascript" src="plugin/angular.min.js" ></script>
<script type="text/javascript" src="plugin/angular-ui-router.min.js" ></script>
<script type="text/javascript" src="js/app.js" ></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-brand" ui-sref="#">AngularUI Router</div>
<ul class="nav navbar-nav">
<li>
<a ui-sref="home">Home</a>
</li>
<li>
<a ui-sref="about">About</a>
</li>
</ul>
</nav>
<div class="container">
<div ui-view="">
</div>
</div>
</body>
</html>
这里定义了一个angularjs应用ng-app="routerApp"，定义了两个路由ui-sref="home"、ui-sref="about"，<div ui-view=""></div>为路由显示容器。
3. 第一种方式路由home页home.html
<div class="jumbotron text-center">
<h1>Home</h1>
<p>This Page Demonstartes
<span class="text-denger">nested</span>views.
</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view>
</div>
这里定义了两个二级路由ui-sref=".list"、ui-sref=".paragraph"，<div ui-view></div>为路由显示容器。
4. 二级路由.list页home-list.html
<ul>
<li ng-repeat="topic in topics">
{{topic}}
</li>
</ul>
5. 第二种方式路由视图about页about.html
<div class="jumbotron text-center">
<h1>The About Page</h1>
<p>This Page demonstrates
<span class="text-danger">multiple</span>
<span class="text-danger">named</span>views.
</p>
</div>
<div class="row">
<div class="col-md-6">
<div ui-view="columnOne"></div>
</div>
<div class="col-md-6">
<div ui-view="columnTwo"></div>
</div>
</div>
这里定义了两个视图块ui-view="columnOne"、ui-view="columnTwo"，来显示不同的模板。
6. 二级路由视图columnTwo@about页table-data.html
<h2>Ice-Creams</h2>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="topic in topics">
<td>{{topic.name}}</td>
<td>${{topic.price}}</td>
</tr>
</tbody>
</table>
7. 设置app.js，定义angualrjs模块，路由状态管理，控制器
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider.state('home',{
url: '/home',
templateUrl: 'templates/home.html'
}).state('home.list',{
url: '/list',
templateUrl: 'templates/home-list.html',
controller: function($scope){
$scope.topics = ['Butterscotch', 'Black Current', 'Mango'];
}
}).state('home.paragraph', {
url: '/paragraph',
template: '666，paragraph页面'
}).state('about',{
//多个ui-view的情况
url: '/about',
views: {
//，没有指定view
'': {
templateUrl: 'templates/about.html'
},
// ui-view='colnumOne'
'columnOne@about': {
template: '这里是第一列的内容'
},
// ui-view='columnTwo'
'columnTwo@about': {
templateUrl: 'templates/table-data.html',
controller: 'table-Controller'
}
}
})
}]);
routerApp.controller('table-Controller', function($scope){
$scope.message = 'test';
$scope.topics = [{
name: 'Butterscotch',
price: 50
},
{
name: 'Black Current',
price: 100
},
{
name: 'Mango',
price: 20
}];
});
在angularjs主模块注入ui.router依赖，在模块配置中配置$stateProvider、$urlRouterProvider用于状态管理和url管理的服务，当没有路由匹配时执行$urlRouterProvider.otherwise('/home');，在state()方法第一个参数用.表示二级路由；当涉及多个ui-view时使用childName@parentName子视图名+@+父级路由名方式定义视图。再配合angular-animate可以实现丰富的切换效果和复杂的路由效果。
