Angular

Appearance

Créer un simple routeur ​

Dans le module, nous définissons les chemins pour les composants :

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

import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

const routes: Routes = [
  { path: '', component: MainComponent },
  { path: 'other', component: OtherComponent }
];

export const routing = RouterModule.forRoot(routes);
import { RouterModule, Routes } from '@angular/router';

import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

const routes: Routes = [
  { path: '', component: MainComponent },
  { path: 'other', component: OtherComponent }
];

export const routing = RouterModule.forRoot(routes);

On admet que nous avons 2 composants : MainComponent et OtherComponent. Nous créons donc un tableau définissant les différentes routes.

Lorsque le chemin entier de l'URL ne possède pas de nom, alors on redirige l'utilisateur vers main.

Nous exportons le module RouterModule configuré avec nos routes.

Chargeons le module routing ​

Nous ajoutons le module configuré dans le tableau imports :

js
import {BrowserModule} from '@angular/platform-browser';
import {routing} from './app.routes';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

@NgModule({
  imports: [BrowserModule, routing],
  declarations: [AppComponent, OtherComponent, MainComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}
import {BrowserModule} from '@angular/platform-browser';
import {routing} from './app.routes';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

@NgModule({
  imports: [BrowserModule, routing],
  declarations: [AppComponent, OtherComponent, MainComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Utiliser les directives pour naviguer ​

Le composant parent utilise des directives pour naviguer avec le routeur :

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

@Component({
  selector: 'app',
  template: `
    <ul>
      <li><a routerLink="/">main</a></li>
      <li><a routerLink="/other">other</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <ul>
      <li><a routerLink="/">main</a></li>
      <li><a routerLink="/other">other</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

La directive routerLink indique le chemin du composant. Ce dernier est inséré dans l'élément <router-outlet> dynamiquement