Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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 !