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

在第一篇，我們展示了如何開始搭建一個AngularaJS應用。在第四、五篇我們討論了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

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