1.第一種
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body ng-controller="show">
<div>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ng-click="$location.path('aaa')">首頁</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ng-click="$location.path('bbb')">詳情頁</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ng-click="$location.path('ccc')">購物車</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ng-click="$location.path('ddd')">個人中心</a>
</div>
<div ng-view></div>
</body>
<script src="http://cdn.bootcss.com/angular.js/1.4.9/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.4.9/angular-route.js"></script>
<script type="text/javascript">
var my = angular.module('myApp',['ngRoute']);
my.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa',{
template : '<p>這是我的首頁，漂亮吧！{{text}}</p>',
controller : 'show'
})
.when('/bbb',{
template : '<p>這是我的詳情頁，漂亮吧！{{text}}</p>',
controller : 'hide'
})
.when('/ccc',{
template : '<p>這是我的購物車，漂亮吧！{{text}}</p>',
controller : 'showhide'
})
.when('/ddd',{
template : '<p>這是我的個人中心，漂亮吧！{{text}}</p>',
controller : 'hideshow'
})
.otherwise("/aaa")
}])
my.controller('show',['$scope','$location',function($scope,$location){
$scope.text = '111';
$scope.$location = $location;
}]);
my.controller('hide',['$scope','$location',function($scope,$location){
$scope.text = '222';
$scope.$location = $location;
}]);
my.controller('showhide',['$scope','$location',function($scope,$location){
$scope.text = '333';
$scope.$location = $location;
}]);
my.controller('hideshow',['$scope','$location',function($scope,$location){
$scope.text = '444';
$scope.$location = $location;
}]);
</script>
</html>
2.第二種
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body ng-controller="show">
<div>
<a href="#aaa" target="_blank" rel="external nofollow" >首頁</a>
<a href="#bbb" target="_blank" rel="external nofollow" >詳情頁</a>
<a href="#ccc" target="_blank" rel="external nofollow" >購物車</a>
<a href="#ddd" target="_blank" rel="external nofollow" >個人中心</a>
</div>
<div ng-view></div>
</body>
<script src="http://cdn.bootcss.com/angular.js/1.4.9/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.4.9/angular-route.js"></script>
<script type="text/javascript">
var my = angular.module('myApp',['ngRoute']);
my.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa',{
template : '<p>這是我的首頁，漂亮吧！{{text}}</p>',
controller : 'show'
})
.when('/bbb',{
template : '<p>這是我的詳情頁，漂亮吧！{{text}}</p>',
controller : 'hide'
})
.when('/ccc',{
template : '<p>這是我的購物車，漂亮吧！{{text}}</p>',
controller : 'showhide'
})
.when('/ddd',{
template : '<p>這是我的個人中心，漂亮吧！{{text}}</p>',
controller : 'hideshow'
})
.otherwise({
redirectTo : '/aaa'
})
}])
my.controller('show',['$scope',function($scope){
$scope.text = '111'
}]);
my.controller('hide',['$scope',function($scope){
$scope.text = '222'
}]);
my.controller('showhide',['$scope',function($scope){
$scope.text = '333'
}]);
my.controller('hideshow',['$scope',function($scope){
$scope.text = '444'
}]);
</script>
</html>
![angular離線部署[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)