$ HTTP是從遠程服務器讀取數據的AngularJS服務。
AngularJS $ HTTP
所述AngularJS $http服務向服務器的請求，並返回一個響應。
例
做一個簡單的請求到服務器，並將結果顯示在頁眉：
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome
message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome
= response.data;
});
});
</script>
試一試» 方法
上面的例子使用了.get的方法$http服務。
該方法不用徬徨是$ http服務的快捷方法。 有幾種快捷的方法：
-
.delete() -
.get() -
.head() -
.jsonp() -
.patch() -
.post() -
.put()
上面的方法是調用$ http服務的所有快捷方式：
例
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySucces(response) {
$scope.myWelcome = response.data;
}, function myError(response)
{
$scope.myWelcome =
response.statusText;
});
}); 試一試» 上面的例子與對象作為參數執行$ http服務。 該對象被指定HTTP方法，URL，做成功了什麼，什麼就做失敗。
屬性
從服務器的響應是具有這些屬性的對象：
-
.config用於生成請求的對象。 -
.data串，或一個對象，攜帶來自服務器的響應。 -
.headers用於獲取標題信息的功能。 -
.status若干限定HTTP狀態。 -
.statusText限定HTTP狀態的字符串。
例
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content
= response.data;
$scope.statuscode
= response.status;
$scope.statustext
= response.statustext;
});
}); 試一試» 為了處理錯誤，增加一個功能到.then方法：
例
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("wrongfilename.htm")
.then(function(response) {
//First function handles success
$scope.content
= response.data;
}, function(response) {
//Second function handles error
$scope.content = "Something went wrong";
});
}); 試一試» JSON
你從響應得到的數據是預計將在JSON格式。
JSON是傳輸數據的好方法，而且很容易AngularJS中使用，或任何其他JavaScript。
例如：在服務器上，我們有返回一個包含15家客戶JSON對象，都包裹在陣列稱為文件records 。
例
在ng-repeat指令是完美的通過數組循環：
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li
ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('customersCtrl',
function($scope, $http) {
$http.get("customers.php").then(function(response) {
$scope.myData
= response.data.records;
});
});
</script>
試一試» 應用解釋說：
該應用程序定義了customersCtrl控制器，具有$scope和$http對象。
$http是請求外部數據的XMLHttpRequest對象 。
$http.get()從讀取JSON數據 http://www.w3ii.com/angular/customers.php 。
上的成功，則控制器創建屬性， myData ，在範圍內，從服務器JSON數據。