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 !

Ajoutez un module de routing

D'abord, vous allez ajouter un module de routing à votre application. Dans le dossier  app, créez un fichier  app-routing.module.ts. Commencez par y déclarer une classe avec le décorateur  @NgModule()  :

import { NgModule } from '@angular/core';

@NgModule()
export class AppRoutingModule {}

Au-dessus de la déclaration de classe, vous allez initialiser une constante appelée  routes, de type  Routes  (importé depuis  @angular/router) et qui contiendra un tableau :

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';

const routes: Routes = [
  
];

@NgModule()
export class AppRoutingModule {}

Ce tableau va lier les routes de votre application (les différentes URL) aux components correspondants. Créez dès maintenant une première route  facesnaps  qui affichera le component FaceSnapListComponent :

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

Pour enregistrer ces routes dans votre application, il faut les passer au routeur en passant un objet de configuration au décorateur  @NgModule()  de AppRoutingModule :

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})

Ici, vous dites à Angular que les routes de ce fichier seront les routes à la racine de votre application, et vous réexportez le routeur configuré. Pour l'utiliser, il faut ajouter votre module de routing aux imports de AppModule, le module principal de votre application :

@NgModule({
  // ...
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // ...
})
export class AppModule {

Il ne reste plus qu'à dire à Angular où il faut afficher le component dicté par la route. Dans le template d'AppComponent, remplacez la balise  <app-face-snap-list>  par une balise  <router-outlet>  :

<app-header></app-header>
<router-outlet></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.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 module 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  RouterModule.forRoot()  en passant le tableau de routes pour enregistrer les routes dans le routeur Angular.

• On enregistre le module de routing dans AppModule pour ajouter le routeur configuré à l'application.

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

• 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 !