? ?? ????? AngularJS ??? ?? ???? ?????. ??? ? ??? ?? ??? ?????. ?? ??? ??? ????.
AngularJS ????????? HTML ??? ??? ??? ??? ?? ?? ????? ??? ??? ? ????. ?? ?? ??? ?? ?? ??? ??? ?? ????? ?? ??? ???? ???? ?? ?? ??? ?? ?? ????.
?? ??? ??? ??? ???????.
? ? ??? ??? html? html? ?? ??? ? ?? html ?????. page2.html. ??? ? ? ??? ?????.
<!--page1.html內(nèi)容-->
<div>
<p>《南鄉(xiāng)子·登京口北固亭有懷》</p>
<p>何處望神州？滿眼風(fēng)光北固樓。千古興亡多少事，悠悠，不盡長江滾滾流。</p>
<p>年少萬兜鍪，坐斷東南戰(zhàn)未休。天下英雄誰敵手，曹劉。生子當(dāng)如孫仲謀。</p>
</div>
<!--page2.html內(nèi)容-->
<div>
<p>《蝶戀花》</p>
<p>佇倚危樓風(fēng)細細，望極春愁，黯黯生天際。草色煙光殘照里，無言誰會憑闌意。</p>
<p>擬把疏狂圖一醉，對酒當(dāng)歌，強樂還無味。衣帶漸寬終不悔，為伊消得人憔悴。</p>
</div>
???? ? ? ?? ??? ???? ??? ???????.
<!DOCTYPE html>
<html ng-app="routeMod">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>
<link type="text/css" href="css/tutorial07.css" rel="stylesheet">
<title>tutorial07.html</title>
</head>
<body>
<header>
Header
</header>
<div id="content" ng-controller="MultiViewController">
<div id="myView" ng-view="myView" ng-init="init()">
</div>
<div id="btnDiv">
<button ng-click="prePage()">上一頁</button>
<button ng-click="nextPage()">下一頁</button>
</div>
</div>
<footer>
Copyright:Rongbo_J
</footer>
<script>
var routeMod = angular.module('routeMod', ['ngRoute']);
routeMod.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/1',{
templateUrl:'tutorial07/page1.html',
controller:'MultiViewController'
})
.when('/2',{
templateUrl:'tutorial07/page2.html',
controller:'MultiViewController'
})
}])
routeMod.controller("MultiViewController",function($scope,$log,$location){
$scope.init = function () {
$location.path("/1");
}
$scope.prePage = function () {
$log.info("prePage");
$location.path("/1");
};
$scope.nextPage = function () {
$log.info("nextPage");
$location.path("/2");
};
});
</script>
</body>
</html>
???? AngularJs? ??? ?? ngRoute? ???? ???. ?? ??? ?? ??? ????? angle-route.js ??? ????? ????. ???? ???.
<script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>
?? ?? ?? ??? ???? ??? ??? ????.
var routeMod = angular.module('routeMod', ['ngRoute']);
?? ??? html ??? ??? ??? ???? ????. ??? config ??? $routeProvider ???? ???? ?? ??? ??? ????.
routeMod.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/1',{
templateUrl:'tutorial07/page1.html',
controller:'MultiViewController'
})
.when('/2',{
templateUrl:'tutorial07/page2.html',
controller:'MultiViewController'
})
}]) ng-view ???? ?? ?? ???? $location.path() ???? ?????. ??? ??? ???? ???????. ?? ?????.