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.

Création du composant racine

Nous allons créer le premier composant indispensable pour notre application. C'est le composant présent dans le module racine. Voici la structure de notre application :

<project root>
      app
        app.component.ts
        app.module.ts
      main.ts
      index.html

Le fichier app.component.ts contient le code suivant :

ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: '<p>Hello World</p>'
})
export class AppComponent {

}

Créer un composant est très simple. C'est le décorateur Component qui définit :

  • Le sélecteur dans le DOM avec selector
  • Le template avec template

Rappelez-vous, dans index.html, nous avons :

html
<app-root>Loading...</app-root>

Le contenu sera remplacé par le template et le composant s'éxécutera.

Ajouter le composant dans le module déjà créé.

Maintenant qu'on a créé le composant, ajoutons le dans le module racine présent dans le fichier app.module.ts :

js
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { AppComponent } from './app.component'

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

}

Puisque c'est le module racine, on ajoute le composant dans bootstrap. Enfin, puisque c'est le composant fait partie du module, on l'ajoute dans declarations.

A retenir

  1. Un composant contient un sélecteur HTML et un template
  2. Dans le cas du composant racine, le nom du sélecteur est le même que l'élément HTML présent dans index.html

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