Angular - 2-4 Création d'un nouveau components

Le composant d'application est un composant Angular normal, mais il est aussi un peu spécial : c'est le composant racine, listé dans le tableau bootstrap du module AppModule. C'est lui qu'Angular amorce au démarrage. Pour tous les autres composants que nous créerons, on n'ajoutera pas leurs sélecteurs dans index.html : on les ajoutera dans app.component.html, car c'est là qu'on imbrique les autres parties de l'interface. Dans cette leçon, nous allons en créer un à la main pour afficher des informations sur un serveur.

Créer le fichier et la classe

On crée d'abord un sous-dossier server dans app/. Bonne pratique : le nom du dossier correspond au nom du composant et chaque composant a son propre dossier. À l'intérieur, on ajoute server.component.ts — le nom du composant d'abord, puis .component, puis l'extension .ts pour TypeScript. On y déclare une classe exportée : 

export class ServerComponent {
}

Pour l'instant ce n'est qu'une classe TypeScript ordinaire ; Angular ne sait pas que c'est un composant. Pour le lui indiquer, on lui ajoute le décorateur @Component. Les décorateurs sont une fonctionnalité de TypeScript qui permet d'enrichir vos classes et on les attache avec le signe @ placé devant. Ce décorateur n'est pas connu nativement de TypeScript : il faut l'importer depuis @angular/core, le package qui regroupe les fonctionnalités de base d'Angular : 

import { Component } from '@angular/core';

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html'
})
export class ServerComponent {
}

Sélecteur et template

On passe un objet de configuration au décorateur. Sans cela, Angular ne saurait toujours pas quoi faire de cette classe. Les deux informations importantes sont :

  • le selector : la balise HTML qui permettra d'utiliser le composant ailleurs. C'est une chaîne, doit être unique, et on la préfixe en général par app- pour ne pas écraser un élément HTML existant ;
  • le templateUrl : un chemin relatif vers un fichier HTML externe contenant le template. On verra bientôt qu'il existe aussi template pour écrire le HTML en ligne.

On crée donc server.component.html dans le même dossier, avec un contenu de départ. Le chemin ./server.component.html pointe vers ce fichier — webpack empaquettera tout cela automatiquement. Notre premier composant est créé ; pour pouvoir l'utiliser, il nous faut maintenant comprendre le module d'application et y enregistrer ce nouveau composant. C'est l'objet de la prochaine leçon.

En résumé

Cette leçon explique comment créer un nouveau composant Angular en partant de zéro. Elle couvre la création d'une structure de dossiers appropriée, la création d'une classe TypeScript, l'utilisation du décorateur @Component pour transformer une classe ordinaire en composant Angular, et la configuration des éléments essentiels comme le sélecteur et le template. Les conventions de nommage des fichiers et des dossiers sont également détaillées pour respecter les bonnes pratiques Angular.

Points clés

  • Un composant Angular est fondamentalement une classe TypeScript enrichie par le décorateur @Component
  • Créez un dossier dédié par composant (ex: server/) directement dans le dossier app/ pour organiser votre projet
  • Le décorateur @Component doit être importé depuis le package @angular/core
  • Configurez le sélecteur (ex: app-server) pour pouvoir utiliser le composant comme balise HTML dans d'autres templates
  • Séparez le code HTML du composant dans un fichier template externe (*.component.html) via la propriété templateUrl
  • Suivez la convention de nommage: nomComposant.component.ts pour les fichiers TypeScript et nomComposant.component.html pour les templates

Questions fréquentes

Pourquoi créer un dossier séparé pour chaque composant?

Créer un dossier dédié par composant est une bonne pratique qui rend le projet plus lisible et maintenable. Cela permet à chaque composant d'avoir ses propres fichiers (TypeScript, HTML, CSS, tests) dans un espace organisé. Le nom du dossier doit correspondre au nom du composant.

Qu'est-ce que le sélecteur dans le décorateur @Component et comment l'utiliser?

Le sélecteur est le tag HTML qui vous permettra d'afficher le composant dans d'autres templates. Par exemple, avec le sélecteur 'app-server', vous pouvez utiliser <app-server></app-server> dans vos fichiers HTML d'autres composants. Il est recommandé de préfixer le sélecteur par 'app-' pour éviter les conflits avec les éléments HTML standards.

Pourquoi doit-on importer Component depuis @angular/core?

Le décorateur @Component n'est pas une fonctionnalité native de TypeScript. C'est une fonctionnalité spécifique à Angular fournie par le package @angular/core. Il faut l'importer explicitement avant de l'utiliser pour décorer votre classe composant.