Appearance
Module racine (AppModule)
Voir Comprendre les modules pour comprendre le rôle d'un module
Créons notre premier module. C'est le module racine (ou module parent). Il va charger tous les autres modules et le premier composant.
Notre structure de l'application est la suivante :
<project root>
app
app.module.ts
main.ts
index.html
Le fichier app.module.ts
contient le code suivant :
ts
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
@NgModule({
imports: [BrowserModule],
declarations: [],
bootstrap: []
})
export class AppModule { }
On déclare un module avec le décorateur NgModule
. Trois propriétés sont requises :
bootstrap
Au départ, nous devons bien créer un premier composant. Ce composant est le parent de tous les composants. C'est lui qui indiquera quel selecteur dans notre page HTML définera la racine de l'application.
Nous indiquons donc le composant dans le tableau bootstrap
. A 99% des cas, nous avons qu'un seul composant dans ce tableau.
Pour que module fonctionne, il faut un composant obligatoirement.
A retenir
- Si vous avez un module, mettez le dans
imports
. Les autres éléments (composants, pipes ou directives), mettez les dansdeclarations.
- Les éléments sont utilisables uniquement dans le module, pas en dehors.
- Pour le module racine, mettez la propriété
bootstrap
avec le composant racine (prochain chapitre)