經過AngularJS實現前端與後臺的數據對接（二）——服務（service，$http）篇

什麼是服務？

      服務提供了一種能在應用的整個生命週期內保持數據的方法，它可以在控制器之間進行通訊，而且能保證數據的一致性。 服務是一個單例對象，在每一個應用中只會被實例化一次（被$injector實例化），而且是延遲加載的（須要時纔會被建立）。服務提供了把與特定功能相關聯的方法集中在一塊兒的接口。（此解釋來源於AngularJS權威教程）。

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

 

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

一、service()：

    使用service()能夠註冊一個支持構造函數的服務，它容許咱們爲服務對象註冊一個構造函數。

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

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

　　　  constructor（函數） 構造函數，咱們調用它來實例化服務對象。

二、$http()：

　　使用$http()服務能夠將應用同來自遠程服務器的信息集成在一塊兒。

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

 

介紹經過AngularJS實現前端與後臺的數據對接——服務（service、$http）篇

一、初始化變量

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

例：

　　     

 

ps：

a、因爲this會常用，所以必須先把this用一個變量儲存起來，避免在function裏使用this的時候，出現bug

  （由於在function裏this指代的是window對象，而不是咱們想要的指代的對象）

b、對於變量來講，通常用var定義就好（可是，用var 定義的變量通常只在其做用域內可被使用）

c、對於function來講，通常用this，由於用了this以後，這些function能夠被控制器controller調用

二、請求數據

**三大步驟**

$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': edition
10             })
11         }).success(function (data,status,header,config) {
12             if(data.status == 'true'&& data.recordList){
13                 //每次請求，清空原數組內的數據,否則會出現數據累加，從而出現Bug
14                 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.state
24                     });
25                 });
26                 //總人數，將url請求的數據裏的recordCount賦值給inviteData.total
27                 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這個鍵。

在這裏，筆者爲讀者爲介紹兩種 數據格式轉化的方法

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

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

二、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()接收父級傳來的數據）。

 筆者在這裏爲讀者介紹一下事件的傳播：

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

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

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

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

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

 二、$broadcast()【父傳子】

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

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

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

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

　三、$on()【接收$broadcast()傳遞的數據】：

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

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

　　　　　二、function（event,data）{}：data指的是傳遞來的數據  event指的是傳遞來的事件