AngularJS 路由與多視圖

2018-09-28 17:31 更新

路由與多視圖

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

請重置工作目錄：

    git checkout -f step-7

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

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

多視圖，路由和布局模板

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

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

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

關于依賴注入（DI），注入器（Injector）和服務提供者（Providers）

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

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

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

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

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'});
    }]);

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

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

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

  • 當URL 映射段為/phones時，手機列表視圖會被顯示出來。為了構造這個視圖，AngularJS會使用phone-list.html模板和PhoneListCtrl控制器。
  • 當URL 映射段為/phone/:phoneId時，手機詳細信息視圖被顯示出來。這里:phoneId是URL的變量部分。為了構造手機詳細視圖，AngularJS會使用phone-detail.html模板和PhoneDetailCtrl控制器。

我們重用之前創(chuàng)造過的PhoneListCtrl控制器，同時我們?yōu)槭謾C詳細視圖添加一個新的PhoneDetailCtrl控制器，把它存放在app/js/controllers.js文件里。

$route.otherwise({redirectTo: '/phones'})語句使得當瀏覽器地址不能匹配我們任何一個路由規(guī)則時，觸發(fā)重定向到/phones。

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

為了讓我們的應用引導我們新創(chuàng)建的模塊，我們同時需要在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服務通常和ngView指令一起使用。ngView指令的角色是為當前路由把對應的視圖模板載入到布局模板中。

app/index.html

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

      <div ng-view></div>

    </body>
    </html>

注意，我們把index.html模板里面大部分代碼移除，我們只放置了一個<div>容器，這個<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>

同時我們?yōu)槭謾C詳細信息視圖添加一個占位模板。

app/partials/phone-detail.html

    TBD: detail view for {{phoneId}}

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

測試

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

    ...
      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)在可以刷新你的瀏覽器，然后重新跑一遍端到端測試。

練習

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

總結

設置路由并實現(xiàn)手機列表視圖之后，我們已經(jīng)可以進入更多模版來實現(xiàn)手機詳細信息視圖了。

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號