什么是服務?
服務提供了一種能在應用的整個生命周期內保持數據的方法,它能夠在控制器之間進行通信,並且能保證數據的一致性。 服務是一個單例對象,在每個應用中只會被實例化一次(被$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': 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指的是傳遞來的事件
