快捷導(dǎo)航

AngularJS內(nèi)建服務(wù)$location及其功能詳解

更新時(shí)間：2016年07月01日 15:26:18 作者：lp_frank

這篇文章主要為大家詳細(xì)介紹了AngularJS內(nèi)建服務(wù)$location及$location功能，感興趣的小伙伴們可以參考一下

在學(xué)習(xí)AngularJS的過程中感覺到，通過一次性從服務(wù)端的數(shù)據(jù)庫獲取信息，在前端進(jìn)行分頁，這是一種比較可取的方式。因?yàn)樗?jié)省了前后端的通信負(fù)載，把更多的顯示方面的任務(wù)交給前端處理。

此內(nèi)容分為兩個(gè)部分，第一部分給大家簡單介紹一下AngularJS的內(nèi)建服務(wù)$location及其功能；第二部分通過一個(gè)比較完整的綜合實(shí)例來實(shí)現(xiàn)分頁顯示數(shù)據(jù)庫信息的效果。

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

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

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

Section 1：獲取URL信息

&location提供了一些個(gè)getter和setter方法，比如absUrl，path，protocol，host，port。具體的解釋就是，這些都是&location提供的關(guān)于鏈接地址函數(shù)的函數(shù)名，如果這些函數(shù)在使用時(shí)不傳入任何參數(shù)，則表示獲取當(dāng)前的url信息；如果傳入一些參數(shù)，則表示設(shè)置當(dāng)前瀏覽器里的url信息。

實(shí)例 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這個(gè)服務(wù)提供的getter方法可以很方便的獲取l瀏覽器當(dāng)前的url信息。

細(xì)心的同學(xué)可能已經(jīng)看到了，這個(gè)path怎么沒有值呢？
這是因?yàn)殒溄拥刂防锊]有path路徑信息。如果我們通過path（）方法手動(dòng)的設(shè)置一個(gè)path信息，然后再刷新瀏覽器（刷新時(shí)瀏覽器的url地址是你修改過的信息，是不會(huì)變的），就會(huì)看到path的信息了。有圖有真相！

實(shí)例 2

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

這里寫圖片描述

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

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

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

您可能感興趣的文章: