<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
display: inline-block;
200px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #000;
text-decoration: none;
}
.blue{
background: blue;
color: #fff;
}
.ff{
background: none;
color: #000;
}
h2{
color: red;
}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js
"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js
"></script>
<script>
var myapp=angular.module("myapp",["ngRoute"]);
myapp.config(function($routeProvider){
console.log($routeProvider);
$routeProvider.when("/home",{
templateUrl:"views/home.html",
controller:"homeCtrl"
}).when("/detail",{
templateUrl:"views/detail.html",
controller:"detailCtrl"
}).when("/news",{
templateUrl:"views/news.html"
}).otherwise({
redirectTo:"/home"
})
});
myapp.controller("myCtrl",function($scope){
$scope.name="a";
$scope.dj="sy";
$scope.sx="sy";
$scope.fun=function(name){
$scope.dj=name;
};
$scope.get=function(item){
$scope.sx=item;
if($scope.dj==$scope.sx){
return "blue"
}else{
return "ff"
}
}
});
myapp.controller("homeCtrl",function($scope){
$scope.name="首页控制";
});
myapp.controller("detailCtrl",function($scope){
$scope.name="详情控制";
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p>{{name}}</p>
<a href="#home" class="blue" ng-click="fun('sy')" ng-class="get('sy')">首页</a>
<a href="#detail" ng-click="fun('xq')" ng-class="get('xq')">详情页</a>
<a href="#news" ng-click="fun('xw')" ng-class="get('xw')">新闻页</a>
<ng-view>
</ng-view>
</body>
</html>
//例如
<h2>这是首页</h2>
其他页面可以用<p>{{name}}</p>