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