$ http est un service AngularJS pour lire des données depuis des serveurs distants.
AngularJS $ http
Le AngularJS $http service fait une demande au serveur, et renvoie une réponse.
Exemple
Faire une simple demande au serveur, et afficher le résultat dans un en-tête:
<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>
Essayez - le vous - même » Méthodes
L'exemple ci - dessus utilise le .get procédé de la $http service.
La méthode de .get est une méthode de raccourci du service $ http. Il existe plusieurs méthodes de raccourci:
-
.delete() -
.get() -
.head() -
.jsonp() -
.patch() -
.post() -
.put()
Les méthodes ci-dessus sont tous les raccourcis d'appeler le service $ http:
Exemple
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;
});
}); Essayez - le vous - même » L'exemple ci-dessus exécute le service de $ http avec un objet comme argument. L'objet spécifie la méthode HTTP, l'URL, ce qu'il faut faire en cas de succès, et ce qu'il faut faire en cas d'échec.
Propriétés
La réponse du serveur est un objet avec les propriétés suivantes:
-
.configl'objet utilisé pour générer la demande. -
.dataune chaîne, ou un objet, portant la réponse du serveur. -
.headersune fonction à utiliser pour obtenir des informations d' en- tête. -
.statusun nombre définissant le statut HTTP. -
.statusTextune chaîne définissant le statut HTTP.
Exemple
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;
});
}); Essayez - le vous - même » Pour gérer les erreurs, ajouter un plus de fonctions à la .then méthode:
Exemple
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";
});
}); Essayez - le vous - même » JSON
Les données que vous obtenez de la réponse devrait être au format JSON.
JSON est un excellent moyen de transport de données, et il est facile à utiliser dans les AngularJS, ou tout autre JavaScript.
Exemple: Sur le serveur , nous avons un fichier qui retourne un objet JSON contenant 15 clients, le tout enveloppé dans un tableau appelé records .
Exemple
Le ng-repeat directive est parfait pour une boucle à travers un tableau:
<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>
Essayez - le vous - même » Demande a expliqué:
L'application définit le customersCtrl contrôleur, avec un $scope et $http objet.
$http est un objet XMLHttpRequest pour demander des données externes.
$http.get() lit les données JSON de http://www.w3ii.com/angular/customers.php .
En cas de succès, le contrôleur crée une propriété, myData , dans le champ d' application, avec des données JSON à partir du serveur.