天天看點

AngularJS 服務(Service)$http$interval$location自定義服務

在 angularjs 中,服務是一個函數或對象,可在我們的 angularjs 應用中使用。angularjs 内建了30 多個服務。這一篇部落格将為大家介紹一些服務的使用方式以及如何建立我們自己的服務。

angularjs服務的api可以點選這裡檢視

<code>$http</code> 是 angularjs 應用中最常用的服務。 服務向伺服器發送請求,應用響應伺服器傳送過來的資料。可以了解成jquery中的ajax。

首先我們建立一個json資料檔案,用于<code>$http</code>通路。

接下來我們使用<code>$http</code>讀取資料:

運作效果:

AngularJS 服務(Service)$http$interval$location自定義服務

angularjs <code>$interval</code> 服務對應了 js window.setinterval 函數。

這樣就實作了一個時鐘效果,運作效果:

AngularJS 服務(Service)$http$interval$location自定義服務

angularjs中的<code>$location</code>服務是對<code>window.location</code>的封裝。

以上介紹的為<code>$location</code>的基本用法,另外,<code>$location</code>服務還提供了獲得錨點等資訊的方法,下面着重介紹一下<code>$location</code>服務獲得查詢參數的使用,剛接觸的時候也走了一些彎路。

在<code>$location</code>服務中将查詢參數轉換為json對象的方法為<code>search</code>。

首先:假設我們的頁面的通路位址為:<code>http://127.0.0.1:8020/location.html</code>,我們在其後添加一些參數,如:<code>http://127.0.0.1:8020/location.html?p1=123&amp;p2=456</code>,我們理想中得到的json資料應為:<code>{p1:123,p2:456}</code>,我們來試一下是這樣子的嗎?

我們通路之後會發現頁面顯示的是:<code>{}</code>,并未沒有取到資料,這是angularjs的bug,并不是這樣子,在<code>$location</code>的api中提供了這樣的執行個體

// given url http://example.com/#/some/path?foo=bar&amp;baz=xoxo var searchobject = $location.search(); // =&gt; {foo: ‘bar’, baz: ‘xoxo’} // set foo to ‘yipee’ location.search(‘foo′,‘yipee′);//location.search() =&gt; {foo: ‘yipee’, baz: ‘xoxo’}

我們仿照api的例子将我們的位址改造一下,改造成如下形式:

<code>http://127.0.0.1:8020/mui/location.html#?p1=123&amp;p2=456</code>

這時候我們會發現頁面上顯示了我們預測的内容。其實在不對請求位址進行改造的情況下,我們也可以獲得查詢參數的,我們的代碼應該這樣寫:

上面介紹了一些angularjs中内置的服務,下面來介紹一下如何自定義自己的服務,看過上一篇《angularjs 過濾器》的朋友應該可以猜到自定義服務的方式,和自定義過濾器很像。下面我們就通過代碼來示範一下如何自定義服務。

在這段代碼中,我們自定義了一個服務,并向其中添加了一個方法将字元串轉換為大寫,運作效果:

AngularJS 服務(Service)$http$interval$location自定義服務

繼續閱讀