簡單講解AngularJS的Routing路由的定義與使用_AngularJS

在單一頁面應用程式中，視圖之間的跳轉就顯尤為重要的，隨著應用程式越來越複雜，我們需要用一種方法來精確控制什麼時候該呈現怎樣的頁面給使用者。

咱們可以透過在主頁面中引入不同的模板來支援不同頁面的切換，但是這麼做的缺點就是，越來越多的內嵌程式碼導致最後難以管理。

透過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().（直接用「//」也沒問題）

定義
定義路由非常容易，在我們的應用mian模組裡面注入ngRoute依賴就可以了

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

現在，我們就可以給應用程式定義路由了。在路由模組裡面的.config()方法裡面注入了$routeProvider，上面的程式碼為我們示範了兩個用來定義路由的方法。

when()

when()方法有兩個參數，我們希望匹配的瀏覽器url和路由操作物件。一般main route常使用「/」來表示，也可以定義URL參數，在controller裡面就使用$routeParams取得url參數。

templateUrl: 表示路由跳轉的view模板

controller: 控制器

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
    })
    .when('/day/:id', {
     templateUrl: 'views/day.html',
     controller: 'DayCtrl'
    })

otherwise()

otherwise()定義了當應用程式找不到指定路由的時候跳躍的路由

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'views/main.html',
   controller: 'MainCtrl'
  })
  .when('/day/:id', {
   templateUrl: 'views/day.html',
   controller: 'DayCtrl'
  })
  .otherwise({
   redirectTo: '/'
  });
})

使用
定義好了路由需要怎麼使用呢?我們要告訴angular頁面的哪一個部分是我們希望轉換的，這需要使用到ng-view指令

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

這樣就只有

會被更新， header/footer都始終保持不變