Création de directives et de pipes dans Angular

Name: Création de directives et de pipes dans Angular
Author: Michaela Ochnich

Ce chapitre couvrira les directives structurelles, les directives d’attribut et les pipes. Il introduira les directives intégrées et les pipes fournis par Angular. Il montrera également comment créer votre propre classe de pipe à l’aide de l’interface CLI, ainsi que d’une directive structurelle et d’attribut.

Preview the first lesson free — get full access to all 3 lessons.

Demander une démo Se connecter

Cours : à la demande

Cette leçon vous montrera comment créer un tuyau personnalisé. Dans ce cas, un tuyau qui calcule et affiche la moyenne d'un tableau. Les tuyaux sont utilisés dans les modèles angulaires pour modifier les données dans un format différent avant d'être affiché à l'utilisateur. Angular fournit quelques tuyaux intégrés différents pour gérer le formatage des données pour les types populaires comme les huitièmes, la devise ou les pourcentages, ainsi qu'un étui pour cordes. Parfois, vous devrez peut-être créer un tuyau personnalisé pour gérer la répétition du formatage des données pour vos cas d'utilisation spécifiques. La CLI angulaire fournit un schéma pour créer ces tuyaux personnalisés. Donc, dans une fenêtre de terminal dans le répertoire de l'application, vous pouvez exécuter la commande : ng generate pipe, puis le nom de votre tuyau. Donc ce tuyau va prendre dans un tableau de nombres puis afficher la moyenne de ce tableau. Et cette commande va générer deux fichiers différents : un pour la classe pipe, puis un pour le fichier de test. Il modifie également le fichier app.module pour déclarer le tube que vous venez de générer il peut donc être utilisé dans l'application. Donc, en ouvrant le fichier de classe pipe qui a été généré, et ce sera dans le dossier de l'application. Donc le fichier a ce décorateur de pipe ici, puis le sélecteur qui est défini ici dans les métadonnées est la façon dont ce tuyau sera appelé à partir du modèle. Ensuite, cette méthode de transformation définie ici est la méthode qu'Angular va appeler quand il rencontre ce tuyau. Le premier paramètre, valeur, est ce qui est passé dans le tuyau. Dans ce cas, ce sera le tableau de nombres. Et donc ici, j'ai défini ce type pour la valeur. Des paramètres facultatifs peuvent également être définis pour configurer comment transformer cette valeur. Donc pour ce tuyau, je vais ajouter une variable appelée round, qui sera le nombre de décimales pour arrondir la moyenne à. Et je vais définir la valeur par défaut pour ce paramètre facultatif à deux. Ensuite, je vais ajouter le code à cette méthode qui calcule la moyenne du tableau. Alors ici, j'ai créé une variable pour contenir la somme des éléments et initialisé cela à zéro. Et puis en parcourant chaque élément du tableau, cela va ajouter la valeur de cet élément au total. Et puis à la fin, il divise ce total par la longueur du tableau de valeurs. Et puis pour compléter cette fonction, retournez simplement cette moyenne arrondie. Alors maintenant, avec le tuyau personnalisé terminé, Je vais ouvrir cette classe de composant d'application principale et définissez rapidement un tableau de nombres aléatoires à utiliser. Et puis dans le modèle, Je vais passer ce tableau au tuyau personnalisé. Et en passant au navigateur, vous pouvez voir que la moyenne calculée est affichée ici, et il est arrondi aux deux décimales par défaut puisque je n'ai pas passé ce paramètre facultatif. Revenons maintenant au modèle, Je vais passer ce paramètre facultatif et ici, je vais mettre cela à quatre. Et maintenant, revenez au navigateur, cette moyenne est maintenant affichée arrondi à quatre décimales au lieu des deux par défaut. C'est donc tout pour cette leçon sur la création d'un tuyau personnalisé. Et dans la prochaine leçon, vous apprendrez à créer une directive d'attribut personnalisée.

Intermédiaire Fournisseur : Michaela Ochnich 3 leçons · 18m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce chapitre couvrira les directives structurelles, les directives d’attribut et les pipes. Il introduira les directives intégrées et les pipes fournis par Angular. Il montrera également comment créer votre propre classe pipe à l’aide de l’interface de ligne de commande, ainsi que d’une directive structurelle et d’attribut.

Ce que vous allez apprendre

Comprendre le fonctionnement des directives et des pipes Angular, y compris les directives structurelles, les directives d'attribut et les pipes
Utiliser les directives et les pipes intégrés fournis par Angular
Créer une classe de pipe personnalisée en utilisant l'Angular CLI
Créer une directive structurelle personnalisée
Créer une directive d'attribut personnalisée

Points clés à retenir

Le chapitre couvre les directives structurelles, les directives d'attribut et les pipes dans Angular.
Angular fournit des directives et des pipes intégrés que ce chapitre présente.
L'Angular CLI peut être utilisé pour générer une classe de pipe personnalisée.
Les apprenants construisent leur propre directive structurelle et directive d'attribut au cours de la formation.

Foire aux questions

Que couvre ce cours ?

Il couvre les directives structurelles, les directives d'attribut et les pipes, y compris les directives et les pipes intégrés fournis par Angular, et montre comment créer votre propre classe de pipe en utilisant la CLI, ainsi qu'une directive structurelle et une directive d'attribut.

Qu'est-ce que je vais apprendre à construire dans ce cours ?

Vous apprendrez à créer un pipe personnalisé, une directive structurelle personnalisée et une directive d'attribut personnalisée, et à comprendre le fonctionnement des directives et des pipes Angular.

Quelles leçons sont incluses ?

Le cours comprend trois leçons : Créer un pipe personnalisé (Creating a Custom Pipe), Créer une directive d'attribut (Creating an Attribute Directive) et Créer une directive structurelle (Creating a Structural Directive).

Quelles compétences sont associées à ce cours ?

Le cours est lié à Angular (cadre Web), Angular CLI, composants Angular (Angular Components), Angular Material, interface utilisateur Angular (Angular UI) et Ng Controller.

Le cours utilise-t-il des outils spécifiques pour créer un pipe ?

Oui, il montre comment créer votre propre classe de pipe en utilisant l'Angular CLI.