Ajouter des routes à l'application

Cette leçon du tutoriel montre comment ajouter des routes à votre application.

Important : Nous vous recommandons d'utiliser votre environnement local pour apprendre le routing.

Ce que vous allez apprendre

À la fin de cette leçon, votre application prendra en charge le routing.

Ce tutoriel présente le routing dans Angular. Le routing est la capacité de naviguer d'un composant de l'application à un autre. Dans les Single Page Applications (SPA), seules certaines parties de la page sont mises à jour pour représenter la vue demandée par l'utilisateur.

Le router Angular permet aux utilisateurs de déclarer des routes et d'indiquer quel composant doit être affiché à l'écran si cette route est demandée par l'application.

Dans cette leçon, vous allez activer le routing dans votre application pour naviguer vers la page de détails.

Créer un composant de détails par défaut
1. Depuis le terminal, saisissez la commande suivante pour créer le Details :
```
ng generate component details
```
  Ce composant représentera la page de détails qui fournit plus d'informations sur un logement donné.

Ajouter le routing à l'application

Dans le répertoire src/app, créez un fichier nommé routes.ts. C'est dans ce fichier que nous définirons les routes de l'application.

Dans main.ts, apportez les modifications suivantes pour activer le routing dans l'application :

Importez le fichier de routes et la fonction provideRouter :

Importer les éléments de routing dans src/main.ts

import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {provideRouter} from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(App, {
  providers: [provideRouter(routeConfig)],
}).catch((err) => console.error(err));

Modifiez l'appel à bootstrapApplication pour inclure la configuration du routing :

Ajouter la configuration du router dans src/main.ts

import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {provideRouter} from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(App, {
  providers: [provideRouter(routeConfig)],
}).catch((err) => console.error(err));

Dans src/app/app.ts, modifiez le composant pour qu'il utilise le routing :

Ajoutez des imports au niveau du fichier pour les directives du router RouterOutlet et RouterLink :

Importer les directives du router dans src/app/app.ts

import {Component} from '@angular/core';
import {Home} from './home/home';
import {RouterLink, RouterOutlet} from '@angular/router';
@Component({
  selector: 'app-root',
  imports: [Home, RouterOutlet, RouterLink],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

Ajoutez RouterOutlet et RouterLink aux imports des métadonnées de @Component

Ajouter les directives du router aux imports du composant dans src/app/app.ts

import {Component} from '@angular/core';
import {Home} from './home/home';
import {RouterLink, RouterOutlet} from '@angular/router';
@Component({
  selector: 'app-root',
  imports: [Home, RouterOutlet, RouterLink],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

Dans la propriété template, remplacez la balise <app-home /> par la directive <router-outlet> et ajoutez un lien de retour vers la page d'accueil. Votre code doit correspondre à celui-ci :

Ajouter router-outlet dans src/app/app.ts

import {Component} from '@angular/core';
import {Home} from './home/home';
import {RouterLink, RouterOutlet} from '@angular/router';
@Component({
  selector: 'app-root',
  imports: [Home, RouterOutlet, RouterLink],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

Ajouter une route vers le nouveau composant

À l'étape précédente, vous avez supprimé la référence au composant <app-home> dans le template. Dans cette étape, vous allez ajouter une nouvelle route vers ce composant.
1. Dans routes.ts, apportez les modifications suivantes pour créer une route.
  1. Ajoutez des imports au niveau du fichier pour Home, Details et le type Routes que vous utiliserez dans les définitions de routes.
    Importer les composants et Routes
```
import {Routes} from '@angular/router';
import {Home} from './home/home';
import {Details} from './details/details';

const routeConfig: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home page',
  },
  {
    path: 'details/:id',
    component: Details,
    title: 'Home details',
  },
];

export default routeConfig;
```
  2. Définissez une variable nommée routeConfig de type Routes et définissez deux routes pour l'application :
    Ajouter des routes à l'application
```
import {Routes} from '@angular/router';
import {Home} from './home/home';
import {Details} from './details/details';

const routeConfig: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home page',
  },
  {
    path: 'details/:id',
    component: Details,
    title: 'Home details',
  },
];

export default routeConfig;
```
    Les entrées du tableau routeConfig représentent les routes de l'application. La première entrée navigue vers Home chaque fois que l'URL correspond à ''. La seconde entrée utilise un format particulier qui sera abordé dans une prochaine leçon.
2. Enregistrez toutes les modifications et vérifiez que l'application fonctionne dans le navigateur. L'application doit toujours afficher la liste des logements.

Résumé : Dans cette leçon, vous avez activé le routing dans votre application et défini de nouvelles routes. Votre application peut maintenant prendre en charge la navigation entre les vues. Dans la prochaine leçon, vous apprendrez à naviguer vers la page « details » d'un logement donné.

Vous progressez bien avec votre application, bravo.

Pour plus d'informations sur les sujets abordés dans cette leçon, consultez :

Ce que vous allez apprendre

Aperçu conceptuel du routing

Créer un composant de détails par défaut