ui-router使用方法
2016-05-09 15:05
591 查看
index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-ui-router.js"></script>
</head>
<body ng-app="myApp">
<h1>AngularJS Home Page </h1>
<div ui-view=""></div>
<script>
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider ) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('PageTab', {
url: '/',
templateUrl: 'pageTab.html',
}).state("PageTab.Page1", {
url:"Page1",
views:{ps:这里的“”名字对应ui-view=""的值，说明一个页面可以有多个ui-view
"":{ templateUrl: "page1.html"},
"abc": {templateUrl: "page2.html"}
},
controller:function($scope){
}
})
.state("PageTab.Page2", {
url:"Page2",
templateUrl: "page2.html"，
controller:
'page2Ctrl',
css:
'page1/page2.css'
})
.state("PageTab.Page3", {
url:"Page3",
templateUrl: "page3.html"
});
}]);
</script>
</body>
</html>
pageTab.html页面
<div>
<div>
<span style="width:100px"><a ui-sref=".Page1">Page-1</a></span>
<span style="width:100px"><a ui-sref=".Page2">Page-2</a></span>
<span style="width:100px"><a ui-sref=".Page3">Page-3</a></span>
</div>
<div>
<div ui-view=""></div>
<div ui-view="abc"></div>
</div>
</div>
</div>
page1.html页面
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
page2.html页面
<div>
<div>
<h1>Page 2 content goes here...</h1>
</div>
</div>
这里就是多个view的情况
$state.go('index.a')
$state.go('^')到上一级,比如从photo.a到index
$state.go('^.b')到相邻state,比如从index.a到index.b
$state.go('^.index.a')到孙子级state，比如从index.a到index.a.a
多页面的时候加载不同的js
//注入不同页面的controller
app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide', function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
app.value = $provide.value;
}]);
//实现不同
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html',
}).state("PageTab.Page1", {
url:"/Page1",
templateUrl: 'Page1.html',
resolve:{
deps:['$ocLazyLoad',function($ocLazyLoad){
return $ocLazyLoad.load('page1.js').then(function(){
console.log('loaded!!');
},function(e){
console.log('errr');
console.error(e);
});
}]
},
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-ui-router.js"></script>
</head>
<body ng-app="myApp">
<h1>AngularJS Home Page </h1>
<div ui-view=""></div>
<script>
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider ) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('PageTab', {
url: '/',
templateUrl: 'pageTab.html',
}).state("PageTab.Page1", {
url:"Page1",
views:{ps:这里的“”名字对应ui-view=""的值，说明一个页面可以有多个ui-view
"":{ templateUrl: "page1.html"},
"abc": {templateUrl: "page2.html"}
},
controller:function($scope){
}
})
.state("PageTab.Page2", {
url:"Page2",
templateUrl: "page2.html"，
controller:
'page2Ctrl',
css:
'page1/page2.css'
})
.state("PageTab.Page3", {
url:"Page3",
templateUrl: "page3.html"
});
}]);
</script>
</body>
</html>
pageTab.html页面
<div>
<div>
<span style="width:100px"><a ui-sref=".Page1">Page-1</a></span>
<span style="width:100px"><a ui-sref=".Page2">Page-2</a></span>
<span style="width:100px"><a ui-sref=".Page3">Page-3</a></span>
</div>
<div>
<div ui-view=""></div>
<div ui-view="abc"></div>
</div>
</div>
</div>
page1.html页面
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
page2.html页面
<div>
<div>
<h1>Page 2 content goes here...</h1>
</div>
</div>
这里就是多个view的情况
$state.go('index.a')
$state.go('^')到上一级,比如从photo.a到index
$state.go('^.b')到相邻state,比如从index.a到index.b
$state.go('^.index.a')到孙子级state，比如从index.a到index.a.a
多页面的时候加载不同的js
//注入不同页面的controller
app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide', function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
app.value = $provide.value;
}]);
//实现不同
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html',
}).state("PageTab.Page1", {
url:"/Page1",
templateUrl: 'Page1.html',
resolve:{
deps:['$ocLazyLoad',function($ocLazyLoad){
return $ocLazyLoad.load('page1.js').then(function(){
console.log('loaded!!');
},function(e){
console.log('errr');
console.error(e);
});
}]
},
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- hdoj-5301-Buildings
- 347. Top K Frequent Elements【M】【VIP】【字典排序】
- 347. Top K Frequent Elements
- [BS-17] iOS开发-Alpha,Hidden和Opaque区别
- Installation error: INSTALL_FAILED_UID_CHANGED解决方案
- 第九章 UITableView编辑模式笔记
- 限制UITextView输入字数（兼容iOS7）
- UIInterfaceOrientation和UIDeviceOrientation的区别
- UIGraphics 绘制饼图
- UE4 减少APK包的大小
- JDBC Request的用法
- iOS之UI学习-UITextField属性篇
- vue中v-bind:class动态添加class
- UIGraphics 向图片上写字
- 限制UITextField只能输入数字
- UITextView 文字莫名其妙垂直居中解决办法
- ${pageContext.request.contextPath} JSP取得绝对路径
- 通过layout实现可拖拽自动排序的UICollectionView
- 通过UITableViewCell获取indexPath
- iOS UICollectionView 瀑布流