<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/angular-route/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.active{
color:red;
font-size: 30px;
}
</style>
</head>
<body ng-app='app' ng-controller='controller'>
<a ui-sref='page1' href='' ng-click='change(1)' ng-class='{"active":num == 1}'>頁面1</a> //ui-sref進行狀態的跳轉，點擊后觸發page1的狀態，狀態觸發后才會執行控制器函數；
<a ui-sref='page2' ng-click='change(2)' ng-class='{"active":num == 2}'>頁面2</a>
<a ui-sref='page3' ng-click='change(3)' ng-class='{"active":num == 3}'>頁面3</a>
<a ui-sref='page4' ng-click='change(4)' ng-class='{"active":num == 4}'>頁面4</a>
<a ui-sref='page5' ng-click='change(5)' ng-class='{"active":num == 5}'>頁面5</a>
<h1 ng-click='goTo()'>go to p5</h1>
<h1 ui-view></h1> //ui-view 狀態跳轉的頁面會在這里展示
<h1>index</h1>
<script type="text/javascript">
var app=angular.module('app',['ui.router']); //注入ui.router路由模塊
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.when('','/page1'); //$urlRouterProvider初始化跳轉的狀態，首先想展示哪一個頁面
$stateProvider.state('page1',{ //定義狀態，出發此狀態，將會跳轉templateurl頁面
url:'/page1/:id', //：id定義參數；定義方式三種 1./page1/：id/：name 2./page1/{id}/{name}/ 3./page1?id&name 在跳轉頁面用$stateParams接收
templateUrl:"page1.html",
}).state('page2',{
url:'/page2',
templateUrl:"page2.html"
}).state('page3',{
url:'/page3',
templateUrl:"page3.html"
}).state('page4',{
url:'/page4',
templateUrl:"page4.html"
}).state('page5',{
url:'/page5/{id}/{name}',
templateUrl:"page5.html"
controller:function($stateParams){
alert($stateParams.id);}}); //這里可以寫控制器函數。
});
app.controller('controller',function($stateParams,$scope,$state){
console.log($stateParams);
$scope.change=function(num){
$scope.num=num;
};
$scope.goTo=function(){
$state.go('page5',{id:10,name:'wang'}) ; //$state.go()跳轉觸發某一狀態，並傳入一個對象；
}
});
app.controller('page1',function($stateParams){
console.log($stateParams); // 這里將接受到傳入的參數對象
});
app.controller('page2',function($stateParams){
console.log($stateParams);
});
app.controller('page3',function($stateParams){
console.log($stateParams);
});
app.controller('page4',function($stateParams){
console.log($stateParams);
});
app.controller('page5',function($stateParams){
console.log($stateParams);
});
</script>
</body>
</html>
