Angular
Le routage

Routage avec des enfants

J'ai trouvé que c'était le moyen d'imbriquer correctement les routes enfants dans le fichier app.routing.ts ou app.module.ts (selon vos préférences). Cette approche fonctionne lorsque vous utilisez WebPack ou SystemJS.

L'exemple ci-dessous montre les routes pour les données home, home / counter et home / counter / fetch. Les premier et dernier itinéraires sont des exemples de redirections. Enfin, à la fin de l'exemple, vous pouvez exporter la route à importer dans un fichier distinct. Pour ex. app.module.ts

Pour mieux expliquer, Angular exige que vous ayez un itinéraire sans chemin dans le tableau d'enfants qui inclut le composant parent, pour représenter la route parente. C'est un peu déroutant, mais si vous pensez à une URL vide pour une route enfant, elle correspondrait essentiellement à la même URL que la route parente.

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

import { HomeComponent } from "./components/home/home.component";
import { FetchDataComponent } from "./components/fetchdata/fetchdata.component";
import { CounterComponent } from "./components/counter/counter.component";

const appRoutes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
    },
    {
        path: "home",            
        children: [
            {
                path: "",
                component: HomeComponent
            },
            {
                path: "counter",                    
                children: [
                    {
                        path: "",
                        component: CounterComponent
                    },
                    {
                        path: "fetch-data",
                        component: FetchDataComponent                            
                    }
                ]
            }
        ]
    },
    {
        path: "**",
        redirectTo: "home"
    }
];

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

Excellent exemple et description via Siraj

Routage de base

Le routeur permet la navigation d'une vue à l'autre en fonction des interactions de l'utilisateur avec l'application.

Voici les étapes de la mise en œuvre du routage de base dans Angular -

REMARQUE : Assurez-vous d'avoir cette balise:

<base href='/'> 

comme premier enfant sous votre balise head dans votre fichier index.html. Cet élément indique que votre dossier d'application est la racine de l'application. Angular saura alors comment organiser vos liens.

1. Vérifiez si vous pointez sur les dépendances de routage correctes / les plus récentes dans package.json (en utilisant la dernière version d'Angular) et que vous avez déjà effectué une npm install -

   "dependencies": {
       "@angular/router": "^4.2.5"
   }
   

2. Définissez l'itinéraire selon sa définition d'interface:

   interface Route {
     path?: string;
     pathMatch?: string;
     component?: Type<any>;
   }
   

3. Dans un fichier de routage ( routes/app.routing.ts ), importez tous les composants que vous devez configurer pour différents chemins de routage. Chemin vide signifie que la vue est chargée par défaut. ":" dans le chemin indique un paramètre dynamique transmis au composant chargé.

   import { Routes, RouterModule } from '@angular/router';
   import { ModuleWithProviders } from '@angular/core';
   import { BarDetailComponent } from '../components/bar-detail.component';
   import { DashboardComponent } from '../components/dashboard.component';
   import { LoginComponent } from '../components/login.component';
   import { SignupComponent } from '../components/signup.component';
   
   export const APP_ROUTES: Routes = [
       { path: '', pathMatch: 'full', redirectTo: 'login' },
       { path: 'dashboard', component: DashboardComponent },
       { path: 'bars/:id', component: BarDetailComponent },
       { path: 'login', component: LoginComponent },
       { path: 'signup',   component: SignupComponent }
   ];
   export const APP_ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
   

4. Dans votre app.module.ts , placez ceci sous @NgModule([]) sous imports :

   // Alternatively, just import 'APP_ROUTES
   import {APP_ROUTING} from '../routes/app.routing.ts';
   @NgModule([
       imports: [
           APP_ROUTING
           // Or RouterModule.forRoot(APP_ROUTES)
       ]
   ])
   

5. Chargez / affichez les composants du routeur en fonction du chemin d'accès accédé. La directive <router-outlet> est utilisée pour indiquer angulaire où charger le composant.

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <div>
               <router-outlet></router-outlet>
           </div>
       `
   })
   export class AppComponent {}
   

6. Liez les autres itinéraires. Par défaut, RouterOutlet charge le composant pour lequel le chemin vide est spécifié dans les Routes . RouterLink directive RouterLink est utilisée avec la balise d'ancrage HTML pour charger les composants RouterLink aux itinéraires. RouterLink génère l'attribut href qui est utilisé pour générer des liens. Par exemple:

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <a [routerLink]="['/login']">Login</a>
           <a [routerLink]="['/signup']">Signup</a>      
           <a [routerLink]="['/dashboard']">Dashboard</a>
           <div>
               <router-outlet></router-outlet>
           </div>
           `
   })
   export class AnotherComponent { }
   

Maintenant, nous sommes bons avec le routage vers des chemins statiques. RouterLink prend RouterLink charge le chemin dynamique en transmettant des paramètres supplémentaires avec le chemin.

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

@Component({
  selector: 'demo-app',
  template: `
        <ul>
          <li *ngFor="let bar of bars | async">
            <a [routerLink]="['/bars', bar.id]">
              {{bar.name}}
            </a>
          </li>
        </ul>
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class SecondComponent { }

RouterLink prend un tableau dans lequel le premier paramètre est le chemin de routage et les éléments suivants concernent les paramètres de routage dynamique.