還記得我們剛開始學習html時使用的錨節點實現跳轉嗎？
<a href="#target">我想跳轉至目標位置</a> <p>第一條</p> .... <p id="#target">我是目標位置</p> ...
在js中實現跳轉也是利用了這一點，下面直接在代碼中解釋吧：
1 <body> 2 <ul> 3 <li><a href="#/music">音樂</a></li> 4 <li><a href="#/friend">朋友</a></li> 5 </ul> 6 <div id="view"> 7 <!--頁面上需要修改的內容--> 8 </div> 9 </body> 10 <script> 11 window.addEventListener('hashchange', function(){ //hashchange 事件在當前 URL 的錨部分(以 '#' 號為開始) 發生改變時觸發 。 12 console.log(location.hash); //輸出結果見下圖： 13 var view=document.getElementById('view'); //獲取頁面中想要插入元素的id 14 switch(location.hash){ 15 case '#/music': //利用switch case來判斷當前點擊的錨節點是什么 ，同時設置相應的內容 16 view.innerHTML='音樂'; 17 break; 18 case '#/friend': 19 view.innerHTML="朋友"; 20 break; 21 } 22 }) 23 </script>
接下來是在angulajs框架里如何使用路由切換實現單頁面跳轉：
直接代碼中解釋好了：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body ng-app="myApp"> 8 <ul> 9 <li><a href="#/first">第一種方式</a></li> 10 <li><a href="#/second">第二種方式</a></li> 11 <li><a href="#/third">第三種方式</a></li> 12 <li><a href="#/fourth">第四種方式</a></li> 13 </ul> 14 <div ng-view> 15 <!--頁面上需要修改的內容--> 16 </div> 17 </body> 18 <script src="../../angular-1.5.8/angular.js"></script> 19 <script src="../../angular-1.5.8/angular-route.js"></script> 20 <script> 21 // 創建模塊 22 var app=angular.module('myApp',['ngRoute']); 23 24 //寫路由表 25 app.config(function($routeProvider){ 26 $routeProvider 27 .when('/first',{ 28 template:'<h1>第一種方式：直接寫入進來</h1>' 29 }) 30 .when('/second',{ 31 template:'<h1>{{secondWay}}</h1>', 32 controller:function($scope){ //這里是匿名的控制器 33 $scope.secondWay='第二種方式：使用匿名的controller的方式' 34 } 35 }) 36 .when('/third',{ 37 template:'<h1>{{thirdWay}}</h1>', 38 controller:'myCtrl' //第三種方式：使用命名的myCtrl的控制器寫入 39 }) 40 .when('/fourth',{ 41 templateUrl:'mytemplate.html', 42 controller:'myCtrl2' 43 // 第四種方式：angularjs跳轉到模板所在路徑實現方法 44 }) 45 //以下為當我們在地址欄輸入錯誤的路徑時處理的結果 46 // .otherwise({ 47 // template:'<h1>{{extraError}}</h1>', 48 // controller:function($scope){ 49 // $scope.extraError='這里是路徑錯誤時產生的文字'; 50 // } 51 // }) 52 // 53 //不過一般我們會默認的讓它跳轉到一個頁面 54 .otherwise({ 55 redirectTo:'/first' //默認第一個單頁面 56 }); 57 }) 58 59 //對應上面的第三種方式：有控制器名稱的用法 60 app.controller('myCtrl',function($scope){ 61 $scope.thirdWay='第三種方式：這是使用有名字的控制器的方法'; 62 }); 63 //對應上面的第四種寫法：有控制器名稱並鏈入模板頁面 64 app.controller('myCtrl2',function($scope){ 65 $scope.fourthWay='第四種方式：這是從外部html模板中獲取的數據'; 66 }); 67 </script> 68 </html>
重要補充說明：
1.第四種方式需要在額外創建一個名為"mytemplate.html"的頁面
（因為templateUrl屬性值是一個url路徑,路徑指向一個html模板,html模板會填充(或替換)指令內容）：
頁面內容為：
2.在設置ng-app（angualar作用范圍）時注意是放在body里面，我一開始放在了ul里，結果導致報錯.
3.其次注意需要使用當有服務的代碼編輯器打開，（webStorm可以）即地址欄是http://localhost:63342/...
如果直接打開,或者在（sublime）中運行，即以：file:///D:/ ... 就不是在服務器上運行那么它就會出錯：顯示：mytemplate.html那個頁面無法加載：
個人理解，如有不足，希望各位大神留言補充~