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 :
- $http : un service bas niveau qui encapsule les appels HTTP via XMLHttpRequest ou JSONP
- $resource : un service dédiè à l’appel d’API REST
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).
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with status
// code outside of the <200, 400) range
});
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 :
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
Ce qui donne:
var Friend = $resource(url);
// create an instance
var friend = new Friend();
// or query to retrieve an instance
Friend.get({'id': id}, function(data) {
friend = data;
});
// save object to server
friend.$save();
Les méthodes de classe ou d'objet peuvent être appelées avec les paramètres suivant :
HTTP GET "class" actions: Resource.action([parameters], [success], [error]) non-GET "class" actions: Resource.action([parameters], postData, [success], [error]) non-GET instance actions: instance.$action([parameters], [success], [error])
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 :
$scope.Friend = $resource('/api/friends' + '/:id', {id: '@_id'}, {'update': {method: 'PUT' }});
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.
