Le Guide Angular
  • Le Guide Angular par Wishtack
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibilité
  • TypeScript
    • Pourquoi TypeScript ?
    • De l'ECMAScript au TypeScript
    • Visibilité des Propriétés
    • Typing des Propriétés
    • Types
    • Interfaces
    • Inference
    • Duck Typing
    • Duck Typing Patterns
      • Compatibilité de Librairies
      • Entity Constructor
    • Décorateurs
      • Décorateurs de Propriété
      • Décorateurs de Classe
      • Décorateurs de Méthode & Paramètres
    • Quelques Liens
  • Tools
    • Git
    • Command Line
    • NodeJS
    • NPM
    • Yarn
      • Pourquoi Yarn ?
      • Définition et Installation des Dépendances
      • Scripts
      • Mise à Jour et Automatisation
    • Chrome
    • IntelliJ / WebStorm / VSCode
      • Raccourcis clavier IntelliJ / WebStorm
    • Floobits
    • Angular CLI
    • StackBlitz
    • Compodoc
  • Angular
    • Bootstrap
    • Composants
      • Root Component
      • Template Interpolation
      • Property Binding
      • Class & Style Binding
      • Event Binding
      • *ngIf
      • *ngFor
      • L'approche MVC
      • Création de Composants
      • Exemple
    • Container vs. Presentational Components
    • Interaction entre Composants
      • Input
      • Output
      • Exemple
    • Change Detection
      • Les Approches Possibles
      • Fonctionnement de la Change Detection
      • Optimisation de la Change Detection
      • Immutabilité
      • Quelques Liens
    • Project Structure & Modules
      • Entry Point
      • Définition d'un Module
      • Root Module
      • Feature Module
      • Shared Module
      • Exemple
    • Dependency Injection
      • Qu'est-ce que la "Dependency Injection" ?
      • Injection d'un Service Angular
      • Services & Providers
      • Portée des Services
      • Tree-Shakable Services
      • Class vs Injection Token
      • Exemple
    • Callback Hell vs. Promise vs. Async / Await
      • Callback Hell
      • Promise
      • Async / Await
    • Observables
      • Reactive Programming
      • Promise vs Observable
      • Subscribe
      • Unsubscribe ⚠️
      • Création d'un Observable
      • Opérateurs
        • Définition d'un Opérateur
        • Lettable Operators vs Legacy Methods
        • map
        • filter
        • mergeMap & switchMap
        • shareReplay
        • buffer
        • debounceTime
        • distinctUntilChanged
        • retry
      • Quelques Liens
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • GraphQL
    • Formulaires
      • Template-driven Forms 🤢
      • Reactive Forms 👍
        • Avantages des "Reactive Forms"
        • La boite à outils des "Reactive Forms"
        • Validation
        • Observation des Changements
    • Directives
      • Attribute Directive
      • Structural Directive
    • Pipes
    • Routing
      • Mise en Place du Routing
      • Lazy Loading
      • Project Structure
      • Route Guards
    • Testing
      • Unit-Testing
        • Jasmine
        • Unit-Test Synchrone
        • Test-Driven Development
        • Unit-Test Asynchrone
        • TestBed
        • Unit-Test d'un Service
        • Unit-Test d'un Composant
        • Unit-Test et Spies
        • Unit-Test et HttpClient
      • End-to-End
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
Powered by GitBook
On this page
  • 1. Tag base
  • 2. Configuration
  • Configuration du "Routing"
  • Configuration d'une "Route" avec Paramètres
  • Configuration de l'Hébergement
  • 3. <router-outlet>
  • 4. Création de liens
  • Construction Dynamique
  • Construction avec Paramètres
  • 5. Accès aux Paramètres
  • 6. Router Service

Was this helpful?

  1. Angular
  2. Routing

Mise en Place du Routing

1. Tag base

Avant toute chose, il est nécessaire d'ajoute le tag base au head du fichier index.html de l'application :

<!doctype html>
<html>
    <head>
        <base href="/">
        ...
    </head>
    <body>
        ...
    </body>
</html>

Ce tag indique la base du path à partir de laquelle le "Routing" Angular rentre en jeu.

Cette valeur est généralement personnalisé dans le cas où plusieurs applications Angular sont hébergées sur un même nom de domaine mais avec des paths différents.

2. Configuration

Configuration du "Routing"

La configuration du "Routing" est transmise au module RouterModule lors de son import par le "root module" AppModule.

Par bonne pratique, il est recommandé de placer cette configuration dans un module dédié AppRoutingModule importé par le "root module" AppModule.

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

export const appRouteList: Routes = [
    {
        path: 'landing',
        component: LandingViewComponent
    },
    {
        path: 'search',
        component: BookSearchViewComponent
    },
    {
        path: '**',
        redirectTo: 'landing'
    }
];

@NgModule({
    exports: [
        RouterModule
    ],
    imports: [
        RouterModule.forRoot(appRouteList)
    ]
})
export class AppRoutingModule {
}

`` est une "wildcard"** qui "match" toutes les urls (sauf celles qui ont "match" les routes précédentes).

Il faut donc faire attention à l'ordre des "routes".

Configuration d'une "Route" avec Paramètres

Le path d'une "route" peut définir des paramètres obligatoires grâce au préfixe :.

export const appRouteList: Routes = [
    ...,
    {
        path: 'books/:bookId',
        component: BookDetailViewComponent
    },
    ...
];

Configuration de l'Hébergement

Pour le bon fonctionnement du "Routing", il est important d'implémenter une règle de "rewrite" sur votre plateforme d'hébergement afin que toutes les "routes" renvoient le même fichier index.html produit dans le dossier dist lors du "build" (yarn build).

Autrement, en accédant directement à une "route" de l'application, l'utilisateur obtiendrait une erreur 404.

3. <router-outlet>

La configuration du "Routing" permet de définir quel composant afficher en fonction de la route mais cela n'indique pas à Angular où injecter le composant dans la page.

Pour indiquer l'emplacement d'insertion du composant, il faut utiliser la directive <router-outlet> directement dans le "root component" AppComponent (ou dans un "child component" dédié, e.g. HomeLayoutComponent).

<header>
...
</header>
<router-outlet></router-outlet>
<footer>
...
</footer>

En fonction de la "route" visitée, le composant associé sera alors injecté en dessous du tag router-outlet (et non à l'intérieur ou à la place du tag contrairement à ce que l'on pourrait supposer).

4. Création de liens

En utilisant des liens natifs <a href="/search">, le "browser" va produire une requête HTTP GET vers le serveur et recharger toute l'application.

Pour éviter ce problème, le module de "Routing" Angular fournit la directive routerLink qui permet d'intercepter l'événement click sur les liens et de changer de "route" sans recharger toute l'application.

<a routerLink="/search">Search</a>

La directive routerLink génère tout de même l'attribut href pour faciliter la compréhension de la page par les "browsers" ou "moteurs de recherche". Cela permet par exemple, d'ouvrir un lien dans une nouvelle fenêtre grâce au menu contextuel ou encore copier le lien d'une "route".

Construction Dynamique

this.route = '/search';
this.routeName = 'Search';
<a [routerLink]="route">{{ routeName }}</a>

Construction avec Paramètres

La "route" /books/123 peut être construite avec des paramètres :

<a [routerLink]="['/books', book.id]">{{ routeName }}</a>

où book.id = '123'.

<a
    routerLink="'/search"
    [queryParams]="{keywords: 'eXtreme Programming'}">eXtreme Programming Books</a>

5. Accès aux Paramètres

Le service ActivatedRoute décrit l'état actuel du "router". Il permet au composant associé à la "route" de récupérer les paramètres via les propriétés paramMap et queryParamMap.

Les propriétés paramMap et queryParamMap sont des Observables car par optimisation, en naviguant vers la même route mais avec des paramètres différents (e.g. /books/123 => /books/456), Angular ne recharge pas le composant mais propage les nouveaux paramètres via ces Observables.

export class BookDetailViewComponent {

    book$: Observable<Book>;

    constructor(private _activatedRoute: ActivatedRoute,
                private _bookRepository: BookRepository) {

        this.book$ = this._activatedRoute.paramMap
            .pipe(
                map(paramMap => paramMap.get('bookId')),
                switchMap(bookId => this._bookRepository.getBook(bookId))
            );

    }

}

Pour simplifier la récupération des paramètres, il est également possible d'utiliser la propriété snapshot qui contient l'état actuel de la route (e.g. : snapshot.paramMap.get('bookId')). Le risque dans ce cas est de ne pas mettre à jour la vue en cas de navigation vers la même route avec des paramètres différents.

6. Router Service

Le Router est le service principal du "Routing". Il permet de :

  • déclencher la navigation via la méthode navigate, this._router.navigate(['/books', bookId], {queryParams: {}})

  • suivre les événements de navigation via l'Observable router.events,

  • construire et parser les urls de "Routing",

  • vérifier si une "Route" est actuellement visitée,

  • ...

PreviousRoutingNextLazy Loading

Last updated 5 years ago

Was this helpful?

La "route" peut être construite dynamiquement et passée à l' routerLink.

Il est également possible de passer des paramètres optionnels par "query string" via l' queryParams.

Input
Input