Débutez avec Angular

Les Single Page Applications (ou SPA) sont de plus en plus courantes dans le monde du développement web moderne. Elles permettent une performance sans égale en enlevant le besoin d'une application de demander, recevoir, puis afficher une nouvelle page HTML à chaque changement d'URL. Angular vous permet avec le routing de créer ce genre d'application – à chaque URL correspondra un component, et Angular remplacera le component actif sans émettre de requête au serveur.

Dans l'application Snapface, vous allez créer une landing page afin de découvrir le fonctionnement du routing ; puis, dans les prochains chapitres, vous ajouterez une autre route et d'autres fonctionnalités de routing pour créer une application plus complète !

Configurez le fichier de routing

La configuration des routes de l'application se fait dans  app.routes.ts  . Commencez par y ajouter la route  facesnaps  :

import { Routes } from '@angular/router';
import { FaceSnapListComponent } from './face-snap-list/face-snap-list.component';

export const routes: Routes = [
  { path: 'facesnaps', component: FaceSnapListComponent }
];

C'est aussi simple que ça, car Angular a déjà configuré le router avec cette constante en appelant  provideRouter  dans  app.config.ts  :

import { ApplicationConfig, LOCALE_ID } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    { provide: LOCALE_ID, useValue: 'fr-FR' }
  ]
};

Maintenant, pour dire à Angular où il faut afficher le component lié à la route active, il faudra d'abord importer RouterOutlet dans AppComponent (vous pouvez retirer l'import de FaceSnapListComponent, car vous n'en aurez plus besoin !) :

import { Component } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    HeaderComponent,
    RouterOutlet
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
}

Du coup, il ne vous reste plus qu'à remplacer la balise  <app-face-snap-list />  dans le template par  <router-outlet />  :

<app-header />
<router-outlet />

Comme ça, ce sera le routeur qui décidera quel component doit être affiché, et AppComponent qui décidera à quel niveau ce component sera ajouté. Dans ce cas, on a décidé que le AppHeader restera présent peu importe la route active, ce qui est plutôt réaliste : on pourrait même envisager d'y placer un menu de navigation pour l'application.

Si vous regardez votre application à l'adresse http://localhost:4200 :

À votre avis, pourquoi rien ne s'affiche ?

Eh bien, c'est parce que vous n'avez pas spécifié de component pour la route "vide" ! Cependant, si vous allez à http://localhost:4200/facesnaps, vous retrouverez l'affichage précédent.

Si vous changez de route via la barre d'adresse de votre navigateur, une nouvelle requête est envoyée au serveur de développement, et l'application est totalement rechargée.

Le but maintenant sera de créer une landing page pour la route "vide", qui permette d'accéder à la route  facesnaps.

Bienvenue sur Snapface !

Je vais commencer par vous présenter l'objectif de cette partie du chapitre, pour que vous puissiez essayer de tout faire vous-même.

Il faut :

• Créer un component nommé LandingPageComponent :

  • ce component peut être aussi simple ou complexe que vous le souhaitez ! 

• L'associer à la route vide dans votre routing (indice : le path d'une route vide est le string vide).

C'est à vous !

…

…

Et maintenant la solution (et la suite !) :

Pour créer LandingPageComponent, vous pouvez utiliser le CLI :

ng g c landing-page

Pour l'enregistrer comme étant le component à afficher pour la route vide, il faut ajouter une route à votre tableau  routes  dans AppRoutingModule :

const routes: Routes = [
  { path: 'facesnaps', component: FaceSnapListComponent },
  { path: '', component: LandingPageComponent }
];

Je vous partage ici le code de ma landing page, ainsi que l'image que j'ai utilisée pour le logo :

Le template :

<div class="landing-block">
  <img src="/assets/snapface-logo.png" alt="Snapface logo">
  <div class="landing-links">
    <a>Continuer vers Snapface</a>
  </div>
</div>

Les styles :

.landing-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.landing-links {
  width: 100%;
  text-align: center;
}

Et le logo :

Tout ça me donne, à http://localhost:4200 :

Vous avez maintenant deux routes fonctionnelles ! Dans le prochain chapitre, vous mettrez en place deux systèmes pour permettre aux utilisateurs de passer d'une route à l'autre.

En résumé

• Un fichier de routing contient un tableau de type  Routes  qui contient les routes de l'application.

• Une route est un objet de type  { path: 'myPath', component: MyComponent }  qui spécifie le component à afficher pour chaque route.

• On appelle  provideRouter  en passant le tableau de routes pour enregistrer les routes dans le routeur Angular.

• On ajoute une balise  <router-outlet>  pour dire à quel niveau du template le component de la route active doit être inséré, en ajoutant RouterOutlet aux imports de ce component.

• Pour ajouter des fichiers statiques à une application (comme des images), on les stocke dans le dossier  assets  .

 Vous êtes prêt pour finaliser votre SPA ? Suivez-moi au prochain chapitre !