Http
AngularJS $http
AngularJS $http 服務(wù)向服務(wù)器發(fā)出請(qǐng)求，并返回響應(yīng)。
實(shí)例
向服務(wù)器發(fā)送一個(gè)簡(jiǎn)單請(qǐng)求，并在標(biāo)題中顯示結(jié)果：
<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>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
方法
上面的例子使用 $http 服務(wù)的 .get 方法。
.get 方法是 $http 服務(wù)的快捷方法。有以下幾種快捷方法：
.delete().get().head().jsonp().patch().post().put()
上述方法都是調(diào)用 $http 服務(wù)的快捷方式：
實(shí)例
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
上面的例子使用一個(gè)對(duì)象作為參數(shù)來(lái)執(zhí)行 $http 服務(wù)。該對(duì)象指定 HTTP 方法、URL、成功時(shí)執(zhí)行的操作以及失敗時(shí)執(zhí)行的操作。
屬性
來(lái)自服務(wù)器的響應(yīng)是具有以下屬性的對(duì)象：
.config用于生成請(qǐng)求的對(duì)象.data字符串或?qū)ο?，攜帶來(lái)自服務(wù)器的響應(yīng).headers用于獲取標(biāo)頭信息的函數(shù).status定義 HTTP 狀態(tài)的數(shù)字.statusText定義 HTTP 狀態(tài)的字符串
實(shí)例
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;
});
});
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
要處理錯(cuò)誤，請(qǐng)向 .then 方法添加一個(gè)函數(shù)：
實(shí)例
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";
});
});
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
JSON
從響應(yīng)中獲取的數(shù)據(jù)應(yīng)為 JSON 格式。
JSON 是傳輸數(shù)據(jù)的絕佳方式，并且很容易在 AngularJS 或任何其他 JavaScript 中使用。
舉例：我們?cè)诜?wù)器上有一個(gè)文件，該文件返回一個(gè)包含 15 個(gè)客戶的 JSON 對(duì)象，所有這些都被包裝在一個(gè)名為 records 的數(shù)組中。
請(qǐng)點(diǎn)擊此處查看 JSON 對(duì)象。
實(shí)例
The ng-repeat directive is perfect for looping through an array:
<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>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
應(yīng)用程序說(shuō)明：
該應(yīng)用程序定義了 customersCtrl 控制器，具有 scope 和 http 對(duì)象。
$http 是一個(gè) XMLHttpRequest 對(duì)象，用于請(qǐng)求外部數(shù)據(jù)。
$http.get() 從 http://ipnx.cn/angular/customers.php 讀取 JSON 數(shù)據(jù)。
成功后，控制器在作用域中創(chuàng)建一個(gè)屬性 myData，其中包含來(lái)自服務(wù)器的 JSON 數(shù)據(jù)。