Angular 路由route實例代碼

更新時間：2016年07月12日 09:52:21 投稿：jingxian

下面小編就為大家?guī)硪黄狝ngular 路由route實例代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

AngularJS 路由 routing

能夠從頁面的一個視圖跳轉到另外一個視圖，對單頁面應用來講是至關重要的。當應用變得越來越復雜時，我們需要一個合理的方式來管理用戶在使用過程中看到的界面。AngularJS的做法是將視圖分解成布局和模板視圖，并且根據用戶當前訪問的URL來展示對應的視圖。

本文對 AngularJS routing 做一簡單示例，并提及其涉及的一些概念。

一、布局頁面

引用scripts：

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

頁面的布局比較簡單：

<div>
   <ul>
     <li><a href="#page1">go page 1</a></li>
     <li><a href="#page2">go page 2</a></li>
     <li><a href="#other">to other page</a></li>
   </ul>
 </div>
 <div ng-view></div>

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

二、模板頁面

創(chuàng)建兩模板頁面，分別叫 Subpage_1.html 和 Subpage_2.html。

3、路由規(guī)則 routing config

angular.module("myRouteApp", ["ngRoute"])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when("/page1", {
        templateUrl: "Subpage_1.html"
      })
      .when("/page2", {
        templateUrl: "Subpage_2.html"
      })
      .otherwise({
        redirectTo: "/"
      });
  }]);

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

templateUrl:

應用會根據 templateUrl 屬性所指定的路徑通過XHR讀取視圖（或者從$templateCache中讀取）。如果能夠找到并讀取這個模板，AngularJS將模板的內容渲染到具有ng-view指令的DOM元素中。

redirectTo:

如果redirectTo屬性的值是一個字符串，那么路徑會被替換成這個值，并根據這個目標路徑觸發(fā)路由變化。如果redirectTo屬性的值是一個函數，那么路徑會被替換成函數的返回值，并根據這個目標路徑觸發(fā)路由變化。

運行結果

點擊 go page 1