用AngularJS路由實現web頁面跳轉
阿新 • • 發佈：2019-02-17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!--引入路由檔案-->
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<style>
li{
float: left;
margin-left: 25px;
list-style: none;
}
</style>
</head>
<body ng-app='routeDemo'>
<!--左邊欄-->
<div id="navigator" style="width: 100%;display: inline-block;background-color: paleturquoise;height: 200px;">
<!--選單-->
<ul>
<li><a href="#/home">首頁</a></li>
<li><a href="#/woman">音樂</a></li>
<li><a href="#/man">遊戲</a></li>
</ul>
</div>
<!--右邊欄-->
<div style="width: 100%;display: inline-block;height: 400px;">
<div ng-view=""></div>
</div>
</body>
<script type="text/ng-template" id="index.home.html">
<h1>歡迎登陸八維線上首頁</h1>
</script>
<script type="text/ng-template" id="index.woman.html">
<h1>這是音樂模板</h1>
</script>
<script type="text/ng-template" id="index.man.html">
<h1>這是遊戲模板</h1>
</script>
<script type="text/javascript">
angular.module('routeDemo',['ngRoute'])
.controller('HomeController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('WomanController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('WomanController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('ManController',function ($scope,$route) {
$scope.$route = $route;
})
//配置$routeProvider用來定義路由規則
//$routeProvider為我們提供了when（path，object）& other(object)函式按順序定義所有路由，函式包含兩個引數：
//@param1:url或者url正則規則
//@param2：路由配置物件
.config(function($routeProvider){
$routeProvider.
when('/home',{
//templateURL：插入ng-view的HTML模板檔案
templateUrl:'index.home.html',
controller:'HomeController'
}).
when('/woman',{
templateUrl:'index.woman.html',
controller:'WomanController'
}).
when('/man',{
templateUrl:'index.man.html',
controller:'ManController'
})
})
</script>
</html>