<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/angularjs.js"></script>
<script src="../js/angular-route.min.js"></script>
<style type="text/css">
body{
font-size: 32px;
}
.show{
background: #eeeeee;
padding: 8px;
500px;
margin:8px 0px;
}
</style>
</head>
<body>
<div>
<div>
<a href="#/">首页</a>
<a href="#/book">图书</a>
<a href="#/game">游戏</a>
</div>
<div ng-view></div>
</div>
</body>
<script>
var app=angular.module('myapp',['ngRoute']);
app.controller('sub1',function($scope){
$scope.title="老王1";
});
app.controller('sub2',function($scope){
$scope.title="老王2";
});
app.controller('sub3',function($scope){
$scope.title="老王3";
});
app.config(function($routeProvider) {
$routeProvider.when('/',{
controller:"sub1",
template:"<div class='show'>{{title}}</div>"
})
.when('/book',{
controller:"sub2",
template:"<div class='show'>{{title}}</div>"
})
.when('/game',{
controller:"sub3",
template:"<div class='show'>{{title}}</div>"
})
.otherwise({ redirectTo: '/' });
})
</script>
</html>
angular-route.min.js是路由的插件