標籤：
就我現在的認識，路由($route)這個東西(也許可以加上$location)可以說是ng最重要的東西了。因為angular目前最重要的作用就是做單頁面webApp，而路由這個東西是能做到頁面跳轉的關鍵。
1.單頁面webApp為什麼叫單頁面webApp？因為它是單頁面的。。。。額。。。關鍵在於我們看到的不少webApp是多頁面的啊，可以從一頁跳到另一頁。嗯，看起來是這樣，不過實際上這幾頁實際還是一個頁面，因為它們是一次性載入進來的，至於為啥會有跳轉效果呢？嗯，有點兒像選項卡，嗯。其實現原理在html5之前是通過hashbang，H5是History。這篇文章主要討論的是hashbang。為什麼要用#呢？當然我們可以直接多頁面，就跟做網站一樣。但是這麼做最大的問題是:每次切換都需要重新載入頁面。我們可以接受進入一個app的時候多花幾秒載入，而在使用App的時候切換頁面的時候多等個一兩秒就會給使用者一種這app好卡的感覺。
另外webApp另外一個好處就是可以減輕伺服器壓力，後台只管給資料。嗯，其實我不是很懂這一點。。以後再補充吧。
2.路由(ng-route)那麼怎麼把單頁面webapp(SPA)做成多頁面的樣子呢？就是怎麼來管理這些頁面呢？就要靠路由了。
來個案例，這是一個資訊管理系統，管使用者註冊，登出，使用者列表，使用者詳情之類的東西。
<!DOCTYPE html><html lang="en" ng-controller="userlist"><head> <meta charset="UTF-8"></head><body><div> <table> <tr ng-repeat="x in data" ng-click="detail($index)"> <td>{{ x.name }}:{{ x.password }}<a href="#ddd/{{$index}}">查看詳情</a></td> </tr> </table></div></body></html>
html我就粘一部分，這一部分是顯示使用者列表的，點擊對應使用者需要顯示它們的對應資訊。為什麼選這一部分，是因為這裡需要做地址傳參。
再看看對應的管路由跳轉的js代碼
m1.config(["$routeProvider",function($routeProvider){ $routeProvider.when("/aaa",{ templateUrl:"register.html", controller:"register" }).when("/bbb",{ templateUrl:"cancel.html", controller:"cancel" }).when("/ccc",{ templateUrl:"userlist.html", controller:"userlist" }) .when("/ddd/:index",{ templateUrl:"detail.html", controller:"detail" }) .otherwise({redirectTo:"/aaa"}); }])
其中
.when("/ddd/:index",{ templateUrl:"detail.html", controller:"detail" })
對應著使用者列表頁面。
首先，m1.config(["$routeProvider",function($routeProvider)])是注入模組的過程，因為ng-route是一個獨立於ng之外的模組，是一個獨立的js檔案。
然後，when函數的參數，第一個是url地址(後面接的:index待會講地址傳參的時候再說）。templateUrl是轉到的頁面地址(內容少的話可以用template)，controller寫跳轉到的頁面的控制器。
跳轉之後的頁面url大概是長這樣的：http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html#/ddd
最後說說地址傳參的問題，在詳細頁中，我們只需要顯示對應的一個人的資訊，就是說不管你點誰的詳情顯示的一個頁面，但是你需要告訴詳情頁點擊的究竟是哪個按鈕，我該渲染哪個。代碼裡的:index代表著你點擊的使用者的清單索引（就是你點擊的是第幾個使用者），傳索引是因為使用者資訊資料是用數組存的。在列表頁中，這個變數叫index或者啥的都無所謂，因為這隻是佔了個坑，代表這裡傳的值可以用這個變數來取(當然這個名字在跳轉過去的詳情頁是有用的)。再看看對應的html怎麼寫的
<tr ng-repeat="x in data" ng-click="detail($index)"> <td>{{ x.name }}:{{ x.password }}<a href="#ddd/{{$index}}">查看詳情</a></td> </tr>
這裡的$index對應的就是點擊的這個tr在這個表格中的索引，確切的來說是x是data中的第幾項。index就對應了{{$index}}
如果加上了參數的話，跳轉頁的url長這樣http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html#/ddd/0
後面多加的這個0就是傳的參數了，想要在跳轉頁取到這個參數，可以用$routeParams
m1.controller("detail",["$scope","$routeParams",function($scope,$routeParams){ $scope.index=$routeParams.index; }]);
就是說，這裡$routeParams.index中的index對應著在when函數中寫的那個。
說句題外話，之前我不用地址傳參的時候，實現”多頁面"通訊的方式是在$rootScope裡寫個屬性存上要傳的資料，畢竟ng只有一個$rootScope。雖然沒想出這麼做有什麼不妥，但是內心當中總覺得好彆扭。。
下一節說說自訂指令。
AngularJS學習筆記(三) 單頁面webApp和路由(ng-route)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
