Aller au contenu principal

8-4 Structure d'application dynamique

Pour le moment, l'application n'est pas tellement dynamique ☹️

Observons d'un peu plus près le composant App:

src/app/app.ts
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ProjetsListe, Navbar, Footer],
  template: `
    <app-navbar></app-navbar>
    <h1>{{title}}!</h1>
    <app-projets-liste></app-projets-liste>

    <router-outlet />

    <app-footer></app-footer>
  `,
  styles: [],
})
  • app-navbar: parfait, cette barre de navigation doit être sur toutes les pages!
  • <h1>: est-ce que j'aurai le même titre sur toutes les pages !? Probablement pas.
  • <app-projets-liste>: aurons-nous une liste de projets sur toutes les pages? Encore là, pas tout à fait!
  • <router-outlet></router-outlet>: si vous vous rappelez l'introduction, c'est la partie dynamique de l'application responsable du changement de contenu, on voudra donc garder cette portion.
  • <app-footer>: parfait aussi pour le footer, on le voudra en effet sur toutes les pages

Modifier et simplifier AppComponent​

Modifions le gabarit pour ne conserver que la navigation, la portion dynamique (RouterOutlet) et le footer. On peut aussi retirer la propriété title de AppComponent puisque nous ne l'utiliserons plus. En effet, chaque page sera responsable de son titre.

src/app/app.ts
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, Navbar, Footer],
  template: `
    <app-navbar></app-navbar>
    <router-outlet />
    <app-footer></app-footer>
  `,
  styles: [],
})
export class App {
}

Cependant, il n'y a plus de contenu sur la page d'accueil! 😕

http://localhost:4200