AngularJS AJAX - $http
$http est un service AngularJS permettant de lire des données à partir de serveurs distants.
AngularJS $ http
Le service AngularJS envoie $httpune requête au serveur et renvoie une réponse.
Exemple
Faites une simple requête au serveur, et affichez 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>
Méthodes
L'exemple ci-dessus utilise la .getméthode du $http
service.
La méthode .get est une méthode raccourcie du service $http. Il existe plusieurs méthodes de raccourci :
.delete().get().head().jsonp().patch().post().put()
Les méthodes ci-dessus sont toutes des raccourcis pour appeler le service $http :
Exemple
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;
});
});
L'exemple ci-dessus exécute le service $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 ces propriétés :
.configl'objet utilisé pour générer la requête..dataune chaîne, ou un objet, transportant 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;
});
});
Pour gérer les erreurs, ajoutez une autre fonction à la .thenmé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";
});
});
JSON
Les données que vous obtenez de la réponse doivent être au format JSON.
JSON est un excellent moyen de transporter des données, et il est facile à utiliser dans AngularJS ou tout autre JavaScript.
Exemple : sur le serveur, nous avons un fichier qui renvoie un objet JSON contenant 15 clients, tous encapsulés dans un tableau appelé records.
Cliquez ici pour jeter un œil à l'objet JSON.
Exemple
La ng-repeatdirective est parfaite pour parcourir 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>
Application expliquée :
L'application définit le customersCtrlcontrôleur, avec un
objet $scopeet
$http.
$httpest un objet XMLHttpRequest pour demander des données externes.
$http.get()lit les données JSON de
https://www.w3schools.com/angular/customers.php .
En cas de succès, le contrôleur crée une propriété, myData, dans la portée, avec les données JSON du serveur.