Tutoriel AngularJS : itérateurs et filtres

Alex Young

Traducteur

LSMetag

Cet article est la traduction de AngularJS: Iterators and Filters publié sur DailyJS.

Commentez

- Titre : Tutoriel AngularJS : itérateurs et filtres

- Auteur : Alex Young

- Traducteur : LSMetag

- Parution : 6 mars 2014

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2014 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. L'itération dans les contrôleurs

- III. Stockage des données

- IV. Conclusion

- V. Remerciements

I - Avant-propos

- Partie 1 : Google, Twitter, et AngularJS

- Partie 2 : créer un lecteur de flux RSS

- Partie 3 : afficher le flux RSS

- Partie 4 : gérer les flux RSS

- Partie 5 : tests

- Partie 6 : ajouter des dépendances

- Partie 7 : validation d'un formulaire

- Partie 8 : itérateurs et filtres

- Partie 9 : installation

AngularJS est doté d'un système de filtrage et de tri riche basé sur des prédicats. Le filtre orderBy peut être utilisé avec la directive ng-repeat :

<ul>
<li ng-repeat="item in stories | orderBy:predicate:date"><a href=""></a></li>
</ul>

Aujourd'hui, nous allons utiliser orderBy à l'intérieur d'un contrôleur utilisant l'injection de dépendances pour organiser de multiples flux en un torrent de news triées par date.

II - L'itération dans les contrôleurs

Avant de trier et d'afficher des éléments (des stories dans l'exemple), nous avons besoin de les récupérer dans une structure de données adaptée. Un tableau suffira (app/scripts/controllers/main.js) :

$scope.stories = [];

Ensuite, nous devons concaténer des éléments à cette collection, mais seulement s'ils n'ont pas déjà été ajoutés. Pour ce faire, nous allons utiliser une fonction pour séparer cela de la récupération des éléments :

$scope.fetchFeed = function(feed) {
feed.items = [];

var apiUrl = "http://query.yahooapis.com/v1/public/yql?q=select * from xml where url='";
apiUrl += encodeURIComponent(feed.url);
apiUrl += "' and itemPath='feed.entry'&format=json&diagnostics=true&callback=JSON_CALLBACK";

$http.jsonp(apiUrl).
success(function(data) {
if (data.query.results) {
feed.items = data.query.results.entry;
}
addStories(feed.items);

La fonction addStories a juste besoin de parcourir chaque élément du flux pour déterminer s'il a déjà été ajouté à $scope.stories. L'API angular.forEach du module ng est parfaite pour ça :

function addStories(stories) {
var changed = false;
angular.forEach(stories, function(story, key) {
if (!storyInCollection(story)) {
$scope.stories.push(story);
changed = true;
}
});
}

Comme vous pouvez le voir, forEach accepte un tableau et une fonction pour récupérer chaque élément. La fonction storyInCollection doit maintenant parcourir chaque élément existant pour vérifier qu'il a déjà été ajouté. Déterminer quel élément est unique est facile puisque les flux ont un id :

function storyInCollection(story) {
for (var i = 0; i < $scope.stories.length; i++) {
if ($scope.stories[i].id === story.id) {
return true;
}
}
return false;
}

III - Stockage des données

Maintenant que nous avons récupéré une liste d'éléments, il faut les trier par date, comme dans un vrai lecteur de flux. À chaque fois que addStories change la liste d'éléments, il faut la trier. AngularJS n'a pas vraiment de méthodes du style map ou some qu'on peut trouver dans ECMAScript 5, mais il fournit une API permettant d'accéder aux modules de filtrage et de tri typiquement utilisés dans les templates.

Pour accéder à cette fonctionnalité, il faut charger $filter :

angular.module('djsreaderApp')
.controller('MainCtrl', function($scope, $http, $timeout, $filter) {

$filter va retourner une fonction sachant trier ou filtrer des tableaux. Ça veut dire qu'il faut l'appeler avec le nom de la méthode souhaitée et appeler la valeur retournée avec un tableau et une expression : $filter(filter)(array, expression). Pour ajouter un tri à nos flux, nous appelons $filter()() et nous mettons à jour le tableau $scope.stories :

// A la fin de addStories
if (changed) {
$scope.stories = $filter('orderBy')($scope.stories, 'date');
}

La dernière chose à faire consiste à mettre à jour le template dans le fichier app/views/mail.html :

<ul>
<li ng-repeat="item in stories"><a href=""></a></li>
</ul>

Si vous ajoutez plusieurs flux en utilisant l'interface Web, nous devrions les voir combinés en un torrent de news.

IV - Conclusion

La version pour ce tutoriel est la ff4d6a6.

V - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original AngularJS: Iterators and Filters du site DailyJS.

Je remercie également f-leb pour sa relecture attentive et assidue.