10. Présentation du module racine

Pour l’instant nous n’avons qu’un unique composant dans notre application, mais imaginez que notre application soit composée de 100 pages, avec 100 composants différents, comment ferions-nous pour nous y retrouvez ?

L’idéal serait de pouvoir regrouper nos composants par fonctionnalité : par exemple regrouper tous les composants qui servent à l’authentification entre eux, tous ceux qui servent à construire un blog entre eux, etc.

Eh bien, Angular permet cela, grâce aux modules ! Tous nos composants seront regroupés au sein de modules.

Mais du coup ? … Il nous faut au moins un module pour notre composant, non ?

Bravo ! Vous avez tout compris ! 👏

Au minimum, votre application doit contenir un module : le module racine. Au fur et à mesure que votre application se développera, vous rajouterez d’autres modules pour couvrir de nouvelles fonctionnalités.

Le module racine de notre application est app.module.ts, et à déjà été généré par Angular CLI :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Je vais présenter ce code rapidement.

D’abord, on retrouve des importations en haut du fichier.

On importe en premier le BrowserModule à la ligne 1, qui est un module qui fournit des éléments essentiels pour le fonctionnement de l’application, comme les directives ngIf et ngFor dans tous nos templates, nous reviendrons dessus plus tard.

Ensuite, on retrouve l’annotation NgModule contenue dans le cœur d’Angular lui-même, à la ligne 2.

Enfin, à la ligne 4, on importe le seul composant de notre application AppComponent, que nous allons rattacher au module racine juste après.

Mais le plus important ici est l’annotation NgModule, car c’est elle qui permet de déclarer un module :

• declarations : Une liste de tous les composants et directives qui appartiennent à ce module. Nous avons donc ajouté notre unique composant AppComponent.
• imports : Permet de déclarer tous les éléments que l’on a besoin d’importer dans notre module. Les modules racines ont besoin d’importer le BrowserModule (contrairement aux autres modules que nous ajouterons par la suite dans notre application).
• bootstrap : Permet d’identifier le composant racine, qu’Angular appelle au démarrage de l’application. Comme le module racine est lancé automatiquement par Angular au démarrage de l’application, et qu’AppComponent est le composant racine du module racine, c’est donc AppComponent qui apparaîtra au démarrage de l’application. Ça va, rien de compliqué si on prend le temps de bien comprendre.

Lors de ce cours, nous commencerons à travailler avec une application mono-module, puis nous ajouterons d’autres modules pour que vous voyiez comment se passe le développement d’une application plus complexe.