AngularJS入門教程之路由機制ngRoute執行個體分析_AngularJS

本文執行個體講述了AngularJS路由機制ngRoute。分享給大家供大家參考，具體如下：

引言

在我們介紹路由之前我們首先談一下SPA，所以SPA就是我們現在經常說的單頁應用single page APP，為了實現無重新整理的視圖切換我們之前的做法就是利用AJAX從後取出資料然後渲染在前台頁面HTML中，但是AJAX有一個致命的缺點就是不能實現瀏覽器的後退按鈕失效，為瞭解決這個問題我們通常使用hash，監聽hashchange事件來進行視圖切換，另一個方法是用HTML5的history API，通過pushState()記錄操作曆史，監聽popstate事件來進行視圖切換，也有人把這叫pjax技術。基本流程如下：

如此一來，便形成了通過地址欄進行導航的深度連結（deeplinking ），也就是我們所需要的路由機制。通過路由機制，一個單頁應用的各個視圖就可以很好的組織起來了。

ng-route包含的內容

ng的路由機制是靠ngRoute提供的，通過hash和history兩種方式實現了路由，可以檢測瀏覽器是否支援history來靈活調用相應的方式。ng的路由(ngRoute)是一個單獨的模組，包含以下內容：

•服務$routeProvider用來定義一個路由表，即地址欄與視圖模板的映射

•服務$routeParams儲存了地址欄中的參數，例如{id : 1, name : 'tom'}

•服務$location用來實現用於擷取當前url以及改變當前的url,並且存入記錄

•服務$route完成路由匹配，並且提供路由相關的屬性訪問及事件，如訪問當前路由對應的controller

•指令ngView用來在主視圖中指定載入子視圖的地區

路由機制的實現

第一步、引入兩個依賴檔案

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

因為路由機制上一個單獨的模組，所以我們需要單獨的引入路由檔案，僅僅引入AngularJS.min.js是不包含路由的，引入檔案以後我們還需要在模組聲明中注入對ng-route的依賴：

var app = angular.module("myApp", ['ngRoute']);

完成了這些，我們就可以在模板或是controller中使用上面的服務和指令了。下面我們需要定義一個路由表。

第二步：完成路由表的配置

app.config(['$routeProvider', function ($routeProvider) {    $routeProvider      .when('/div1', {        template: '<p>這是div1{{text}}</p>',        controller: 'div1Controller'      })      .when('/div2', {        template: '<p>這是div2{{text}}</p>',          controller: 'div2Controller'      })      .when('/div3', {        template: '<p>這是div3{{text}}</p>',        controller: 'div3Controller'      })      .when('/content/:id', {        template: '<p>這是content{{id}}</p>',        controller: 'div4Controller'      })      .otherwise({        redirectTo: '/div1'      });}]);

$routeProvider提供了定義路由表的服務，它有兩個核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。

when(path,route)方法接收兩個參數，path是一個string類型，表示該條路由規則所匹配的路徑，它將與地址欄的內容($location.path)值進行匹配。如果需要匹配參數，可以在path中使用冒號加名稱的方式，如：path為/show/:name，如果地址欄是/show/tom，那麼參數name和所對應的值tom便會被儲存在$routeParams中，像這樣：

{name : tom}。我們也可以用*進行模糊比對，如：/show*/:name將匹配/showInfo/tom。

參數說明如下：

controller //function或string類型。在當前模板上執行的controller函數，產生新的scopecontrollerAs //string類型，為controller指定別名template //string或function類型，視圖所用的模板，這部分內容將被ngView引用templateUrl //string或function類型，當視圖模板為單獨的html檔案或是使用了<script type="text/ng-template">定義模板時使用resolve //指定當前controller所依賴的其他模組redirectTo //重新導向的地址

第三步：在主視圖模板中指定載入子視圖的位置

我們的單頁面程式都是局部重新整理的，那這個“局部”是哪裡呢，這就輪到ngView出馬了，只需在模板中簡單的使用此指令，在哪裡用，哪裡就是“局部”。

通過以上我們就完成了了一個路由的全部配置過程，在沒有接觸路由的時候感覺路由這一塊是比價難的，但是當我們真正的瞭解到這一塊的原理的時候並不是非常的難，路由在AngularJS中是核心部分所以我們需要牢牢的掌握這一部分。

友情推薦：

看到這可能會有人說如果有個完整的Ddeo就好了，所以說小編給大家推薦一個編寫前台代碼的工具RunJS並且可以實現代碼的共用，小編的這個Demo就在這上面，可在此處查看效果；http://sandbox.runjs.cn/show/gj894e3t#/content/13

此處查看源碼：
http://runjs.cn/code/gj894e3t

這樣以後我們就可以隨意的分享代碼，尤其是我們在講課的時候非常的方便！

更多關於AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程式設計有所協助。