Qu'est-ce qu'un component ?
Le mot component en anglais signifie "composant", et à juste titre : les components sont les composants de base d'une application Angular. Une application Angular peut être vue comme une arborescence de components avec AppComponent comme component racine. On pourrait imaginer une application simple qui ressemblerait à ça :
Ici, une structure possible serait d'avoir un component pour le menu en en-tête, un autre pour le contenu principal, et un dernier pour le menu latéral. On aurait donc HeaderMenuComponent, MainContentComponent et SideMenuComponent.
En autre exemple, prenons cette capture d'écran du site OpenClassrooms :
On voit ici le cas d'usage parfait pour un component réutilisable. Chaque tuile correspond à une formation, et affiche les mêmes informations pour chaque formation : l'image, le domaine, le titre, le niveau de diplôme et la durée. On pourrait créer un CoursesComponent qui contiendrait plusieurs CourseComponents – un pour chaque formation – et qui injecterait dans chaque CourseComponent les données d'un cours.
Créez un component
En pratique, un component va associer un fichier HTML, un fichier SCSS et un fichier TypeScript : c'est le cas de l'AppComponent généré par le CLI, par exemple. Vous allez maintenant voir comment créer et utiliser votre premier component !
Avant toute chose, je vous invite à supprimer le contenu de app.component.html, ainsi que la variable title et toute trace de RouterOutlet dans app.component.ts. Comme ça, vous commencez avec une feuille blanche ; d'ailleurs, si vous regardez votre navigateur après ces modifications, c'est exactement ce que vous devriez voir !
Le CLI d'Angular propose des commandes de création pour faciliter le développement, et vous allez en utiliser une maintenant, depuis une ligne de commande dans le dossier du projet :
ng generate component face-snap
Mon application s'appelle Snapface, j'ai donc choisi d'appeler mon premier component FaceSnapComponent. Ce component, à terme, affichera un "FaceSnap" : une photo partagée et quelques informations la concernant.
Si vous regardez bien le log du CLI, vous verrez exactement ce qu'il a fait :
Il a créé, dans un sous-dossier face-snap , les trois fameux fichiers du component.
Si vous regardez maintenant dans le dossier face-snap, vous y trouverez les fichiers de FaceSnapComponent. Dans le fichier HTML (qu'on appelle le template), vous trouvez une balise <p> qui permet simplement de vérifier que le component fonctionne, et le fichier SCSS est vide. Regardons maintenant le fichier face-snap.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'app-face-snap',
standalone: true,
imports: [],
templateUrl: './face-snap.component.html',
styleUrl: './face-snap.component.scss'
})
export class FaceSnapComponent {
}
On voit ici la construction du component. On voit une classe TypeScript qui s'appelle FaceSnapComponent. Cette classe est déclarée avec un décorateur @Component à qui on passe un objet de configuration avec un sélecteur, un tableau d'imports, un fichier de template et un fichier de styles. Il y a également le flag standalone.
Pour le template et les styles, c'est plutôt simple : on dit à Angular quels fichiers utiliser pour afficher notre component. Le sélecteur (avec le préfixe app- par défaut), c'est ce qui va nous permettre d'insérer ce component dans notre application. Les imports sont les éventuelles dépendances de notre component (vous verrez leur utilité dans un instant). Le flag standalone signale simplement que ce component n'a pas besoin de faire partie d'un module pour être utilisé.
Comme vous le savez, votre application est une arborescence de components avec AppComponent comme racine : c'est donc dans AppComponent que vous allez importer et utiliser FaceSnapComponent.
Commencez par ajouter l'import dans app.component.ts :
import { Component } from '@angular/core';
import { FaceSnapComponent } from './face-snap/face-snap.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [
FaceSnapComponent
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {}Ce qui vous permet d'insérer dans app.component.html :
<app-face-snap></app-face-snap>Maintenant, si vous regardez dans votre navigateur :
On voit donc que le sélecteur d'un component crée une balise HTML personnalisée pour l'insertion du component dans l'application.
On peut même insérer plusieurs instances de notre component :
<app-face-snap></app-face-snap>
<app-face-snap></app-face-snap>
<app-face-snap></app-face-snap>
<app-face-snap></app-face-snap>
<app-face-snap></app-face-snap>
Votre component ne fait peut-être pas grand-chose pour l'instant, mais vous allez lui apporter de la vie et de la structure au fur et à mesure des prochains chapitres, pour en faire un component dynamique capable d'afficher un FaceSnap !
En résumé
Une application Angular peut être vue comme une arborescence de components.
Un component lie un template HTML et des styles SCSS à du comportement TS.
Pour créer un component, on utilise la commande
ng generate component nom-du-componentLe sélecteur d'un component correspond à la balise HTML personnalisée qu'on utilisera pour l'insérer dans l'application.
Maintenant que vous avez un premier component, vous pouvez commencer à ajouter du contenu. Commençons dès le prochain chapitre, en y ajoutant des données ! Vous êtes prêt ?
