Découvrir Angular 2

Aborder la notion de filtre

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les filtres ou pipes vous permettent de filtrer des données. Découvrez comment les utiliser.
02:31

Transcription

Je vais maintenant m'adresser aux adeptes du templating, à ceux qui aiment faire de la template html. Mais qui de temps en temps peuvent être bloqués devant beaucoup de difficultés. Pourquoi ? Parce que sans arrêt, on est en train de faire les mêmes choses tout le temps. Et puis pour décorer, c'est pas tout le temps évident. Avec Angular 1 et avec Angular 2, on a accès à quelque chose qui s'appelle les filtres. Sous Angular 2, ça s'appelle maintenant les pipes. C'est comme ça. Qu'est-ce que ça veut dire, et à quoi ça va servir ? Concrètement, imaginons que ce titre là le "name", j'ai envie de le mettre en majuscules à un endroit et pas forcément en majuscules ailleurs. Je peux le faire en CSS par exemple. Mais je pourrais vouloir appliquer un style un peu plus compliqué. Je voudrais travailler la donnée. Pour travailler la donnée à l'affichage, donc à la compilation, vous allez utiliser les pipes. A juste titre, c'est bien qu'ils aient appelé ça les pipes parce que ça utilise le caractère pipe du clavier. Vous savez cette espèce de barre. Et ensuite vous allez passer le nom d'un filtre. Sous Angular, il en existe quelques uns. On les détaillera un petit peu après. Mais vous pouvez aussi créer vos pipes à vous sans aucun problème. Faut pas avoir peur d'aller regarder dans le code. Et on va le faire juste après. Essayons un pipe qui existe, le pipe uppercase. Très simple, on va utiliser simplement le caractère pipe derrière la valeur et on va donner le nom du pipe que l'on veut appliquer à cette valeur. Cette valeur va être récupérée par le pipe, réutilisée, filtrée et recrachée derrière en sortie. L'uppercase ça uppercase. Donc concrètement ça va vous mettre les mots en majuscules directement. Vous voyez que c'est génial. On pourrait le faire en CSS. Mais il y a des choses qu'on ne pourra pas faire. Ajouter, retirer, travailler la donnée. Tout ça, c'est des choses qui vont avoir trait à pipe. Vous allez pouvoir créer des pipes pour travailler votre donnée comme vous en avez envie. Il faudra aller regarder un petit peu directement dans le code d'Angular, dans notre module Angular. Ici, vous aurez absolument tout. Notamment dans common, cette partie-là. Src Là vous aurez les choses par défaut, les directives, les façades utilisables, etc. Tout ça, ce n'est que du code. Donc n'hésitez pas à aller regarder de quoi il en retourne. Parce que le code il est important. Il faut le lire. Vous remarquerez qu'à chaque fois, on a des .ts. Les .ts on peut aller les regarder et on peut voir ce que ça donne. Par exemple, si vous descendez sur l'uppercase, vous verrez un exemple de pipe uppercase qui va transformer une valeur et qui va faire en uppercase tout simplement. N'hésitez pas à aller regarder un petit peu le code source ça vous apprendra les rudiments d'Angular. Et puis vous pourrez plonger dedans sans aucun problème.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :6 sept. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !