在學習AngularJS的過程中感覺到，通過一次性從服務端的資料庫擷取資訊，在前端進行分頁，這是一種比較可取的方式。因為它節省了前後端的通訊負載，把更多的顯示方面的任務交給前端處理。
此內容分為兩個部分，第一部分給大家簡單介紹一下AngularJS的內建服務$location及其功能；第二部分通過一個比較完整的綜合執行個體來實現分頁顯示資料庫資訊的效果。
在做angularJS的Mutilpe View & Route 的工作時，感覺到應該更加深入的瞭解一下angularJS的內建的服務&location，因為這個內建的服務於瀏覽器的URL的操作息息相關，感覺如果處理好了這個服務，那麼對日後進行頁面的翻頁處理會很有協助。
下面就是我的一些小小的實驗，以及一些心得體會，都是用白話文寫的，可能不是那麼的專業，但是希望對大家理解angularJS的一些概念有所協助。
這個&location是作為一個服務（service），以依賴注入（dependency injection）的方式作為控制器的返回函數的參數使用。下面就以一個執行個體來解釋這個服務的使用。
Section 1：擷取URL資訊
&location提供了一些個getter和setter方法，比如absUrl，path，protocol，host，port。具體的解釋就是，這些都是&location提供的關於連結地址函數的函數名，如果這些函數在使用時不傳入任何參數，則表示擷取當前的url資訊；如果傳入一些參數，則表示設定當前瀏覽器裡的url資訊。
執行個體 1
<!DOCTYPE html><html ng-app="LocationApp"><head lang="en"> <meta charset="UTF-8"> <title></title></head><body ng-controller="LocationController"><p>absUrl----------{{absUrl}}</p><p>path------------{{path}}</p><p>protocol--------{{protocol}}</p><p>host------------{{host}}</p><p>port------------{{port}}</p><script src="angular.js"></script><script> var LocationApp = angular.module('LocationApp', []); LocationApp.controller('LocationController', ['$scope', '$location', function ($scope, $location) { $scope.absUrl = $location.absUrl(); $scope.path = $location.path(); $scope.protocol = $location.protocol(); $scope.host = $location.host(); $scope.port = $location.port(); }]);</script></body></html>
從截圖能夠明顯的看出，$location這個服務提供的getter方法可以很方便的擷取l瀏覽器當前的url資訊。
細心的同學可能已經看到了，這個path怎麼沒有值呢？
這是因為連結地址裡並沒有path路徑資訊。如果我們通過path（）方法手動的設定一個path資訊，然後再重新整理瀏覽器（重新整理時瀏覽器的url地址是你修改過的資訊，是不會變的），就會看到path的資訊了。有圖有真相！
執行個體 2
$location.path('detail');
$scope.path = $location.path();
從上面的小的修改中看到，我修改了代碼，首先通過setter方法在$location這個內建的服務（其實質就是一個對象，裡面有很多關於url資訊的屬性）裡修改了它的path屬性的值。
然後再通過getter方法擷取到這個新的值。
又因為location這個服務於瀏覽器地址欄的URL資訊是雙向繫結的（這是angularJS最精妙的地方），所以無論 location對象的屬性還是瀏覽器地址欄，只要有一方的url資訊改變，那麼另一方也會跟著改變。所以看到截圖中瀏覽器的地址欄中也多了一個detail這樣的path資訊，這個資訊是之前通過代碼設定的。
關於AngularJS實現分頁顯示功能在下篇文章中為大家進行介紹，希望大家不要錯過。
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
