本文執行個體講述了AngularJS通過ng-route實現基本的路由功能。分享給大家供大家參考，具體如下：
為什麼需要前端路由~
（1）AJAX不會留下History記錄
（2）使用者無法通過URL進入應用指定的頁面（書籤或者分享等）
（3）AJAX對於SEO是一個災難
1.一般情況下，我們訪問網頁的時候，是通過url地址。
比如我們訪問一個網頁:https://www.baidu.com/index/fix.html
在AngularJS中通過“#”來進行不同頁面的路由，比如：
https://www.baidu.com/#/first，這個請求在向網頁端傳輸的時候，伺服器會自動忽略#之後的內容，因此可以根據#+標記協助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。
這是一個簡單的路由控制介面，根據連結中的#/first和#/second分別對應跳轉到不同的頁面。
2.通過angularjs中的路由模組，實現ng-route的步驟
（1）載入包含ng-route的JS檔案
（2）包含了 ngRoute 模組作為主應用模組的相依模組。
（3）使用原生指令ng-view
（4）我們在html中定義連結，可以實現一個單頁應用，比如連結可以這樣定義：
|
<body>
<ul>
<li><ahref="#/">首頁</a></li>
<li><ahref="#/first">第一頁面</a></li>
<li><ahref="#/second">第二頁面</a></li>
<li><ahref="#/third">第三頁面</a></li>
</ul>
<divng-view></div>
</body>
|
在js中的定義路由代碼為：
|
angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{template:'這是首頁頁面'})
.when('/first',{template:'這是第一個頁面'})
.when('/second',{template:'這是第二個頁面'})
.when('/third',{template:'這是第三個頁面'})
.otherwise({redirectTo:'/'});
}]);
|
（6）我們來看效果，首次當未有連結切換時候，預設的跳轉到首頁，效果如下：
當依次點選連結時，會依次切換ng-view中的值，並且實現了ng-view內內容的替換~
I）初始效果
II）切換後的效果
我們發現改變的僅僅是#後的值，並沒有頁面的跳轉和重新整理
3.angularJS中的路由設定對象
AngularJS 路由也可以通過不同的模板來實現。
$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數為路由設定物件。
路由設定物件文法規則如下：
|
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string,function或 array,
controllerAs: string,
redirectTo: string,function,
resolve: object<key,function>
});
|
參數解釋：
（1）template:
使用該概述，可以在template中寫入HTML內容，典型的例子是：
|
when('/',{template:'這是首頁頁面'})
|
（2）templateUrl：
如果現在我們並不是要HTML內容，而是需要一個模板檔案來進行整體替換，例子如下：
|
$routeProvider.when('/computers', {
templateUrl:'views/computers.html',
});
|
（3）controller：function、string或數群組類型，在當前模板上執行的controller函數，產生新的scope。
也可以對應的是控制器的名稱。
（4）redirectTo：重新導向的地址
（5）resolve：當前控制器所依賴的其他模組~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
