引言
在我們介紹路由之前我們首先談一下SPA，所以SPA就是我們現在經常說的單頁應用single page APP，爲了實現
無刷新的視圖切換我們之前的做法就是利用AJAX從後取出數據然後渲染在前臺頁面HTML中，但是AJAX有一個致命的缺
點就是不能實現瀏覽器的後退按鈕失效，爲了解決這個問題我們通常使用hash，監聽hashchange事件來進行視圖切
換，另一個方法是用HTML5的history API，通過pushState()記錄操作歷史，監聽popstate事件來進行視圖切換，也
有人把這叫pjax技術。基本流程如下：
如此一來，便形成了通過地址欄進行導航的深度鏈接（deeplinking ），也就是我們所需要的路由機制。通過
路由機制，一個單頁應用的各個視圖就可以很好的組織起來了。
ng-route包含的內容
ng的路由機制是靠ngRoute提供的，通過hash和history兩種方式實現了路由，可以檢測瀏覽器是否支持history
來靈活調用相應的方式。ng的路由(ngRoute)是一個單獨的模塊，包含以下內容：
•服務$routeProvider用來定義一個路由表，即地址欄與視圖模板的映射
•服務$routeParams保存了地址欄中的參數，例如{id : 1, name : 'tom'}
•服務$location用來實現用於獲取當前url以及改變當前的url,並且存入歷史記錄
•服務$route完成路由匹配，並且提供路由相關的屬性訪問及事件，如訪問當前路由對應的controller
•指令ngView用來在主視圖中指定加載子視圖的區域
路由機制的實現
第一步、引入兩個依賴文件
- <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
- <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
因爲路由機制上一個單獨的模塊，所以我們需要單獨的引入路由文件，僅僅引入AngularJS.min.js是不包含路
由的，引入文件以後我們還需要在模塊聲明中注入對ng-route的依賴：
- var app = angular.module("myApp", ['ngRoute']);
完成了這些，我們就可以在模板或是controller中使用上面的服務和指令了。下面我們需要定義一個路由表。
第二步：完成路由表的配置
- app.config(['$routeProvider', function ($routeProvider) {
- $routeProvider
- .when('/div1', {
- template: '<p>這是div1{{text}}</p>',
- controller: 'div1Controller'
- })
- .when('/div2', {
- template: '<p>這是div2{{text}}</p>',
- controller: 'div2Controller'
- })
- .when('/div3', {
- template: '<p>這是div3{{text}}</p>',
- controller: 'div3Controller'
- })
- .when('/content/:id', {
- template: '<p>這是content{{id}}</p>',
- controller: 'div4Controller'
- })
- .otherwise({
- redirectTo: '/div1'
- });
- }]);
$routeProvider提供了定義路由表的服務，它有兩個核心方法，when(path,route)和otherwise(params)，先看
一下核心中的核心when(path,route)方法。
when(path,route)方法接收兩個參數，path是一個string類型，表示該條路由規則所匹配的路徑，它將與地址欄
的內容($location.path)值進行匹配。如果需要匹配參數，可以在path中使用冒號加名稱的方式，如：path
爲/show/:name，如果地址欄是/show/tom，那麼參數name和所對應的值tom便會被保存在$routeParams中，像這樣：
{name : tom}。我們也可以用*進行模糊匹配，如：/show*/:name將匹配/showInfo/tom。
參數說明如下：
- controller //function或string類型。在當前模板上執行的controller函數，生成新的scope
- controllerAs //string類型，爲controller指定別名
- template //string或function類型，視圖所用的模板，這部分內容將被ngView引用
- templateUrl //string或function類型，當視圖模板爲單獨的html文件或是使用了<script type="text/ng-template">定義模板時使用
- resolve //指定當前controller所依賴的其他模塊
- redirectTo //重定向的地址
我們的單頁面程序都是局部刷新的，那這個“局部”是哪裏呢，這就輪到ngView出馬了，只需在模板中簡單的
使用此指令，在哪裏用，哪裏就是“局部”。
通過以上我們就完成了了一個路由的全部配置過程，在沒有接觸路由的時候感覺路由這一塊是比價難的，但是
當我們真正的瞭解到這一塊的原理的時候並不是非常的難，路由在angularJS中是核心部分所以我們需要牢牢的掌握
這一部分。
友情推薦：
看到這可能會有人說如果有個完整的Ddeo就好了，所以說小編給大家推薦一個編寫前臺代碼的工具RunJS並且可
以實現代碼的共享，小編的這個Demo就在這上面，請點擊我查看效果；點擊我查看源碼，這樣以後我們就可以隨意的
分享代碼，尤其是我們在講課的時候非常的方便！