<!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-route.js" ></script>
</head>
<body ng-app="myApp" >
<div id="navigator" style="width: 100%;display: inline-block;background-color:red;height:400px>
<!--菜單-->
<ul style="float: left;">
<li style="float: left;"><a href="#/home">首頁(yè)</a></li>
<li style="float: left;"><a href="#/woman">女裝</a></li>
<li style="float: left;"><a href="#/man">男裝</a></li>
<li style="float: left;"><a href="#/life">生活用品</a></li>
<li style="float: left;"><a href="#/cook">廚房用品</a></li>
</ul>
</div>
<div style="width: 80%;display: inline-block;background-color: green;height: 400px">
<div ng-view=""></div>
</div>
</body>
<script type="text/ng-template" id="index.home.html">
<div style="background: blueviolet;">sss</div>
<div style="background: blueviolet;">sss</div>
</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/ng-template" id="index.life.html">
<h1>這是生活館</h1>
</script>
<script type="text/ng-template" id="index.cook.html">
<h1>這是廚房用品</h1>
</script>
<script>
angular.module('myApp',['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;
})
.controller('LifeController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('CookController',function ($scope,$route) {
$scope.$route = $route;
})
//配置$routeProvider用來定義路由規(guī)則
//$routeProvider為我們提供了when（path，object）& other(object)函數(shù)按順序定義所有路由，函數(shù)包含兩個(gè)參數(shù)：
//@param1:url或者url正則規(guī)則
//@param2：路由配置對(duì)象
.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'
}).
when('/life',{
templateUrl:'index.life.html',
controller:'LifeController'
}).
when('/cook',{
templateUrl:'index.cook.html',
controller:'CookController'
})
})
</script>
</html>
Demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script>
var app=angular.module("myApp",["ngRoute"]);
app.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/",{template:"這是主頁(yè)面"})
.when("/book",
{templateUrl:"book.html",
controller:"bookcontroller"
})
.when("/car",
{templateUrl:"car.html",
controller:"carcontroller"
})
.otherwise({redirectTo:"/"});
}]);
app.controller("bookcontroller",function($scope){
$scope.name="這是圖書d";
});
app.controller("carcontroller",function($scope){
$scope.name="這是汽車d";
});
app.controller("myCtrl",function($scope,$location){
$scope.goToUrl=function(path){
$location.path(path);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li><a href="#/">主頁(yè)</a></li>
<li><a href="#/book">圖書</a></li>
<!--<li><a href="#/baidu">百度</a></li>-->
<li><a href="#/car">購(gòu)物車</a></li>
<li><a href="#/aasdfsdfa">其他</a></li>
<button ng-click="goToUrl('/')">主頁(yè)面</button>
</ul>
<div ng-view></div>
<script type="text/ng-template" id="book.html">
{{name}}
</script>
<script type="text/ng-template" id="car.html">
{{name}}
</script>
</body>
</html>
