快捷導(dǎo)航

AngularJS入門教程之路由與多視圖詳解

更新時(shí)間：2016年08月19日 09:11:50 作者：速凍沙漠

本文主要介紹AngularJS 路由與多視圖詳解，這里整理了相關(guān)資料及示例代碼，詳細(xì)說明了在開發(fā)過程中如何應(yīng)用，有興趣的朋友可以看下

在這一步，你將學(xué)習(xí)如何創(chuàng)建一個(gè)布局模板并且通過路由功能來構(gòu)建一個(gè)具有多個(gè)視圖的應(yīng)用。

請重置工作目錄：

git checkout -f step-7

注意到現(xiàn)在當(dāng)你轉(zhuǎn)到app/index.html時(shí)，你會被重定向到app/index.html#/phones并且相同的手機(jī)列表在瀏覽器中顯示了出來。當(dāng)你點(diǎn)擊一個(gè)手機(jī)鏈接時(shí)，一個(gè)手機(jī)詳細(xì)信息列表也被顯示了出來。

步驟6和步驟7之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。

多視圖，路由和布局模板

我們的應(yīng)用正慢慢發(fā)展起來并且變得逐漸復(fù)雜。在步驟7之前，應(yīng)用只給我們的用戶提供了一個(gè)簡單的界面（一張所有手機(jī)的列表），并且所有的模板代碼位于index.html文件中。下一步是增加一個(gè)能夠顯示我們列表中每一部手機(jī)詳細(xì)信息的頁面。

為了增加詳細(xì)信息視圖，我們可以拓展index.html來同時(shí)包含兩個(gè)視圖的模板代碼，但是這樣會很快給我們帶來巨大的麻煩。相反，我們要把index.html模板轉(zhuǎn)變成“布局模板”。這是我們應(yīng)用所有視圖的通用模板。其他的“局部布局模板”隨后根據(jù)當(dāng)前的“路由”被充填入，從而形成一個(gè)完整視圖展示給用戶。

AngularJS中應(yīng)用的路由通過$routeProvider來聲明，它是$route服務(wù)的提供者。這項(xiàng)服務(wù)使得控制器、視圖模板與當(dāng)前瀏覽器的URL可以輕易集成。應(yīng)用這個(gè)特性我們就可以實(shí)現(xiàn)深鏈接，它允許我們使用瀏覽器的歷史(回退或者前進(jìn)導(dǎo)航)和書簽。

關(guān)于依賴注入（DI），注入器（Injector）和服務(wù)提供者（Providers）

正如從前面你學(xué)到的，依賴注入是AngularJS的核心特性，所以你必須要知道一點(diǎn)這家伙是怎么工作的。

當(dāng)應(yīng)用引導(dǎo)時(shí)，AngularJS會創(chuàng)建一個(gè)注入器，我們應(yīng)用后面所有依賴注入的服務(wù)都會需要它。這個(gè)注入器自己并不知道$http和$route是干什么的，實(shí)際上除非它在模塊定義的時(shí)候被配置過，否則它根本都不知道這些服務(wù)的存在。注入器唯一的職責(zé)是載入指定的服務(wù)模塊，在這些模塊中注冊所有定義的服務(wù)提供者，并且當(dāng)需要時(shí)給一個(gè)指定的函數(shù)注入依賴（服務(wù)）。這些依賴通過它們的提供者“懶惰式”（需要時(shí)才加載）實(shí)例化。

提供者是提供（創(chuàng)建）服務(wù)實(shí)例并且對外提供API接口的對象，它可以被用來控制一個(gè)服務(wù)的創(chuàng)建和運(yùn)行時(shí)行為。對于$route服務(wù)來說，$routeProvider對外提供了API接口，通過API接口允許你為你的應(yīng)用定義路由規(guī)則。

AngularJS模塊解決了從應(yīng)用中刪除全局狀態(tài)和提供方法來配置注入器這兩個(gè)問題。和AMD或者require.js這兩個(gè)模塊（非AngularJS的兩個(gè)庫）不同的是，AngularJS模塊并沒有試圖去解決腳本加載順序以及懶惰式腳本加載這樣的問題。這些目標(biāo)和AngularJS要解決的問題毫無關(guān)聯(lián)，所以這些模塊完全可以共存來實(shí)現(xiàn)各自的目標(biāo)。

App 模塊

app/js/app.js

angular.module('phonecat', []).
 config(['$routeProvider', function($routeProvider) {
 $routeProvider.
   when('/phones', {templateUrl: 'partials/phone-list.html',  controller: PhoneListCtrl}).
   when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
   otherwise({redirectTo: '/phones'});
}]);

為了給我們的應(yīng)用配置路由，我們需要給應(yīng)用創(chuàng)建一個(gè)模塊。我們管這個(gè)模塊叫做phonecat，并且通過使用configAPI，我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。

注意到在注入器配置階段，提供者也可以同時(shí)被注入，但是一旦注入器被創(chuàng)建并且開始創(chuàng)建服務(wù)實(shí)例的時(shí)候，他們就不再會被外界所獲取到。

我們的路由規(guī)則定義如下

當(dāng)URL 映射段為/phones時(shí)，手機(jī)列表視圖會被顯示出來。為了構(gòu)造這個(gè)視圖，AngularJS會使用phone-list.html模板和PhoneListCtrl控制器。

當(dāng)URL 映射段為/phone/:phoneId時(shí)，手機(jī)詳細(xì)信息視圖被顯示出來。這里:phoneId是URL的變量部分。為了構(gòu)造手機(jī)詳細(xì)視圖，AngularJS會使用phone-detail.html模板和PhoneDetailCtrl控制器。
我們重用之前創(chuàng)造過的PhoneListCtrl控制器，同時(shí)我們?yōu)槭謾C(jī)詳細(xì)視圖添加一個(gè)新的PhoneDetailCtrl控制器，把它存放在app/js/controllers.js文件里。

$route.otherwise({redirectTo: '/phones'})語句使得當(dāng)瀏覽器地址不能匹配我們?nèi)魏我粋€(gè)路由規(guī)則時(shí)，觸發(fā)重定向到/phones。

注意到在第二條路由聲明中:phoneId參數(shù)的使用。$route服務(wù)使用路由聲明/phones/:phoneId作為一個(gè)匹配當(dāng)前URL的模板。所有以:符號聲明的變量（此處變量為phones）都會被提取，然后存放在$routeParams對象中。

為了讓我們的應(yīng)用引導(dǎo)我們新創(chuàng)建的模塊，我們同時(shí)需要在ngApp指令的值上指明模塊的名字：

app/index.html

<!doctype html>
<html lang="en" ng-app="phonecat">
...

控制器

app/js/controllers.js

...
function PhoneDetailCtrl($scope, $routeParams) {
 $scope.phoneId = $routeParams.phoneId;
}

//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];

模板

$route服務(wù)通常和ngView指令一起使用。ngView指令的角色是為當(dāng)前路由把對應(yīng)的視圖模板載入到布局模板中。

app/index.html

<html lang="en" ng-app="phonecat">
<head>
...
 <script src="lib/angular/angular.js"></script>
 <script src="js/app.js"></script>
 <script src="js/controllers.js"></script>
</head>
<body>

 <div ng-view></div>

</body>
</html>

注意，我們把index.html模板里面大部分代碼移除，我們只放置了一個(gè)<div>容器，這個(gè)<div>具有ng-view屬性。我們刪除掉的代碼現(xiàn)在被放置在phone-list.html模板中：

app/partials/phone-list.html

<div class="container-fluid">
 <div class="row-fluid">
  <div class="span2">
   <!--Sidebar content-->

   Search: <input ng-model="query">
   Sort by:
   <select ng-model="orderProp">
    <option value="name">Alphabetical</option>
    <option value="age">Newest</option>
   </select>

  </div>
  <div class="span10">
   <!--Body content-->

   <ul class="phones">
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
     <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
     <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
     <p>{{phone.snippet}}</p>
    </li>
   </ul>

  </div>
 </div>
</div>

同時(shí)我們?yōu)槭謾C(jī)詳細(xì)信息視圖添加一個(gè)占位模板。

app/partials/phone-detail.html

TBD: detail view for {{phoneId}}

注意到我們的布局模板中沒再添加PhoneListCtrl或PhoneDetailCtrl控制器屬性！

測試

為了自動(dòng)驗(yàn)證所有的東西都良好地集成起來，我們需要寫一些端到端測試，導(dǎo)航到不同的URL上然后驗(yàn)證正確地視圖被渲染出來。

...
 it('should redirect index.html to index.html#/phones', function() {
  browser().navigateTo('../../app/index.html');
  expect(browser().location().url()).toBe('/phones');
 });
...

 describe('Phone detail view', function() {

  beforeEach(function() {
   browser().navigateTo('../../app/index.html#/phones/nexus-s');
  });


  it('should display placeholder page with phoneId', function() {
   expect(binding('phoneId')).toBe('nexus-s');
  });
 });

你現(xiàn)在可以刷新你的瀏覽器，然后重新跑一遍端到端測試，或者你可以在AngularJS的服務(wù)器上運(yùn)行一下。

練習(xí)

試著在index.html上增加一個(gè){{orderProp}}綁定，當(dāng)你在手機(jī)列表視圖上時(shí)什么也沒變。這是因?yàn)閛rderProp模型僅僅在PhoneListCtrl管理的作用域下才是可見的，這與<div ng-view>元素相關(guān)。如果你在phone-list.html模板中加入同樣的綁定，那么這個(gè)綁定會按你設(shè)想的那樣被渲染出來。

總結(jié)

設(shè)置路由并實(shí)現(xiàn)手機(jī)列表視圖之后，我們已經(jīng)可以進(jìn)入步驟8來實(shí)現(xiàn)手機(jī)詳細(xì)信息視圖了。

以上就對AngularJS 路由和多視圖的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)知識，謝謝大家對本站的支持！

您可能感興趣的文章: