Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP 5: Routage: Tag Base

    Transféré par

    Boubaker Medanas
    25 vues6 pages

    Titre original

    TP5

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    25 vues6 pages

    TP 5: Routage: Tag Base

    Transféré par

    Boubaker Medanas

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    TP 5: Routage

    Rappelons que : An SPA is a website that dynamically generates and updates content, without the
    need to refresh the page. In other words, the user never leaves the page, as content is loaded in and
    out, rather than having the user navigate to other pages.
    Afin de permettre aux utilisateurs de garder leurs habitudes de navigation en visitant une
    Single Page Application, il est nécessaire d'utiliser un système de routage "Routing". Angular
    fournit nativement un module de "Routing" pour répondre à ce besoin.

    Tag base
    Vérifier le tag base au head du fichier src/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.
    Exemple basique de routage : toutes les routes sont définies dans app-routing module :

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


    import { Routes, RouterModule } from '@angular/router';
    import { Comp1Component } from './comp1/comp1.component';
    import { Comp2Component } from './comp2/comp2.component';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

    const routes: Routes = [


    {path : 'chemin1', component : Comp1Component},
    {path :'chemin2', component : Comp2Component},
    {path : '', redirectTo : '/chemin1', pathMatch : 'full'},
    {path :'**', component : PageNotFoundComponent}
    ];

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

    1
    Template de app component:
    <h1> Ceci est le contenu de appComponent</h1>
    <div>
    <a routerLink="chemin1">Lien vers cmp1</a>
    </div>
    <a routerLink="chemin2">Lien vers cmp2</a>
    <router-outlet></router-outlet>

    Routage modulaire
    Il est recommandé de distribuer les routes entre les différents modules de routage de l’application
    au lieu de les mettre toutes dans le app-routing module.
    Dans client-routing module :
    import { ClientComponent } from './client.component';

    const routes: Routes = [{path : 'site', component : ClientComponent}];

    Et home-routing module (si cette ligne n’existe pas dans votre code, l’ajouter) :
    const routes: Routes = [{path : 'home', component : HomeComponent}];

    Et ajouter une route ‘about’ dans about-routing module.

    Dans app-routing module, enlever la route qui correspond à une redirection vers le chemin ‘/home‘.
    Dans le template html du composant racine app, ajouter un affichage de texte quelconque avant le
    tag <router-outlet> par exemple :

    <h1>Bienvenu dans le app component</h1>


    <router-outlet></router-outlet>

    Ouvrir l’application dans le serveur de développement et tester les différents chemins définis (en les
    tapant directement dans la barre d’adresse). Voici la page initiale qui s’affiche :

    2
    Voici la page qui s’affiche pour le chemin /site :

    Vérifiez aussi les deux autres chemins (/home et /about).

    Routage imbriqué (Nested Routing)


    L’objectif de cette partie est de rendre les routes qui chargent les composants home et about
    relatives au composant client et non au composant racine app. Pour ce faire, il faut créer des routes
    enfants (child routes) vers les composants home et about.
    Consultez la documentation officielle :
    https://angular.io/guide/router#nesting-routes

    3
    Indications :
    • les routes vers les 3 composants (client, home et about) sont à créer dans le client-routing
    module de façon imbriquée. N’oublier pas de supprimer les routes créées précédemment
    vers home et about !
    • N’oublier pas de faire appel au routeur du template du composant client.
    Tester les chemins créés : mais il faut désormais taper /site/home et /site/about (/site reste valide).
    Notez l’effet du nested routing sur les vues affichées :
    Chemin /site/about :

    Chemin /site/home :

    4
    Barre de navigation commune
    On vous demande de rendre la barre de navigation commune à tout l’espace client. Pour ce faire,
    déplacer le code de la barre de navigation (html et css) vers le composant client. Supprimer ensuite
    le composant home-banner (n’oubliez pas de supprimer les références à ce composants !).
    Voici le rendu pour l’URL /site:

    Et pour /site/about:

    5
    Créez maintenant un composant ‘banner’ dans le module client et déplacer le code qui gère la barre
    de navigation dans ce nouveau composant que vous devez alors appeler depuis le composant client
    (rien ne change coté rendu final de l’application).

    Ajout des liens à l’aide de routerLink


    Ajouter le code nécessaire pour pouvoir utiliser la barre de navigation pour basculer entre les deux
    vue home et about.

    Modification des chemins


    On se propose de garder le nested routing tout en enlevant le terme “site” des chemins vers home et
    about. Pour ce faire, remplacer le path ‘site’ par la chaine vide dans client-routing module et voir le
    résultat (observez le changement dans les chemins affichés dans la barre d’adresse du navigateur).

    Redirection de la page d’accueil


    Rediriger la page initiale de l’application vers la page home dans app-routing module (comme
    c’était le cas avant le début de ce TP).

    Gestion des routes erronées


    Générez un module pour la gestion des erreurs. Générez un composant page-not-found dans ce
    module et l’utilisez pour traiter le cas d’adresse non existante.

    Vous aimerez peut-être aussi