【AngularJS】—— 13 服務Service

　　AngularJS為我們提供了很多種服務，$http用于發送http請求，動态的請求資料。

　　這樣就需要使用web容器來運作代碼了，先看看程式源碼，視圖方面還是跟普通的代碼相同：

　　建立一個無序清單，循環輸出請求到的資料。

　　在js中，建立一個模闆，在模闆上建立控制器。

　　該控制器比平時普通的控制器多了一個注入的參數$http，添加了這個參數，就可以在方法内部直接調用。

　　采用如下的格式：

　　接下來需要在代碼相同的路徑下，建立data.json檔案

　　利用web容器，本文使用的是基于nodejs的http-server，啟動後在網頁中輸入相應的URL檢視結果：

　　全部的代碼展示：

　　使用$http是很基本的内容，就不做過多的解釋了。

　　接下來看看如何建立自己的服務，建立服務可以通過三種方式，factory,provider和service，但是它們的本質都是Provider，隻是封裝了不同的寫法而已。

　　本文采用factory的形式，仍然是先建立一個子產品，在子產品的基礎上建立一個Service:

　　分析下代碼：

　　這個Service需要注入一個屬性 $http ，在方法内部，傳回的值是一個對外提供的方法，userList。

　　外部可以通過 userList(username) 的方式，進行調用。

　　真正的實作部分放在 doRequest 中，内部就是典型的一個AngularJS的$http請求了，請求會傳回url相應的資料。

　　然後看一下外部如何使用，先看看視圖部分：

　　該部分是一個輸入框input和一個代碼框pre，他們共同使用了一個變量username。當username有值時，會在下面展示users對應的内容。

　　在對應的控制器中，采用了$watch這種監控方法，監控username屬性的變化。當username屬性變化時，會觸發請求方法。

　　控制器多注入了一個$timeout變量，該變量用于控制輸入的時間。代碼觀察$timeout(function(...),350);當輸入的間隔超過350ms時，就會觸發相應函數function(...)。這樣可以有效的防止，不停的重新整理請求，造成網頁的重新整理抖動。

　　在函數内部，調用了我們自己的服務提供的userList方法。當請求成功時，綁定傳回值到users中。users會動态的重新整理内容。

　　檢視程式的示範結果：

　　通過測試發現：當我們快速的輸入4321時，雖然$watch都監控到了變量的變化，但是隻有停止時間超過350ms才會發送請求。

　　全部的代碼樣例：

　　關于自定義的服務，有下面幾點需要注意：

　　1 它的使用場景：由于可以在服務中抽取公共調用的方法，是以可以把多個控制器中相同的功能抽取出來，形成一個服務。

　　2 單例：服務都是單例的，一個應用生命周期内，隻有一個服務的執行個體存在。

　　3 注入器：服務的執行個體化都是有注入器injector建立的。在我們建立controller控制器時，後面指明了需要注入一個myService服務，注入器就會去執行個體化該服務。