第220天：Angular---路由
內容介紹，為什麽要使用前端路由？
在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的方式
第220天：Angular---路由