<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<div class="list-group col-sm-4">
<a href="#index" class="list-group-item " ng-class="{'active':flag}" ng-click="foo(1)">
首页
</a>
<a href="#shop" class="list-group-item" ng-class="{'active':flag1}" ng-click="foo(2)">商城</a>
<a href="#mine" class="list-group-item" ng-class="{'active':flag2}" ng-click="foo(3)">个人中心</a>
</div>
<div ng-view class="col-sm-8">
</div>
</body>
<script>
angular.module("myApp",['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/index',{templateUrl:'tpl/index.html'})
.when('/shop',{templateUrl:'tpl/shop.html'})
.when('/mine',{templateUrl:'tpl/mine.html'})
.otherwise({redirectTo:'/'});
}])
.controller("ctrl",function($scope){
$scope.flag=true;
$scope.flag1=false;
$scope.flag2=false;
$scope.foo=function(num){
if(num==1){
$scope.flag=true
$scope.flag1=false;
$scope.flag2=false;
}else if(num==2){
$scope.flag1=true;
$scope.flag=false;
$scope.flag2=false;
}else{
$scope.flag2=true;
$scope.flag1=false;
$scope.flag=false;
}
}
})
</script>
</html>
index shop mine 为自己写的三个页面
下面的可以写些简单内容
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);