内容介紹，為什麼要使用前端路由？
在2005左右，興起了一種叫做ajax的技術，有了ajax之後，我們向服務端送出資料的時候就不再需要使用from表單去送出了，因為from表單之間的送出會導緻頁面之間的切換，也就是說無法實作單頁應用。
ajax的缺陷
1、不會在浏覽器裡面留下曆史記錄
2、使用者無法将頁面加為書簽儲存下來或者無法通過發送網址給其他人，其他人通過直接點選網址進入這個頁面
3、ajax無法實作SEO優化，ajax對搜尋引擎是不友好的
這也是為什麼要使用前端路由的一個原因。
首先我們來看一下app.js這個入口檔案
1 var bookStoreApp = angular.module('bookStoreApp',['ngRoute','ngAnimate','bookStoreCtrls','bookSroreFilters','bookStoreServices','bookStoreDirective']);
2
3 bookStore.config(function($routeProvider){
4 $routeProvider:when('/hello',{
5 temolateUrl:'tpls/hello.html',
6 controller:'HelloCtrl'
7 }).when('/list',{
8 temolateUrl:'tpls/bookList.html',
9 controller:'BookListCtrl'
10 }).otherwise({
11 redirectTo:'/hello'
12 })
13 }); 我們定義一個子產品，叫做bookStoreApp，
我們在上面調用config這個方法，
大家會發現有個routeProvider，前面有一個$$符号,這個是AngularJS自身所提供的路由機制，
根據$routeProvider我們來進行路由的配置，
如：當浏覽器位址欄發現位址是hello這樣一個位址的時候，他就會使用tpls/hello.html這樣的一個模闆，
有HelloCtrl這個控制器，來處理模闆和資料之間的綁定,
當他發現浏覽器位址欄發現位址是list這樣一個位址的時候，他就會調用另外一個模闆，
其他所有的情況都會直接跳到hello，
這裡大家需要注意的是，AngularJS1.2以後，把機制之間做了子產品化的處理，也就是route沒有包含在Angular.js這個檔案裡面，而是把它獨立出來成了一個子產品，
大家可以看一下下面的目錄圖，看一下angularJS裡面的子產品是如何進行切分的，
angularJS不再像以前一樣，把所有的檔案都合在angular.js這個檔案裡面，
而是切分成一個個獨立的js檔案了,
是以這就導緻了當我們需要使用路由的時候，一定要在頁面上手動導入angular-route.js檔案，
1 <script src="framework/1.3.0.14/angular-route.js"></script> 如果你忘了加，浏覽器可能會提示routeProvider不是對象或者沒找到，如果你發生這個問題，你一定要檢查一下頁面有沒有導入angular-route.js檔案
【提示】這個是AngularJS本身自帶的路由機制，這個路由有一個缺陷，它是無法實作深層次嵌套的路由的
所有就有第三方開發了一個叫做Router
歡迎了解
https://angular-ui.github.io/，
https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router檢視詳情
UI-Router提供了一種很好的機制，可以實作深層次嵌套
首先你需要從github上，将UI-Router這個包下載下傳下來，然後導入到頁面中
1 <script src="framework/1.3.0.14/angular-ui-router.js"></script> 如果你使用了angular-ui-router.js，你就不需要使用angularJS原生的routeProvider了，
寫法上也會發生一定的變化，
1 <body>
2 //寫一個指令，這表示的是一個視圖
3 <div ui-view></div>
4 </body> 我們看一下js部分，這裡我們不在使用routeProvider了，其實用法上大同小異，
換成另外連個$$stateProvider, $urlRouterProvider，
urlRouterProvider用法和angularjs原生的routeProvider寫法上非常相似，
但是stateProvider它定義的方法名叫做state，
首先我們要調用stateProvider上面的state方法，我們來配置當浏覽器位址欄發生變化的時候使用什麼樣的模闆，
這裡有很多比較快捷的文法
我們可以看到html裡面隻有單個的div，如何使用div去填充首頁的内容呢？
1 <div ui-view></div> 我們看js，首先有個url參數’/index’，
并且views裡面填充了好幾組内容，其實是三組view，
我們的頁面分成兩個部分，頂部是一個導覽列，然後下面的内容是會跟着切換的，
頂部我們寫一個空的字元串”，我們利用tpls3/index.html作為我們首頁的html模闆,
在tpls3/index.html模闆裡面，我們又把模闆分成了兩塊，一個叫topbar一個叫main，
1 <div class="container">
2 <div ui-view="topbar"></div>
3 <div ui-view="main"></div>
4 </div> 我們可以看到js裡面有個topbar@index，下面有個叫做main@index，
通過@這樣的文法，stateProvider就知道每個小塊自動加載什麼樣的模闆，
我們可以看到下面的state寫法都差不多，當然可以看到index.usermng,index.usermng.highendusers等，
也就是說可以用‘’點‘’來分割子子產品子區域，
這樣的話，有了ui-view以後，我們就可以使用這種深層次的嵌套了
包括一個頁面上分成多個區域，多個區域都可以定義命名的ui-view，
這樣可以隻切換其中的一小塊區域，而不用整體切換
前端路由基本原理
哈希#
可以實作，浏覽器不重新整理頁面，實作url位址的變化，大部分浏覽器均可支援
HTML5中history API
我們可以通過js代碼去修改URL位址欄裡面的位址，這樣的話，浏覽器會留下曆史記錄，但是頁面不會跳轉
路由的核心是給應用定義“狀态”
使用路由機制會影響到應用的整體編碼方式(需要預先定義好狀态)
考慮相容性問題與“優雅降級”
會檢查浏覽器，如果浏覽器比較舊會使用哈希的方式，如果是新的浏覽器會使用HTML5中history API的方式