通過AngularJS實現前端與背景資料對接（二）——服務（service，$http）篇

標籤：

什麼是服務？

      服務提供了一種能在應用的整個生命週期內保持資料的方法，它能夠在控制器之間進行通訊，並且能保證資料的一致性。 服務是一個單例對象，在每個應用中只會被執行個體化一次（被$injector執行個體化），並且是消極式載入的（需要時才會被建立）。服務提供了把與特定功能相關聯的方法集中在一起的介面。（此解釋來源於AngularJS權威教程）。

       在筆者的認知中，服務就是用來建立資料，儲存資料，也可以向後台請求資料的一個很特別的“領域”，除此之外，服務還能與控制器之間進行緊密的通訊，保證資料能通過控制器顯示在頁面上。

 

基礎知識（源於AngularJS權威教程）

1、service()：

    使用service()可以註冊一個支援建構函式的服務，它允許我們為服務物件註冊一個建構函式。

　 service()方法接受兩個參數：

　　 　? name（字串） 要註冊的服務名稱。

　　　 ? constructor（函數） 建構函式，我們調用它來執行個體化服務物件。

2、$http()：

　　使用$http()服務可以將應用同來自遠程伺服器的資訊整合在一起。

　　$http服務是只能接受一個參數的函數，這個參數是一個對象，包含了用來產生HTTP請求的配置內容。這個函數返回一個promise對象，具有success和error兩個方法。

 

介紹通過AngularJS實現前端與背景資料對接——服務（service、$http）篇

1、初始設定變數

目的：便於把背景資料儲存到這些已經初始化好的變數中。除此之外，這些初始設定變數也是服務service與控制器controller保持緊密通訊的 媒介（用來傳遞資料）

例：

　　     

 

ps：

a、由於this會經常使用，因此必須先把this用一個變數儲存起來，避免在function裡使用this的時候，出現bug

  （因為在function裡this指代的是window對象，而不是我們想要的指代的對象）

b、對於變數來說，一般用var定義就好（但是，用var 定義的變數一般只在其範圍內可被使用）

c、對於function來說，一般用this，因為用了this之後，這些function可以被控制器controller調用

2、請求資料

**三大步驟**

$http({        method: ‘GET‘,        url: ‘/api/users.json‘    }).success(function(data,status,headers,config) {        // 當相應準備就緒時調用    }).error(function(data,status,headers,config) {        // 當響應以錯誤狀態返回時調用    });

ps：

　　a、$http()的用途：向後台發送請求，請求前端所需要的資料

　　b、success()的用途：在響應返回時，如果是請求成功，那麼就會有相應的操作

　　c、error的用途：在響應返回時，如果是請求成功，那麼就會有相應的操作

 

 **筆者做的項目中的一個小例子**

 1  this.getInviteData=function (pageNum,pageSize,sort,edition) { 2         $http({ 3             method:‘POST‘, 4             url:‘member_list.action‘, 5             data:JSON.stringify({ 6                 ‘pageNum‘: pageNum, 7                 ‘pageSize‘: pageSize, 8                 ‘sort‘: sort, 9                 ‘edition‘: edition10             })11         }).success(function (data,status,header,config) {12             if(data.status == ‘true‘&& data.recordList){13                 //每次請求，清空原數組內的資料,不然會出現資料累加，從而出現Bug14                 inviteData.data=[];15                 //遍曆資料庫裡的recordList裡的資料，record指的就是當前遍曆的資料16                 angular.forEach(data.recordList,function (record) {17                     //把record裡的資料存放區到 inviteData.data這個已經設定好的空數組裡18                     inviteData.data.push({19                         name:record.name,20                         department:record.department,21                         position:record.position,22                         phoneNumber:record.phoneNumber,23                         state:record.state24                     });25                 });26                 //總人數，將url請求的資料裡的recordCount賦值給inviteData.total27                 inviteData.total=data.recordCount;28                 inviteData.hasJoinedPeople=data.joinCount;29                 //向子級$scope傳遞資料30                 $rootScope.$broadcast(‘getInviteDataA‘,inviteData);31             }else if(data.status==‘false‘){32                 console.info(‘由於網路問題，暫時無法擷取資料‘);33             }34         }).error(function (data,status,header,config) {35             console.error(‘伺服器繁忙，請稍後再試！‘);36         });37     };

 ps：

a、並不是所有$http()裡都需要data這個鍵的，這是要視情況而言的。

    data：data代表的是這個$http()對象中包含了將會被當作訊息體發送給伺服器的資料。通常在發送POST請求時使用。

　 根據這次項目，筆者認為：如果 不需要 通過 傳參 向伺服器擷取資料的時候，就不需要data這個鍵；如果 需要 通過傳參向伺服器擷取資料，就需要data這個鍵。

在這裡，筆者為讀者為介紹兩種 資料格式轉化的方法

   1、JSON.parse()用於從一個字串中解析出json對象。

 var str = ‘{"name":"huangxiaojian","age":"23"}‘; JSON.parse(str);//age: "23"   name: "huangxiaojian"

2、JSON.stringify()用於從一個對象解析出字串。

var a = {a:1,b:2};JSON.stringify(a);// "{"a":1,"b":2}"

 

b、一開始做這個項目的時候，筆者覺得很奇怪，為什麼success()裡一開始就要有這個if(data.status == ‘true‘&& data.recordList){} else if(){}判斷？

    目的：當請求成功後，方便前端工作者在與後台進行資料對接時，判斷是否成功把資料對接到controller裡。當然，這也需要在頁面進行資料顯示的設定。這“是否成功”的結

  　　　 果將可以在頁面的控制台顯示出來。這些判斷有利於前端工作者在與後台進行資料對接時找bug

 

c、每次請求成功時，都必須清空原數組內的資料。

    筆者在項目中做了一個總人數的統計，在沒有清空儲存總人數這個資料的數組時，出現了一個Bug：所得的總人數不是想要的，而是資料不斷的累加。同時，清空數組，也是為了避免上一次請求的資料影響經過新請求後所需要的資料。

 

d、資料擷取angular.forEach()。

　 由於頁面是需要顯示資料庫裡的部分資料，那麼從後台擷取資料，就需要通過 angular.forEach() 把後台已經寫好的資料遍曆一遍，取出自己想要的資料，並放在已經初始

  化好的數組裡，方便與controller串連。

 

e、資料傳遞——$rootScope.$broadcast()

　　每次請求成功，都需要把在service裡的資料通過 $rootScope.$broadcast() 廣播給其在controller裡的 子級$scope（子級通過$scope.$on()接收父級傳來的資料）。

 筆者在這裡為讀者介紹一下事件的傳播：

　1、$emit()【子傳父】：

   使用$emit()來冒泡事件——把事件沿著範圍鏈向上派送（從子範圍到父範圍）

　　$emit()方法帶有兩個參數：

　　　　 1. name（字串）：要發出的事件名稱。

　　　　 2. args（集合）：一個參數的集合，作為對象傳遞到事件監聽器中。

 2、$broadcast()【父傳子】

　　使用用$broadcast()向下傳遞事件——把事件向下傳遞（從父範圍到子範圍）

　　$emit()方法帶有兩個參數：

　　　　　1. name（字串）：要發出的事件名稱。

　　　　　2. args（集合）：一個參數的集合，作為對象傳遞到事件監聽器中。

　3、$on()【接收$broadcast()傳遞的資料】：

　　$on()方法有兩個參數：

　　　　　1、name（字串）：監聽事件的名稱

　　　　　2、function（event,data）{}：data指的是傳遞來的資料  event指的是傳遞來的事件

通過AngularJS實現前端與背景資料對接（二）——服務（service，$http）篇