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 :

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 !