AngularJS : AJAX et REST

Même si avec AngularJS vous pouvez développer des applications sans accéder au serveur, vous serez vite limité dès lors qu’il faut stocker de l’information. La communication avec un serveur est donc indispensable et AngularJS fournit 2 services pour cela :

Par ailleurs pour faciliter les tests 2 objets $httpBackend (un pour les tests unitaires, l’autre pour les tests fonctionnels) permettent de simuler le comportement d’un serveur.

Pour présenter l’utilisation de ces 2 services nous allons reprendre l’exemple précédent. La liste d’amis va maintenant être stockée coté serveur et les appels serveur vont permettre de récupérer un ou plusieurs éléments de la liste, de les modifier, de les supprimer et d’en créer de nouveau (CRUD).
Nous allons simuler les accés serveurs à l’aide de $httpBackend et ses méthodes when*.

AJAX avec $http

Le service $http utilise l’API deferred/promise via le service $q. $http(config) est une fonction avec en paramètre un dictionnaire de paramètres et renvoyant un objet promise qui implémente 2 fonctions success(data) et error(msg).

Pour simplifier l’écriture, l’API propose les méthodes suivantes : $http.get(config), $http.post(config, data), $http.head(config), $http.put(config, data), $http.delete(config), $http.jsonp(config).

Il y a aussi une fonctionnalité de cache permettant de stocker en mémoire la réponse.

Mais la documentation étant assez claire il n’est pas nécessaire d’en dire plus.

L’exemple ci-dessous fait le tour des différentes méthodes d’appel et permet d’illustrer clairement l’utilisation de $http. Vous retrouverez dans app.js la déclaration des routes et la simulation du comportement serveur via l’objet $httpBackend et dans controllers.js les différents appels via $http :

A noter l’utilisation de $http.jsonp(config) qui se différencie par la nécessité d’ajouter JSON_CALLBACK en paramètre de l’URL.
Ainsi que l’intercepteur de réponse sur lequel on reviendra dans un prochain article consacré à l’authentification.

REST avec $resource

A la différence de $http , $resource fourni des méthodes explicites d’appel au serveur.
$resource(url[, paramDefaults][, actions]) est une fonction qui retourne une classe qui contient les méthodes suivantes :

Ce qui donne:

Les méthodes de classe ou d’objet peuvent être appelées avec les paramètres suivant :

Les méthodes peuvent être étendues pour créer ses propres appels et rendre le code plus explicite, c’est le cas dans l’exemple avec l’ajout de la méthode update :

L’exemple ci-dessous reprend l’exemple précédent à l’identique mais en utilisant $resource à la place de $http, la méthode update est utilisée pour mettre à jour le nom d’un ami :

A noter que $resource est déclaré dans un module séparé des modules de base, c’est à dire qu’il faut ajouter le fichier js (voir index.html) et déclarer la dépendance ngResource à votre module (voir controllers.js).

L’utilisation de ses services est d’une grande simplicité, les 2 exemples parlent d’eux mêmes et permettent d’avoir un aperçu des différentes méthodes d’appels.