AngularJS AJAX - $http

$http est un service d'AngularJS, utilisé pour lire des données à partir de serveurs distants.

AngularJS $http

AngularJS $http Le service envoie une requête au serveur et retourne une réponse.

Exemple

Envoyer une requête simple au serveur et afficher le résultat dans le titre :

<div ng-app="myApp" ng-controller="myCtrl">
<p>Message d'accueil d'aujourd'hui : </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éthode

Dans l'exemple ci-dessus, $http du service .get Méthode.

La méthode .get est un raccourci pour le service $http. Il existe plusieurs raccourcis :

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

Les méthodes ci-dessus sont 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;
  });
});

Essayez-le vous-même

Dans l'exemple ci-dessus, un objet est utilisé comme paramètre pour exécuter le service $http. Cet objet spécifie la méthode HTTP, l'URL, l'action à exécuter en cas de succès et l'action à exécuter en cas d'échec.

Propriété

La réponse provenant du serveur est un objet ayant les propriétés suivantes :

• .config Objet utilisé pour générer la requête
• .data Chaine de caractères ou objet, portant la réponse provenant du serveur
• .headers Fonction pour obtenir des informations d'en-tête
• .status Définir le nombre de l'état HTTP
• .statusText Définir les chaînes de l'état 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, envoyez à .then Ajoutez une fonction à la méthode :

Exemple

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // Première fonction gère le succès
    $scope.content = response.data;
  }, function(response) {
    // Deuxième fonction gère les erreurs
    $scope.content = "Quelque chose s'est mal passé";
  });
});

Essayez-le vous-même

JSON

Les données obtenues à partir de la réponse doivent être au format JSON.

JSON est un excellent moyen de transmettre des données et il est facile à utiliser dans AngularJS ou dans tout autre JavaScript.

Par exemple : nous avons un fichier sur le serveur qui retourne un objet JSON contenant 15 clients, tous encapsulés dans un nom appelé records dans l'array.

Cliquez ici pour voir l'objet JSON.

Exemple

La directive ng-repeat est parfaite pour itérer sur 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

Description de l'application :

L'application définie customersCtrl Contrôleur, avec scope et http objet.

$http est un L'objet XMLHttpRequest, utilisé pour demander des données externes.

$http.get() Lues à partir de https://www.codew3c.com/angular/customers.php Données JSON.

Après succès, le contrôleur crée une propriété dans la portée myData, contenant des données JSON provenant du serveur.