AngularJS（八）：http服務

本文也同步發表在我的公眾號“我的天空”

 http服務

之前我們的示例都是在本地獲取模擬數據，在實際應用中，所有的項目都將不可避免的從後臺獲取數據，我們都是通過Ajax來實現與伺服器的通信。在AngularJS中，我們使用http服務來實現與後臺的數據交互，http服務的使用請看以下代碼：

 

    var app=angular.module("myApp",[]);
    app.controller("person",function($scope,$http){
        $http.get('http://test.php')
       .success(function(data){
           //載入成功後的處理，data為返回的數據
       }).error(function(data){
           //載入失敗後的處理，data為返回的數據
       })
     });

在以上代碼中，我們在控制器代碼中添加了$http模塊，這樣便可以使用http服務了，我們採取get的方式訪問了一個url，隨後在success（）與error函數中分別針對載入成功或失敗做相應的處理。測試http服務時請註意，所請求的url必須是在web服務上的，而不能在本地測試。如果要向後臺傳遞參數，則應該添加params參數，如下：

$http.get('http://test.php',{params:{id:'5',name:'張三'}
    }) .success(function(data){
           ......
    }).error(function(data){
           ......
     })

在以上代碼中，我們添加了兩個傳遞到後臺的參數，分別是id和name，其值分別是“5”與“張三”。

如果要使用POST方式與後臺通信，則應使用$http.post()方法，要註意的是params參數應該放在第三個參數位置，如下：

$http.post('http://test.php','',{params:{id:'5',name:'張三'}})

通常，我們會給請求傳遞一個配置對象，以便靈活的對請求進行配置，其調用形式如下：$http(config)，config為一個對象，可對其設置請求方式（get/post）、請求的url、傳遞參數、超時時間等。如以上的示例可寫成如下代碼：

$http({
    method:'post',
    url:'http://test.php',
    params:{id:5,name:'張三'}
   }).success(function(data){
        ......
   }).error(function(data){
       ......
  })

對於config的更多配置參數，可以查閱AngularJS相關文檔。