七步從AngularJS菜鳥到專家（7）：Routing

這是＂AngularJS – 七步從菜鳥到專家＂系列的第七篇。

在第一篇，咱們展現瞭如何開始搭建一個AngularaJS應用。在第4、五篇咱們討論了Angular內建的directives，上一篇瞭解了services的強大。

在這一章，咱們來看幾個前面沒有機會細說的關鍵點，文章的最後會列舉一些特別棒的學習資源連接和工具。

經過這整個系列的教程，咱們會開發一個NPR（美國全國公共廣播電臺）廣播的音頻播放器，它能顯示Morning Edition節目裏如今播出的最新故事，並在咱們的瀏覽器裏播放。完成版的Demo能夠看這裏。

7. Routing

在單頁面應用中，視圖之間的跳轉就顯尤其重要的，隨着應用愈來愈複雜，咱們須要用一種方法來精確控制何時該呈現怎樣的頁面給用戶。

我們能夠經過在主頁面中引入不一樣的模板來支持不一樣頁面的切換，可是這麼作的缺點就是，愈來愈多的內嵌代碼致使最後難以管理。

經過ng-include指令咱們能夠把不少的模板整合在視圖中，可是咱們有更好的方法來處理這種狀況，咱們能夠把視圖打散成layout和模板視圖，而後根據用戶訪問的特定的URL來顯示須要的視圖

咱們能夠將這些「碎片」在一個佈局模板中拼接起來

AngularJS經過在$routeProvider($route服務的提供者)上聲明routes來實現上面的構想

使用$routeProvider，咱們能夠更好的利用瀏覽歷史的API而且可讓用戶能夠把當前路徑存成書籤以方便之後的使用

在咱們的應用中設定路由，咱們須要作兩件事情：第一，咱們須要指出咱們存放將要存放新頁面內容的佈局模板在哪裏。好比，若是咱們想在全部頁面都配上header和footer，咱們能夠這樣設計佈局模板：

<header>
  <h1>Header</h1>
</header>
<div class="content">
  <div ng-view></div>
</div>
<footer>
  <h5>Footer</h5>
</footer>

ng-view指令將高速$routeProvider在哪裏渲染模板

第二，咱們須要配置咱們的路由信息，咱們將在應用中配置$routeProvider

$routeProvider提供了兩種方法處理路由：when和otherwise。 方法when接收兩個參數，第一個設置$location.path(). （直接用「//」也沒有問題）

第二個參數是配置對象，這個能夠包含不一樣的鍵，咱們能夠簡單的說幾個

controller

controller: 'MyController'
// or
controller: function($scope) {
  // ...
}

若是在配置對象中設置了controller屬性，那這個controller會在route加載的時候實例化，這個屬性能夠是一個字符串(必須在module中註冊過的controller)也能夠是controller function

Template模板

template: '<div><h2>Route</h2></div>'

若是咱們在配置對象的template屬性設置了值，那麼模板就會被渲染到DOM中的ng-view處

templateUrl

templateUrl: 'views/template_name.html'

若是咱們在配置對象的templateUrl屬性中設置了值，AngularJS將經過XHR來獲取該模板並把模板內容渲染到DOM中的ng-view處

值得注意的是：templateUrl屬性跟其餘AngularJS XHR請求的處理流程是同樣的，也就是說，即便用戶從這個頁面離開，等他再回到這個頁面，應用不會再去請求這個模板頁面，由於$templateCache已經緩存了這個模板

添加一些路由

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    controller: 'HomeController',
    template: '<h2>We are home</h2>'
  })
  .otherwise({redirectTo: '/'});
}]);

$routeProvider還能夠處理URL裏的傳遞的參數(好比，/people/42, 假設42是咱們要找的people的id號) 只須要簡單在字符串前加上 ‘:’,$routeProvider會嘗試匹配URL中id並把id做爲key在$routeParams服務中使用

$routeProvider.when('/person/:id', {
  controller: 'PeopleController',
  template: '<div>Person show page: {{ name }}</div>'
})

在PeopleController中，咱們檢索路由中指定的people的：id

app.controller('PeopleController', function($scope, $routeParams) {
  // We now have access to the $routeParams
  // At the route /person/42, our $routeParams will look like:
  // { id: 42 }
});

 

過濾器

在AngularJS的世界裏，filter提供了一種格式化數據的方法，Angular也提供給咱們了不少內建的過濾器，而且創建自定義過濾器也是至關的簡單

在HTML的模板綁定{{}}中，咱們使用 | 來調用過濾器，好比，咱們想讓字符串所有大寫字符顯示

{{ name | uppercase }}

固然了，咱們也能夠在JavaScript中使用$filter服務來調用過濾器，還拿字符串大寫來舉例：

app.controller('DemoController', ['$scope', '$filter',
  function($scope, $filter) {

    $scope.name = $filter('lowercase')('Ari');
}]);

如何傳遞參數到filter呢？只須要把參數放在filter以後，中間加個冒號（若是有多個參數要傳遞，在每一個參數後加上冒號）好比，數字過濾器能夠幫助咱們限制數字的位數，若是想顯示兩位小數，加上number:2就能夠了

{{ 123.456789 | number:2 }}

See it

123.46

咱們能夠同時使用N多過濾器，待會咱們創建自定義的過濾器的時候就能夠看到如何同時使用多個過濾器，在那以前咱們繼續來看幾個Angular自帶的過濾器

currency

Currency過濾器主要是把數字格式化成貨幣，意思就是123格式化之後就成了$123.00

Currency能夠根據須要選擇適當的貨幣符號。默認的是根據當前操做系統的locale來轉換的

date

日期過濾器主要根據咱們提供的格式化形式來格式化日期，他提供了不少內建的選項，若是沒有指定格式，默認顯示mediumDate形式

下面是一些自帶的日期格式化形式，咱們能夠經過把不一樣的格式化選項組合使用來建立自定義的日期格式化形式

 

filter

filter過濾器主要用來過濾一個數組數據並返回一個包含子數組數據的新數組

好比，在客戶端搜索時，咱們能夠快速的從數組中過濾出咱們想要的結果

這個filter方法接收一個string，object，或者function參數用來選擇/移除數組元素

If the first parameter passed in is a:
String	接收匹配這個字符串的元素，若是想排除某些字符串，在前面加上 ‘!’就好了
Object	若是隻傳入一個字符串，會做爲這個對象的屬性名稱進行相似substring相似的匹配，若是想匹配全部屬性，使用’$’做爲鍵便可
Function	對數組中每一個元素執行這個function，執行後獲得的結果會放在一個新的數組中

You can also pass a second parameter into the filter method that will be used to determine if the expected value and the actual 你也能夠傳入第二個參數到filter方法中，他講用於決定若是指望值和實際值是否考慮匹配的問題

If the second parameter passed in is:
true	執行嚴格的匹配比較（跟’angular.equals(expected,actual)同樣）
false	執行大小寫敏感的substring匹配
Function	執行function並接受一個元素，前提是這個function的返回結果是真

See it

isCapitalized函數以下：

$scope.isCapitalized =
  function(str) { return str[0] == str[0].toUpperCase(); }

json

json 過濾器接收JSON或者JavaScript對象，而後轉換成字符串，這個功能在調試程序的時候很是有用！譯者感覺：媽媽不再用擔憂個人debug，方便的使人髮指

limitTo

limitTo過濾器會根據傳遞的參數值來生成新的數組或字符串，參數值爲整數，從開頭截取，參數爲負值，從最後開始截取

若是限定值超過了字符串長度，返回整個數組或字符串

See it

 

lowercase

lowercase過濾器很明顯，將整個字符串編程小寫形式

See it

Lowercase string

{{ "San Francisco is often cloudy" | lowercase }}   san francisco is often cloudy

number

Number過濾器格式化文本成數字，能夠接受參數（可選）來決定格式化後數字的位數

若是參數是非數字，將返回空字符串

See it

簡單的數字格式化

{{ 1234567890 | number }}  1,234,567,890

格式化數字到一位小數

{{ 1.234567 | number:1 }}  1.2

orderBy

orderBy過濾器主要是根據給定的表達式對數組進行排序

orderBy函數能夠接受兩個參數：第一個是必需要提供的，第二個是可選參數

第一個參數決定了如何對數組進行排序

若是傳進來的第一個參數是：
function	將被用做這個對象的‘getter‘函數
string	字符串會被做爲key來對數組元素進行排序，你也能夠傳進來 ‘+’ 或者‘-‘來決定是升序仍是降序
array	使用這個數組裏的元素做爲排序表達式的判斷依據，使用第一個不嚴格相等表達式的結果的元素做爲其餘元素的判斷依據

The second parameter controls the sort order of the array (either reversed or not).

See it

根據人名排序

uppercase

Uppercase過濾器就是把整個字符串變成大寫形式

See it

{{ "San Francisco is often cloudy" | uppercase }} SAN FRANCISCO IS OFTEN CLOUDY

 

建立自定義的過濾器

正如咱們前面看到的，建立自定義過濾器至關簡單，咱們只要把他配置到咱們的module下就能夠了，讓咱們一塊兒來建立一個首字母大寫的過濾器吧

首先，咱們建立一個module

angular.module('myApp.filters', [])
.filter('capitalize', function() {
  return function(input) {}
});

Fliters其實就是一個function，接收input 字符串，咱們能夠函數裏作一些錯誤檢查

angular.module('myApp.filters', [])
.filter('capitalize', function() {
  return function(input) {
    // input will be ginger in the usage below
    if (input)
      return input[0].toUpperCase() + input.slice(1);
  }
});

See it

還有一些話題是咱們還沒來得及討論

在這個系列教程中，咱們介紹了不少可讓你輕鬆上手AngularJS的知識點，固然了，還有不少要點沒有機會談到，都列在下面，但願之後有機會跟他家一塊兒研究

• Promises （可讓多個異步請求更加的有條理）
• Building custom directives（自定義指令）
• $resource service（$resource 服務，很是好用的一個服務，底層是調用了$http Service）
• Unit testing(單元測試，這個尤其重要，甚至能夠單拿出來說不少，推薦jasmine)
• End-to-end testing（同上）
• Midway testing（介於前面二者的測試）
• i18n and I10n language translation/localization（多語言）
• Authentication and customizing XHR requests（驗證和自定義XHR請求）
• Using the $provide service to build customizable services（使用$provider服務來建立自定義服務）
• Forms and validations（表單和驗證）
• IE compatibility（IE兼容性）

原文連接：http://blog.jobbole.com/50533/