AngularJS 中的ui.router使用方法
一:为什么使用ui-router???如果使用原生router的话,也就是当我们在index.html页面引用 var bookStoreApp = angular.module('bookStoreApp',[
'ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilters','bookStoreServices','bookStoreDirectives'
]);
bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello',{
templateUrl: 'tpls/hello.html',controller: 'HelloCtrl'
}).when('/list',{
templateUrl: 'tpls/bookList.html',controller: 'BookListCtrl'
}).otherwise({
redirectTo: '/hello'
})
});
此时,我们首页默认显示hello,当我们在页面中点击下一页链接的时候,我们跳转到以list为模板的页面。以上是简单的页面跳转,但是如果我们需要稍微复杂一点的页面,例如我们想要写个上面一个是菜单栏,菜单栏下面还有点击的页面,就像是选项卡一样,但是分别进入了不同的页面(实际上是angularjs路由机制中替换了某个模板),如下图所示: 二:怎样使用ui-router???使用 bower install angular-ui-router
3.其次就是添加index.html文件 <!doctype html>
<html ng-app="routerApp">
<head>
<meta charset="UTF-8">
<title>BookStore</title>
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</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>
接下来创建四个模板文件:about.html,home.html.home-list.html和table-data.html,代码如下: <div class="jumbotron text-center">
<h1>Home</h1>
<p>This page demonstrates
<span class="text-danger">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>
home下面有两个链接list和paragraph,这连个模板如下所示: <ul> <li ng-repeat="topic in topics">{{ topic }}</li> </ul>
paragraph页面在app.js里面被直接写入: .state('home.paragraph',{
url: '/paragraph',template: 'I could sure use a scoop of ice-cream.2 '
})
因此,可以不用创建,如果需要更复杂的页面,就需要创建,在这里只是作为演示。 <div class="jumbotron text-center">
<h1>The About Page</h1>
<p>This page demonstrates
<span class="text-danger">multiple</span>and
<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>
about页面里面有两个ui-view,即:columnOne和columnTwo,所以需要另一个模板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>
5.配置页面的路由,即app.js文件 var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
/*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态,那它就会默认将路径路由至 home.html,*这个页面就是状态名称被声明的地方. */
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',templateUrl: 'tpls/home.html'
})
/* nested list with custom controller*/
.state('home.list',{
url: '/list',templateUrl: 'tpls/home-list.html',controller: function($scope) {
$scope.topics = ['Butterscotch','Black Current','Mango'];
}
})
// nested list with just some random string data
.state('home.paragraph',template: 'I could sure use a scoop of ice-cream.2 '
})
.state('about',{
url: '/about',/* view 用在该状态下有多个 ui-view 的情况,可以对不同的 ui-view 使用特定的 template,controller,resolve data 绝对 view 使用 '@' 符号来区别,比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的 模板(template),相对 view 则无*/
views: {
// 无名 view
'': {
templateUrl: 'tpls/about.html'
},// for "ui-view='columnOne'"
'columnOne@about': {
template: '这里是第一列的内容'
},// for "ui-view='columnTwo'"
'columnTwo@about': {
templateUrl: 'tpls/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
}];
});
最后写一下需要学习更多的童鞋,github网址:angular-ui/ui-router的github链接地址 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |