通過AngularJS實現前端與后台的數據對接(二)——服務(service,$http)篇


什么是服務

      服務提供了一種能在應用的整個生命周期內保持數據的方法,它能夠在控制器之間進行通信,並且能保證數據的一致性。 服務是一個單例對象,在每個應用中只會被實例化一次(被$injector實例化),並且是延遲加載的(需要時才會被創建)。服務提供了把與特定功能相關聯的方法集中在一起的接口。(此解釋來源於AngularJS權威教程)。

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

 

基礎知識(源於AngularJS權威教程)

1、service():

    使用service()可以注冊一個支持構造函數的服務,它允許我們為服務對象注冊一個構造函數。

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

     name(字符串) 要注冊的服務名稱。

     constructor(函數) 構造函數,我們調用它來實例化服務對象。

2、$http():

  使用$http()服務可以將應用同來自遠程服務器的信息集成在一起。

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

 

介紹通過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': 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這個鍵。

在這里,筆者為讀者為介紹兩種 數據格式轉化的方法

   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指的是傳遞來的事件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM