在做angularJS的Mutilpe View & Route 的工作時，感覺到應(yīng)該更加深入的了解一下angularJS的內(nèi)建的服務(wù)&location，因為這個內(nèi)建的服務(wù)于瀏覽器的URL的操作息息相關(guān)，感覺如果處理好了這個服務(wù)，那么對日后進行頁面的翻頁處理會很有幫助。

下面就是我的一些小小的實驗，以及一些心得體會，都是用白話文寫的，可能不是那么的專業(yè)，但是希望對大家理解angularJS的一些概念有所幫助。

這個&location是作為一個服務(wù)（service），以依賴注入（dependency injection）的方式作為控制器的返回函數(shù)的參數(shù)使用。下面就以一個實例來解釋這個服務(wù)的使用。

Section 1：獲取URL信息

&location提供了一些個getter和setter方法，比如absUrl，path，protocol，host，port。具體的解釋就是，這些都是&location提供的關(guān)于鏈接地址函數(shù)的函數(shù)名，如果這些函數(shù)在使用時不傳入任何參數(shù)，則表示獲取當前的url信息；如果傳入一些參數(shù)，則表示設(shè)置當前瀏覽器里的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這個服務(wù)提供的getter方法可以很方便的獲取l瀏覽器當前的url信息。

細心的同學(xué)可能已經(jīng)看到了，這個path怎么沒有值呢？
這是因為鏈接地址里并沒有path路徑信息。如果我們通過path（）方法手動的設(shè)置一個path信息，然后再刷新瀏覽器（刷新時瀏覽器的url地址是你修改過的信息，是不會變的），就會看到path的信息了。有圖有真相！

實例 2

$location.path('detail');
$scope.path = $location.path();

這里寫圖片描述

從上面的小的修改中看到，我修改了代碼，首先通過setter方法在$location這個內(nèi)建的服務(wù)（其實質(zhì)就是一個對象，里面有很多關(guān)于url信息的屬性）里修改了它的path屬性的值。
然后再通過getter方法獲取到這個新的值。

又因為location這個服務(wù)于瀏覽器地址欄的URL信息是雙向綁定的（這是angularJS最精妙的地方），所以無論 location對象的屬性還是瀏覽器地址欄，只要有一方的url信息改變，那么另一方也會跟著改變。所以看到截圖中瀏覽器的地址欄中也多了一個detail這樣的path信息，這個信息是之前通過代碼設(shè)置的。

關(guān)于AngularJS實現(xiàn)分頁顯示功能在下篇文章中為大家進行介紹，希望大家不要錯過。

您可能感興趣的文章: