📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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 ​

  1. Si vous avez un module, mettez le dans imports. Les autres éléments (composants, pipes ou directives), mettez les dans declarations.
  2. Les éléments sont utilisables uniquement dans le module, pas en dehors.
  3. Pour le module racine, mettez la propriété bootstrap avec le composant racine (prochain chapitre)

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !