AngularJS

$http

Nous allons voir comment faire pour que notre application angularJS interagisse avec les éléments sur le serveur.

$http.get

Ce service permet la récupération d'informations depuis le serveur (le plus souvent du contenu formaté en JSON).
Lorsque vous faites appel à ce service depuis le controller, angularJS vous retourne deux méthodes : success et error. A vous ensuite de mettre le contenu du JSON dans le scope si l'appel a fonctionné ou bien d'afficher un message d'erreur dans le cas contraire.

  1. $http.get("fichier.json").
  2. success(function(data, status) {
  3. $scope.donnees = data;
  4. }).
  5. error(function(data, status) {
  6. document.getElementById("erreur").innerHTML = "Erreur lors de l'appel du json"
  7. });

$http.post

On peut aussi envoyer des éléments vers un fichier du serveur développé en langage serveur (PHP, .Net, Java, nodeJS...).
Ce fichier pourra par exemple récupérer le POST, le traiter et inscrire les informations en base de données.

  1. $http.post("fichier.php",{info:'hello world'}).
  2. success(function(data, status) {
  3. document.getElementById("info").innerHTML = "Ca marche !"
  4. }).
  5. error(function(data, status) {
  6. document.getElementById("erreur").innerHTML = "Erreur lors de l'envoi"
  7. });

Les 5 arguments reçus

data
Retourne les données récupérées dans le fichier appelé.

status
Retourne le code status de l'appel. S'il est égal à 200 ou 299, la méthode success sera appelé. Un autre code appelera la méthode error.

headers
Retourne les informations sur l'en-tête récupéré.

config
Retourne un objet comprennant l'ensemble des informations de configuration de la demande.

statusText
Retourne le status de l'appel au format texte.

Exemple

Récupération de données d'un fichier JSON
  • 1 : singe
  • 2 : loup
  • 3 : chien
  • 4 : chat
  • 5 : ours
  • 6 : araignée