Aller au contenu principal

5-7 Composant racine App

Tel que brièvement mentionné précédemment, index.html contient une seule balise dans le body de la page, soit app-root:

src/index.html
<body>
  <app-root></app-root>
</body>

app-root est le composant racine de l'application et son code est contenu dans src/app/app.ts.

astuce

Vous pouvez CTRL + Clic sur la balise <app-root> pour être dirigé vers le composant en question!

src/app/app.ts
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <h1>Welcome to {{ title() }}!</h1>

    <router-outlet />
  `,
  styles: [],
})
export class App {
  protected readonly title = signal('houdini');
}
attention

Si vous avez une erreur en lien avec les composants standalone telle que: img

Videz la cache de WebStorm:

  1. À l'aide du menu principale de WebStorm: File -> Invalidate Caches...
  2. Cochez les deux options de la capture d'écran et appuyez sur Invalidate and restart img

Ah, ça semble bien correspondre à la page affichée!

http://localhost:4200

Welcome to houdini

Modifier app.ts (titre h1)​

Vous pouvez essayer de modifier le h1 dans la portion template de app.ts pour quelque chose comme ceci:

src/app/app.ts
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <h1>Bienvenue dans l'application {{ title() }}!</h1>

    <router-outlet />
  `,
  styles: [],
})
export class App {
  protected readonly title = signal('houdini');
}

Accéder à l'application​

Assurez-vous que l'application roule en mode dev (soit via la flèche verte dans WebStorm ou encore via ng serve) et vous devriez maintenant voir ceci dans votre navigateur:

http://localhost:4200

Bienvenue dans l'application houdini!