Création de Composants

Pour créer de nouveaux composants, il suffit de créer la classe du composant, le fichier de template associé et surtout ajouter la classe à la liste des declarations du module associé. Pour le moment, nous n'avons qu'un seul module AppModule dont on analysera le contenu plus tard dans la section Project Structure & Modules.

La création manuelle de ces fichiers peut s'avérer fastidieuse au quotidien et surtout "error-prone". C'est pour cette raison qu'Angular CLI fournit nativement des commandes permettant de générer le code nécessaire à la déclaration d'un composant (entre autres). Ces générateurs de code se basent sur l'outil Schematics fourni par Angular.

Génération du composant book-preview

Pour générer un composant, il suffit de lancer la commande suivante :

yarn ng generate component book/book-preview

Nous avons décidé d'indiquer le "path" cible book/ afin de regrouper tous les composants (et autres fichiers) associés à la fonctionnalité "book" dans ce dossier là. Ce dossier deviendra plus tard un "feature module".

Pour un projet contenant une seule application, le "root path" est src/app.

Génération d'un composant avec Angular CLI

Cela génère le contenu suivant en respectant le "style guide" Angular :

  • book-preview.component.ts : Classe TypeScript BookPreviewComponent du composant .

  • book-preview.component.html : Template HTML du composant .

  • book-preview.component.scss : Fichier CSS du composant. Dans notre cas, le fichier a une extension .scss car nous avons opté pour le SASS en l'indiquant dans notre configuration yarn ng set defaults.styleExt=scss.

  • book-preview.component.spec.ts : Squelette des tests unitaires du composant .

... et met à jour le fichier app.module.ts dont nous analyserons le contenu plus tard.

N'oubliez pas d'ajouter et de "commit" les fichiers générés et modifiés.

Nous pouvons désormais utilisé notre nouveau composant dans le template du composant app par exemple :

Insertion d'un composant
<wt-book-preview></wt-book-preview>
<wt-book-preview></wt-book-preview>
Contenu par défaut du composant

yarn ng vs. ng

Dernière mise à jour