Informatique
Publié le 08/03/2017, rédigé par Chloé MAHALIN

Angular 4

Le mécanisme de routing ou la définition d'URLs dans une SPA

Objectif

Comprendre le mécanisme de routing proposé par Angular.

Explication

La gestion d'une arborescence de composants, comme c'est le cas avec le framework Angular, peut rapidement devenir compliqué lorsque l'on cherche à gérer de la navigation. Que cela soit la gestion d'un menu de navigation ou celle d'onglets de navigations, il est recommandé de se simplifier la vie à travers le mécanisme de routing proposé par Angular.

L'idée est simple et efficace : Simuler l'accès à des URLS et laisser au moteur la gestion du bon composant à afficher.

Vous n'aurez pas à vous embêter avec l'affichage, le masquage des composants en fonction du dernier clic sur le menu, voici un exemple du mécanisme de routing associé à des onglets :

Les dépendances Angular

Si vous ne l'avez pas déjà dans votre fichier package.json, rajoutez la dépendance angular router :

app.module.ts 

    "dependencies": {
        @angular/router
    }

Le moteur global

Dans la classe de gestion des modules, rajouter la description du mapping URL souhaité. Par défaut, je vais faire pointer l'url '/' vers ma home page :

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';

import { Tabs } from './layout/tabs/tabs';
import { Home } from './components/home/home';
import { Tab1 } from './components/tab/tab1';
import { Tab2 } from './components/tab/tab2';
import { PageNotFoundComponent } from './components/tab/not-found';

const appRoutes: Routes = [
  { path: 'monUrlPourTab1', component: Tab1 },
  { path: 'monUrlPourTab2', component: Tab2 },
  { path: 'monUrlPourHome', component: Home },  
  { path: '',   redirectTo: '/monUrlPourHome', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent, PageNotFoundComponent, 
    Tabs, Home, Tab1, Tab2
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

La déclaration des routes indique au moteur du framework les différentes 'fake' URLs de l'application. Chaque URL réfère à un composant. Je peux également rediriger une URL vers une autre ou une absence d'URL vers une URL.

Pour toute URL non déclarée, je redirige mon utilisateur vers un composant PageNotFound.

L'utilisation des 'fake' URLs

Dans le fichier HTML de mon composant, je n'ai qu'à traiter mes boutons à peu près de la même manière que je l'aurais fait avec une URL standard.

my-tabs.html

<div>
    <ul>
        <li routerLinkActive="is-active">
            <a routerLink="/monUrlPourHome" routerLinkActive="active">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>Home</span>
            </a>
        </li>

        <li routerLinkActive="is-active">
            <a routerLink="/monUrlPourTab1" routerLinkActive="active">Tab1</a>
        </li>

        <li routerLinkActive="is-active">
            <a routerLink="/monUrlPourTab2" routerLinkActive="active">Tab2</a>
        </li>

    </ul>
</div>

Dans mon fichier HTML, l'attribut 'routerLink' remplace l'attribut 'href' pour la déclaration des URLs. L'attribut routerLinkActive indique quels liens sont actifs ou non.

Le positionnement de la balise de substitut de mes composants

Dans le composant AppComponent, je rajoute mon composant d'onglet et la balise qui indique à quel endroit les composants devront être substitués.

<my-tabs></my-tabs>

<div id="main">
    <router-outlet></router-outlet>
</div>

Vous conviendrez qu'en termes de quantité de code, on est quand même minimalistes !

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité