$ 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数据。