Introduction aux composants

Un composant contrôle un écran appelé "vue". Par exemple, des composants individuels définissent et contrôlent chacune des vues du didacticiel :

• La racine de l'application avec les liens de navigation.
• La liste des produits.
• L'éditeur de produits.

Vous définissez la logique d'application d'un composant (ce qu'il fait pour prendre en charge la vue) dans une classe.
La classe interagit avec la vue via une API de propriétés et de méthodes.

Par exemple, HeroListComponent a une propriété heroes qui contient un tableau de héros.
Sa méthode selectHero() définit une propriété selectedHero lorsque l'utilisateur clique pour choisir un héros dans cette liste. Le composant acquiert les héros depuis un service, qui est une propriété de paramètre TypeScript sur le constructeur. Le service est fourni au composant via le système d'injection de dépendance.

Angular crée, met à jour et détruit des composants lorsque l'utilisateur se déplace dans l'application. Votre application peut agir à chaque moment de ce cycle de vie grâce à des points d'ancrage facultatifs, tels que ngOnInit().

Composants & metadata

Le décorateur @Component identifie la classe immédiatement inférieure en tant que classe de composant et spécifie ses métadonnées.

Dans l'exemple de code ci-dessous, vous pouvez voir que HeroListComponent est simplement une classe, sans aucune notation ou syntaxe Angular spéciale. Ce n'est pas un composant tant que vous ne le marquez pas avec le décorateur @Component.

Les métadonnées d'un composant indiquent à Angular où trouver les principaux blocs de construction dont il a besoin pour créer et présenter le composant et sa vue. En particulier, il associe un modèle au composant, directement avec du code en ligne ou par référence. Ensemble, le composant et son modèle décrivent une vue.

En plus de contenir ou de pointer vers le modèle, les métadonnées @Component configurent, par exemple, comment le composant peut être référencé en HTML et quels services il requiert.

Voici un exemple de métadonnées de base pour HeroListComponent.

Cet exemple présente certaines des options de configuration @Component les plus utiles :

• selector : sélecteur CSS qui indique à Angular de créer et d'insérer une instance de ce composant partout ou il trouve la balise correspondante dans le modèle HTML. Par exemple, si le code HTML d'une application contient ‹app-hero-list›‹/app-hero-list›, Angular insère une instance de la vue HeroListComponent entre ces balises.
• templateUrl : adresse relative du modèle HTML de ce composant. Vous pouvez également fournir le modèle HTML en ligne, en tant que valeur de la propriété du modèle. Ce modèle définit la vue hôte du composant.
• providers : un ensemble de fournisseurs pour les services requis par le composant. Dans l'exemple, cela indique à Angular comment fournir l'instance HeroService que le constructeur du composant utilise pour obtenir la liste des héros à afficher.

Templates & views

Vous définissez la vue d'un composant avec son modèle d'accompagnement. Un modèle est une forme HTML qui indique à Angular comment rendre le composant. Les vues sont généralement organisées de manière hiérarchique, ce qui vous permet de modifier, d'afficher et de masquer des sections ou des pages d'interface utilisateur entières.

Le modèle immédiatement associé à un composant définit la vue hôte de ce composant. Le composant peut également définir une hiérarchie de vues contenant des vues intégrées, hébergées par d'autres composants.



Une hiérarchie de vues peut inclure des vues de composants du même NgModule, mais elle peut (et le fait souvent) inclure des vues de composants définis dans différents NgModules.

Syntaxe du modèle

Un modèle ressemble à du code HTML normal, à la différence qu'il contient également la syntaxe du modèle Angular, qui modifie le code HTML en fonction de la logique de votre application et de l'état des données de l'app et du DOM. Votre modèle peut utiliser la liaison de données pour coordonner les données d'application et DOM, les canaux pour transformer les données avant qu'elles ne soient affichées et les directives pour appliquer la logique d'application à ce qui est affiché. Par exemple voici un modèle pour le composant HeroListComponent.

src/app/hero-list.component.html

Ce modèle utilise des éléments HTML typiques tels que ‹h2› et ‹p›, et inclut également des éléments de syntaxe de modèle Angular, *ngFor, {{hero.name}}, (click), [hero] et ‹app-hero-detail›. Les éléments "template-syntax" indiquent à Angular comment rendre le code HTML à l'écran, à l'aide de la logique du programme et des données.

• La directive *ngFor indique à Angular de parcourir une liste.
• {{hero.name}}, (click) et [hero] lient les données de programme vers et depuis le DOM, en réponse aux entrées de l'utilisateur.
• La balise ‹app-hero-detail› dans l'exemple est un élément qui représente un nouveau composant, HeroDetailComponent. HeroDetailComponent (code non affiché) définit la vue enfant Hero-Detail de HeroListComponent. Notez que les composants personnalisés tels que celui-ci se combinent de manière transparente avec le HTML natif dans les mêmes dispositions.

Liaison de donnée (Data binding)

Sans framework, vous seriez responsable de l'insertion de valeurs de données dans les contrôles HTML et de la conversion des réponses des utilisateurs en actions et mises à jour de valeurs. Écrire une telle logique à la main est fastidieux, source d'erreurs et un cauchemar à lire, comme tout programmeur jQuery expérimenté peut en témoigner.

Angular prend en charge la liaison de données bidirectionnelle, un mécanisme permettant de coordonner les parties d'un modèle avec les parties d'un composant. Ajoutez une balise de liaison au modèle HTML pour indiquer à Angular comment connecter les deux côtés.

Le diagramme suivant présente les quatre formes de balisage de liaison de données. Chaque formulaire a une direction: vers le DOM, depuis le DOM ou les deux.



Cet exemple du modèle HeroListComponent utilise trois de ces formulaires.

src/app/hero-list.component.html (binding)

• L'interpolation {{hero.name}} affiche la valeur de la propriété hero.name du composant dans l'élément ‹li›.
• La liaison de propriété [hero] transmet la valeur de selectedHero de HeroListComponent parent à la propriété hero de l'enfant HeroDetailComponent.
• La liaison d'événement (clic) appelle la méthode selectHero du composant lorsque l'utilisateur clique sur le nom d'un héros.

La liaison de données bidirectionnelle (Two-way data binding), (utilisée principalement dans les formulaires basés sur des modèles) combine la liaison de propriété et d'événement en une seule notation.

Voici un exemple du modèle HeroDetailComponent qui utilise une liaison de données bidirectionnelle avec la directive ngModel.

Dans une liaison bidirectionnelle, une valeur de propriété de données est transférée du composant vers la zone de saisie, comme pour la liaison de propriété. Les modifications apportées par l'utilisateur sont également répercutées sur le composant, réinitialisant la propriété à la dernière valeur, comme avec la liaison d'événement.

Angular traite toutes les liaisons de données une fois pour chaque cycle d'événements JavaScript, de la racine de l'arborescence des composants de l'application à tous les composants enfants.



La liaison de données joue un rôle important dans la communication entre un modèle et son composant, ainsi que pour la communication entre les composants parent et enfant.

Les pipes

Les pipes Angular vous permettent de déclarer des transformations de valeur d'affichage dans votre modèle HTML. Une classe avec le décorateur @Pipe définit une fonction qui transforme les valeurs d'entrée en valeurs de sortie pour l'affichage dans une vue.

Angular définit divers pipes, tels que le pipe de date et le pipe de devise. Pour une liste complète, voir la liste des API de pipes. Vous pouvez également définir de nouveaux pipes. Pour spécifier une transformation de valeur dans un modèle HTML, utilisez l'opérateur de canal ( | ).

{{interpolated_value | pipe_name}}

Vous pouvez chaÎner des canaux, en envoyant la sortie d'une fonction de canal à transformer par une autre fonction de canal. Un canal peut également prendre des arguments qui contrôlent comment il effectue sa transformation. Par exemple, vous pouvez transmettre le format souhaité au canal de date.

Les directives

Les modèles Angular sont dynamiques. Quand Angular les rend, il transforme le DOM selon les instructions données par les directives. Une directive est une classe avec un décorateur @Directive().

Un composant est techniquement une directive. Cependant, les composants sont si distinctifs et essentiels dans les applications Angular qu'il définit le décorateur @Component(), qui étend le décorateur @Directive() avec des fonctionnalités orientées modèles.

Outre les composants, il existe deux autres types de directives: structurelles et d'attribut. Angular définit un certain nombre de directives des deux types, et vous pouvez définir les vôtres à l'aide du décorateur @Directive().

Tout comme pour les composants, les métadonnées d'une directive associent la classe décorée à un élément sélecteur que vous utilisez pour l'insérer en HTML. Dans les modèles, les directives apparaissent généralement dans une balise d'élément sous forme d'attributs, soit par nom, soit comme cible d'une affectation ou d'une liaison.

Directives structurelles

Les directives structurelles modifient la disposition en ajoutant, en supprimant et en remplaçant des éléments dans le DOM. L'exemple de modèle utilise deux directives structurelles intégrées pour ajouter une logique d'application au rendu de la vue.

• *ngFor est itérative; Angular doit supprimer un ‹li› par héros dans la liste des héros.
• *ngIf est conditionnel; Angular inclut le composant HeroDetail uniquement s'il existe un héros sélectionné.

Attributs de directives

Les directives d'attribut modifient l'apparence ou le comportement d'un élément existant. Dans les modèles, ils ressemblent à des attributs HTML normaux, d'ou leur nom.

La directive ngModel, qui implémente la liaison de données bidirectionnelle (wo-way data binding), est un exemple de directive d'attribut. ngModel modifie le comportement d'un élément existant (généralement ‹input›) en définissant sa propriété de valeur d'affichage et en répondant aux événements de modification.

Angular a davantage de directives prédéfinies qui modifient la structure de présentation (par exemple, ngSwitch) ou modifient des aspects d'éléments et de composants DOM (par exemple, ngStyle et ngClass).