Blog
AngularJS : communiquer avec un serveur proposant une API RESTful

Partager

Les API proposant des architectures REST sont de plus en plus présentes. Un de nos précédents billets traite de l’implémentation d’une telle architecture côté serveur (Zend Framework 2). Aujourd’hui nous allons voir comment il est possible, en utilisant AngularJS, de communiquer avec ces API en utilisant le service $resource.

$resource ou $http ?

La plupart du temps, il est suffisant d’utiliser le service $http pour effectuer des requêtes AJAX sur un serveur. Cependant Angular nous offre un service qui, je cite la documentation "lets you interact with RESTful server-side data sources". Ça serait dommage de se passer de cette abstraction d’$http qui nous facilite la vie.

Consommer un Web Service

$resource est un service séparé du code d’AngularJS et n’est pas inclus par défaut dans la librairie. Il est défini dans le fichier angular-resource.js. Pensez donc à charger ce fichier, après Angular :

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-resource.js"></script>

Comme c’est un service additionnel, il est nécessaire de le déclarer en tant que dépendance de votre module et de l’injecter dans le service désiré (dans cet exemple, une factory pour récupérer des informations sur les utilisateurs) :

var user = angular.module('app.user', ['ngResource']);
var userFactory = function($resource){
	return $resource('/api/user/:slug', { slug : '@slug' }, 
		{
			'update' : { method:'PUT' },
		});
};
	
user.factory('User', [ '$resource', userFactory ]);
  • On créé un objet $resource qui requêtera L’URL : '/api/user/:slug'.
  • L’objet en 2eme paramètre de la $resource contient le(s) paramètre(s) par défaut. Ici, il est préfixé avec "@" pour signifier qu’on y accède depuis la donnée de notre objet métier passé en paramètre (nécessaire pour les requêtes qui ne sont pas en GET).
  • On déclare les actions disponibles sur cette URL. Par défaut, les actions suivantes sont déjà implémentées :
    'get':    {method:'GET'},
    'save':   {method:'POST'},
    'query':  {method:'GET', isArray:true},
    'remove': {method:'DELETE'},
    'delete': {method:'DELETE'}
    On rajoute simplement l’action 'update' pour mettre à jour les utilisateurs en utilisant la méthode HTTP PUT.

Maintenant que notre service est créé, nous pouvons l’injecter à tous les controllers qui en ont besoin et créer notre CRUD pour effectuer les 4 opérations sur l’utilisateur :

var user = angular.module('app.user'). controller('UserCtrl', ['$scope', 'User', function($scope, User) {
$scope.users = {};

//Perform "GET http://mydomain.com/api/user/"
User.get().$promise.then(function(data) {
      $scope.users = data;
      }, function(error){/*Error treatment*/};);
}]);

//Perform "DELETE http://mydomain.com/api/user/:slug"
var deleteUser = function(user) {
   User.delete(user.slug);
};

//Perform "POST http://mydomain.com/api/user/:slug"
var createUser = function(user) {
   User.save(user);
};

//Perform "PUT http://mydomain.com/api/user/:slug"
var editUser = function(user) {
   User.update(user);
};

}];

Il faut savoir qu’un autre service développé par la communauté existe aussi : Restangular. Son objectif est exactement le même que $resource mais il corrige quelques faiblesses (support de toutes les méthodes HTTP, abstraction pour gérer les urls plus facilement, support des Etags en natif, etc). N’hésitez pas à y jeter un coup œil.

(Version d’AngularJS utilisé pour ce tutorial : 1.2.5)

comments powered by Disqus