CRUD avec $resource

Fatigué d’être limité à lire des données avec des requêtes AJAX GET? Voici le temps d’apprendre à utiliser le service $resource offert par Angular. Ce service a spécialement été conçu afin de simplifier les communications avec un serveur RESTful. Il permet d’effectuer les opérations de CRUD (Create Read Update Delete) efficacement.

Le service $resource est basé sur $http et possède la logique afin de sélectionner la bonne méthode HTTP en fonction de vos besoins. Donc, pour une opération de création, la méthode POST sera utilisée, pour une opération de lecture, la méthode GET sera utilisée et pour une opération de suppression, la méthode DELETE sera utilisée.

Installer ngResource

L’installation se fait en trois étapes : télécharger la dépendance, la configurer dans votre application Angular et vérifier que le .js est bien inclus dans votre app.

Avant de procéder à l’installation, vérifier que le module n’est pas déjà installé.

Téléchargement de ngResource

Configuration de ngResource

angular-resource.js

La dernière étape consiste à vérifier que le fichier .js est bien inclus dans votre page. Cette librairie devrait être incluse après l’inclusion de angular.js

Structure de l’API souhaitée

Afin de faciliter l’utilisation de $resource, votre API REST devrait être construit selon les spécifications du tableau suivant :

URL VERBE HTTP Corps du message (BODY) Résultat
http://api.com/post GET vide Retourne tous les enregistrements
http://api.com/post POST Chaîne JSON Crée un nouveau Post
http://api.com/post/:id GET vide Retourne un seul Post
http://api.com/post/:id PUT Chaîne JSON Met à jour un Post
http://api.com/post/:id DELETE vide Supprime un Post

Exemple d’utilisation de $resource

L’exemple suivant encapsule une ressource à l’intérieur d’un service nommé Post. Ce nouveau service pourra être injecté et utilisé dans vos contrôleurs.

Pour les utilisateurs du générateur angular-fullstack, vous pouvez créer un squelette de service facilement.
Voici un exemple :

Utiliser votre service $resource dans un contrôleur

Le code suivant présente l’utilisation de notre nouveau service. Il démontre l’utilisation des fonctions query, get, delete et save.

Notez l’injection du service Post dans la fonction du contrôleur.

Le code précédent présente plusieurs méthodes d’un objet $resource, en voici un résumé :

  • Post.get();
  • Post.save();
  • Post.query();
  • Post.delete();

Lorsque la méthode get est lancée, un objet de type Resource est retourné, cet objet nous offre les méthodes suivantes :

  • post.$save();
  • post.$delete();

Une promesse avec $promise

Dans le mode asynchrone des appels AJAX, il est primordial de comprendre que l’objet retourné par Post.get(), est une promesse d’un objet dans le futur.

Lors de l’exécution de la commande suivante :

La console du navigateur nous affiche cela :

En résumé, cet objet de type Resource, contient une promesse qui n’a pas été résolue. Donc, les données ne sont pas encore disponibles!

Quelques millisecondes plus tard, les données sont disponibles et $resolved est à true.

Ne soyez pas impatient

Pour la raison précédente, l’exemple suivant est erroné, puisque la promesse ne sera peut-être résolue au moment d’appeler la méthode $delete. Donc au moment d’appeler $delete, l’attribut myPost.id est indéfini.

Avec le $scope, c’est plus simple

Par contre, dans l’exemple suivant, en associant une ressource avec le $scope, tout se passe bien. Le mécanisme relié au $scope est programmé afin d’attendre que la promesse soit résolue avant d’afficher les données dans votre vue.

Autre exemple qui fonctionne aussi bien :

Mise à jour d’un objet $resource avec PUT

Si vous désirez utiliser le verbe PUT, malheureusement, $resource ne supporte pas ce verbe. Il faut donc mettre à jour votre service en spécifiant le nom d’une nouvelle méthode et d’un nouveau verbe.

La signature de $resource possède l’attribut actions. Il est donc possible d’ajouter ou de modifier des actions par défaut.

Voyons comment faire en code :

Suite à cet ajout, vous pouvez utiliser la méthode update sur un objet de type $resource :

Tests unitaires pour votre $resource

Puisque $resource est basé sur le service $http, on peut donc utiliser $httpBackend afin de tester le bon fonctionnement du code.

Vous avez préalablement utilisé when afin de simuler une réponse lors d’un appel de type GET.

Il sera maintenant possible d’utiliser les méthodes when suivantes :

  • whenDELETE(url, [headers], [keys]);
  • whenPOST(url, [data], [headers], [keys]);
  • whenPUT(url, [data], [headers], [keys]);

Ainsi que les méthodes expect correspondantes :

  • expectDELETE(url, [headers], [keys]);
  • expectPOST(url, [data], [headers], [keys]);
  • expectPUT(url, [data], [headers], [keys]);

https://docs.angularjs.org/api/ngMock/service/$httpBackend

Besoin d’un API REST pour tester $resource?

Maintenant, voyons comment mettre en place un API REST de développement.
L’article suivant présente 2 solutions : Jsonplaceholder et json-server.

  • jsonplaceholder est un service en ligne aussi disponible en installation locale. Par contre, il demeure en lecture seule et simule des réponses lorsque vos lancez les opérations de modification.
  • json-server doit être installé localement, mais permet les opérations de mise à jour.

Pour en avoir plus, lisez l’article : Mettre en place un API REST de développement.

Conclusion

Faire du CRUD avec $resource c’est plus simple 😉

Références

Comments

comments

0 réponses

Répondre

Want to join the discussion?
Feel free to contribute!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *