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