本文實(shí)例講述了AngularJS路由機(jī)制ngRoute。分享給大家供大家參考，具體如下：

引言

在我們介紹路由之前我們首先談一下SPA，所以SPA就是我們現(xiàn)在經(jīng)常說(shuō)的單頁(yè)應(yīng)用single page APP，為了實(shí)現(xiàn)無(wú)刷新的視圖切換我們之前的做法就是利用AJAX從后取出數(shù)據(jù)然后渲染在前臺(tái)頁(yè)面HTML中，但是AJAX有一個(gè)致命的缺點(diǎn)就是不能實(shí)現(xiàn)瀏覽器的后退按鈕失效，為了解決這個(gè)問(wèn)題我們通常使用hash，監(jiān)聽(tīng)hashchange事件來(lái)進(jìn)行視圖切換，另一個(gè)方法是用HTML5的history API，通過(guò)pushState()記錄操作歷史，監(jiān)聽(tīng)popstate事件來(lái)進(jìn)行視圖切換，也有人把這叫pjax技術(shù)?；玖鞒倘缦拢?/p>

如此一來(lái)，便形成了通過(guò)地址欄進(jìn)行導(dǎo)航的深度鏈接（deeplinking ），也就是我們所需要的路由機(jī)制。通過(guò)路由機(jī)制，一個(gè)單頁(yè)應(yīng)用的各個(gè)視圖就可以很好的組織起來(lái)了。

ng-route包含的內(nèi)容

ng的路由機(jī)制是靠ngRoute提供的，通過(guò)hash和history兩種方式實(shí)現(xiàn)了路由，可以檢測(cè)瀏覽器是否支持history來(lái)靈活調(diào)用相應(yīng)的方式。ng的路由(ngRoute)是一個(gè)單獨(dú)的模塊，包含以下內(nèi)容：

•服務(wù)$routeProvider用來(lái)定義一個(gè)路由表，即地址欄與視圖模板的映射

•服務(wù)$routeParams保存了地址欄中的參數(shù)，例如{id : 1, name : 'tom'}

•服務(wù)$location用來(lái)實(shí)現(xiàn)用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄

•服務(wù)$route完成路由匹配，并且提供路由相關(guān)的屬性訪問(wèn)及事件，如訪問(wèn)當(dāng)前路由對(duì)應(yīng)的controller

•指令ngView用來(lái)在主視圖中指定加載子視圖的區(qū)域

路由機(jī)制的實(shí)現(xiàn)

第一步、引入兩個(gè)依賴(lài)文件

<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>

因?yàn)槁酚蓹C(jī)制上一個(gè)單獨(dú)的模塊，所以我們需要單獨(dú)的引入路由文件，僅僅引入AngularJS.min.js是不包含路由的，引入文件以后我們還需要在模塊聲明中注入對(duì)ng-route的依賴(lài)：

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

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

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

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提供了定義路由表的服務(wù)，它有兩個(gè)核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。

when(path,route)方法接收兩個(gè)參數(shù)，path是一個(gè)string類(lèi)型，表示該條路由規(guī)則所匹配的路徑，它將與地址欄的內(nèi)容($location.path)值進(jìn)行匹配。如果需要匹配參數(shù)，可以在path中使用冒號(hào)加名稱(chēng)的方式，如：path為/show/:name，如果地址欄是/show/tom，那么參數(shù)name和所對(duì)應(yīng)的值tom便會(huì)被保存在$routeParams中，像這樣：

{name : tom}。我們也可以用*進(jìn)行模糊匹配，如：/show*/:name將匹配/showInfo/tom。

參數(shù)說(shuō)明如下：

controller //function或string類(lèi)型。在當(dāng)前模板上執(zhí)行的controller函數(shù)，生成新的scope
controllerAs //string類(lèi)型，為controller指定別名
template //string或function類(lèi)型，視圖所用的模板，這部分內(nèi)容將被ngView引用
templateUrl //string或function類(lèi)型，當(dāng)視圖模板為單獨(dú)的html文件或是使用了<script type="text/ng-template">定義模板時(shí)使用
resolve //指定當(dāng)前controller所依賴(lài)的其他模塊
redirectTo //重定向的地址

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

我們的單頁(yè)面程序都是局部刷新的，那這個(gè)“局部”是哪里呢，這就輪到ngView出馬了，只需在模板中簡(jiǎn)單的使用此指令，在哪里用，哪里就是“局部”。

通過(guò)以上我們就完成了了一個(gè)路由的全部配置過(guò)程，在沒(méi)有接觸路由的時(shí)候感覺(jué)路由這一塊是比價(jià)難的，但是當(dāng)我們真正的了解到這一塊的原理的時(shí)候并不是非常的難，路由在AngularJS中是核心部分所以我們需要牢牢的掌握這一部分。

友情推薦：

看到這可能會(huì)有人說(shuō)如果有個(gè)完整的Ddeo就好了，所以說(shuō)小編給大家推薦一個(gè)編寫(xiě)前臺(tái)代碼的工具RunJS并且可以實(shí)現(xiàn)代碼的共享，小編的這個(gè)Demo就在這上面，可在此處查看效果；http://sandbox.runjs.cn/show/gj894e3t#/content/13

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

這樣以后我們就可以隨意的分享代碼，尤其是我們?cè)谥v課的時(shí)候非常的方便！

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論