效果图：
1 <!DOCTYPE html>
2 <html ng-app="app" >
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>route-1</title>
6 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
7 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
8 <style type="text/css">
9 #d2{
10 200px;
11 height: 80px;
12 background-color: #a6beee;
13 }
14 </style>
15 </head>
16 <body>
17 <div>
18 <a href="#/">首页</a>
19 <a href="#/book">图书页</a>
20 <a href="#/phone">手机</a>
21 </div>
22 <div ng-view id="d2"></div>
23 </body>
24
25 <script type="text/javascript">
26 var app=angular.module("app",['ngRoute']);
27 app.config(["$routeProvider", function ($routeProvider) {
28 $routeProvider.
29 when('/',{
30 controller:'c1',
31 template:'<div class="focus">{{title}}</div>'
32 })
33 .when('/book',{
34 controller:'c2',
35 template:'<div class="focus">{{title}}</div>'
36 })
37 .when('/phone',{
38 controller:'c3',
39 template:'<div class="focus">{{title}}</div>'
40 })
41 .otherwise({
42 redirectTo:'/'
43 })
44
45 }]);
46 app.controller("c1",["$scope", function ($scope) {
47 $scope.title="首页";
48 }]);
49 app.controller("c2",["$scope", function ($scope) {
50 $scope.title="图书页";
51 }]);
52 app.controller("c3",["$scope", function ($scope) {
53 $scope.title="手机页";
54 }])
55 </script>
56 </html>
<!DOCTYPE html>
<html ng-app="app" >
<head lang="en">
<meta charset="UTF-8">
<title>route-1</title>
<script src="http://apps.bdimg.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 type="text/css">
#d2{
200px;
height: 80px;
background-color: #a6beee;
}
</style>
</head>
<body>
<div>
<a href="#/">首页</a>
<a href="#/book">图书页</a>
<a href="#/phone">手机</a>
</div>
<div ng-view id="d2"></div>
</body>
<script type="text/javascript">
var app=angular.module("app",['ngRoute']);
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider.
when('/',{
controller:'c1',
template:'<div class="focus">{{title}}</div>'
})
.when('/book',{
controller:'c2',
template:'<div class="focus">{{title}}</div>'
})
.when('/phone',{
controller:'c3',
template:'<div class="focus">{{title}}</div>'
})
.otherwise({
redirectTo:'/'
})
}]);
app.controller("c1",["$scope", function ($scope) {
$scope.title="首页";
}]);
app.controller("c2",["$scope", function ($scope) {
$scope.title="图书页";
}]);
app.controller("c3",["$scope", function ($scope) {
$scope.title="手机页";
}])
</script>
</html>