Eviter l’effet yoyo avec les ressources d’AngularJS

Eviter l'effet yoyo avec les ressources d'AngularJS

Cette semaine, je vous propose une (toute) petite astuce pour éviter un problème esthétique sur votre application faite avec AngularJS : l’effet yoyo dans la vue au moment du rechargement des données avec les ressources.

Le problème

Il est simple : votre application AngularJS présente une liste générée avec ng-repeat.
Pour une raison ou une autre, par exemple le rechargement des données, un filtre appliqué depuis le serveur, ou encore un changement de pagination toujours côté serveur, cette liste est vidée puis remplie.

Ce n’est pas très grave, mais si la liste est suivie de boutons ou d’autres éléments, ceux-ci montent puis redescendent, et ce n’est pas joli.

En images, la liste est remplie :

Eviter l’effet yoyo avec les ressources d’AngularJS : l'état initial
L’état initial
Vous cliquez sur le bouton pour accéder à la deuxième page, la liste est vidée pendant le chargement :

Eviter l’effet yoyo avec les ressources d’AngularJS : pendant le chargement
Pendant le chargement
Et elle reprend sa taille initiale (ou pas) :

Eviter l’effet yoyo avec les ressources d’AngularJS : les nouvelles données chargées
Les nouvelles données chargées
L’idéal serait de passer de l’état initial aux nouvelles données chargées sans vider la liste entre les deux.

La solution

La solution est très simple, mais elle peut nécessiter un changement de vos habitudes, en modifiant :

$scope.users = User.query();

en ceci :

User.query({}, function(data) { $scope.users = data; });

Dans le premier cas, User.query() retourne une ressource avec une liste vide pour la stocker dans $scope.users. Une fois la requête exécutée avec succès, la liste est mise à jour automatiquement avec les données reçues.
Et c’était bien pratique.

Dans le deuxième cas, la ressource $scope.users n’est pas vidée au début de la requête, elle est simplement mise à jour dans la callback de succès.

D’ailleurs, une solution pour vider la liste en cas d’erreur si c’est nécessaire est :

User.query(
	{},
	function(data) { $scope.users = data; },
	function(response) { $scope.users = []; },
);

La même chose, avec les promises :

User.query({}).$promise
.then(function(data) { $scope.users = data; })
.catch(function(response) { $scope.users = []; });

Le mot de la fin

Nous verrons bientôt comment décorer notre liste, pour donner un retour à l’utilisateur et indiquer que l’action est en cours.

L'illustration de cet article est une image sous licence CC BY-SA 3.0 par TheDailyNathan

Cet article vous a été utile ? Partage it !

4 réflexions au sujet de « Eviter l’effet yoyo avec les ressources d’AngularJS »

  1. Bonjour, merci pour l’astuce, c’est vrai que cela va un peu changer de nos vielles habitudes mais il faut savoir s’adapter à de bonne chose dans la vie!

  2. Salut Du, je te retrouve dur la toile par l intermédiaire de ton site de partage, excellent !
    Merci pour ces infos j espère que la famille va bien 🙂
    Al

    1. Hello Al,
      Content de te voir ici 🙂 et aussi de voir que tu t’es mis à AngularJS !
      Je te contacte par mail pour éviter les détails croustillants publiquement 😉
      David

Laisser un commentaire

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

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.