AngularJS - 路由 routing 基礎示例

AngularJS 路由 routing

可以從頁面的一個視圖跳轉到另一個視圖，對單頁面應用來說是相當重要的。當應用變得愈來愈複雜時，咱們須要一個合理的方式來管理用戶在使用過程當中看到的界面。AngularJS的作法是將視圖分解成佈局和模板視圖，而且根據用戶當前訪問的URL來展現對應的視圖。

 

本文對 AngularJS routing 作一簡單示例，並說起其涉及的一些概念。

 

1、佈局頁面

引用scripts：

1 <script src="../Scripts/jquery-1.9.1.min.js"></script>
2 <script src="../Scripts/angular.min.js"></script>
3 <script src="../Scripts/angular-route.min.js"></script>

頁面的佈局比較簡單：

1 <div>
2     <ul>
3         <li><a href="#page1">go page 1</a></li>
4         <li><a href="#page2">go page 2</a></li>
5         <li><a href="#other">to other page</a></li>
6     </ul>
7 </div>
8 <div ng-view></div>

ng-view是由ngRoute模塊提供的一個特殊指令，其告訴AngularJS把模板渲染到何處。這個例子中，咱們將須要渲染的內容放到 下面的 div 中。上面的三個 a 連接分別指向了三個視圖view。

 

2、模板頁面

建立兩模板頁面，分別叫 Subpage_1.html 和 Subpage_2.html。

 

三、路由規則 routing config

 1 angular.module("myRouteApp", ["ngRoute"])
 2     .config(['$routeProvider', function ($routeProvider) {
 3         $routeProvider
 4             .when("/page1", {
 5                 templateUrl: "Subpage_1.html"
 6             })
 7             .when("/page2", {
 8                 templateUrl: "Subpage_2.html"
 9             })
10             .otherwise({
11                 redirectTo: "/"
12             });
13     }]);

把 ngRoute 模塊在咱們的應用中看成依賴加載進來。用 config 函數在模塊或應用中定義路由，使用AngularJS提供的when和otherwise兩個方法來定義應用的路由。

templateUrl:

應用會根據 templateUrl 屬性所指定的路徑經過XHR讀取視圖（或者從$templateCache中讀取）。若是可以找到並讀取這個模板，AngularJS將模板的內容渲染到具備ng-view指令的DOM元素中。

redirectTo:

若是redirectTo屬性的值是一個字符串，那麼路徑會被替換成這個值，並根據這個目標路徑觸發路由變化。若是redirectTo屬性的值是一個函數，那麼路徑會被替換成函數的返回值，並根據這個目標路徑觸發路由變化。

 

運行結果

點擊 go page 1

 

點擊 go page 2

 

參考資料

《AngularJS權威教程》

Angular.js Routing Example http://www.webcodegeeks.com/javascript/angular-js/angular-js-routing-example/