• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 13/06/2022

Construisez votre premier component

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 : 

Une application qui comporte un menu en en-tête, un contenu principal, et un menu latéral
Un squelette d'application

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 :

Le site d'OpenClassrooms affiche les différentes formations disponibles sous forme de tuiles
Formations disponibles

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  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 :

Le CLI a créé trois fichiers et modifié app.module.ts
Log du CLI

Il a créé, dans un sous-dossier  face-snap  , les trois fameux fichiers du component, et il a mis à jour  app.module.ts  . Allons voir ce qu'il a changé dans AppModule :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FaceSnapComponent } from './face-snap/face-snap.component';
@NgModule({
declarations: [
AppComponent,
FaceSnapComponent,
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Sans rentrer dans le détail, sachez que pour utiliser un component dans une application Angular, il faut le déclarer dans un module – AppModule étant le module principal de l'application, tout comme AppComponent est le component principal. Tous les components que vous créerez dans ce cours seront déclarés ici.

Si vous regardez maintenant dans le dossier 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, OnInit } from '@angular/core';
@Component({
selector: 'app-face-snap',
templateUrl: './face-snap.component.html',
styleUrls: ['./face-snap.component.scss']
})
export class FaceSnapComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

On voit ici la construction du component. On voit une classe TypeScript qui s'appelle SnapComponent, avec un  constructor  et une méthode  ngOnInit.

Cette classe est déclarée avec un décorateur  @Component  à qui on passe un objet de configuration avec un sélecteur, un fichier de template et un fichier de styles.

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.

Comme vous le savez, votre application est une arborescence de components avec AppComponent comme racine : c'est donc dans  app.component.html  qu'on va venir ajouter le sélecteur de notre nouveau component comme balise HTML :

<app-face-snap></app-face-snap>

Maintenant, si vous regardez dans votre navigateur :

face-snap works!
face-snap works!

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>
face-snap really works!
face-snap really works!

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-component

  • Le 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 ?

Exemple de certificat de réussite
Exemple de certificat de réussite