ui-router使用方法

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页面

page1.html页面

<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>

page2.html页面

扫描二维码关注公众号，回复： 2659308 查看本文章

<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);
});
}]
},
})

猜你喜欢