Angular 2+ : Configurer les routes et le routage

Gestion des Routes dans un Application Angular

Lorsque vous avez défini les routes de votre application, il est essentiel de les faire connaître à l’application. Cela peut être fait en bootstrapant le fournisseur que nous avons exporté précédemment.

Etape 1 : Trouvez votre configuration de bootstrap (main.ts)

La configuration de bootstrap doit se trouver dans main.ts, mais la localisation peut varier. Faites attention à trouver la bonne place pour l’importation des routes.

// main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';

// Importer le composant racine (App)
import { App } from './app/app';
// Importer les routes de l'application
import { APP_ROUTES_PROVIDER } from './app/app.routes';

bootstrap(App, [
  APP_ROUTES_PROVIDER,
])
.catch(err => console.error(err));

Etape 2 : Configurer le Router

Maintenant que nous avons défini les routes, il est temps de configurer le router. Pour ce faire, importez le fournisseur provideRouter et configurez-le avec vos routes.

// app.routes.ts
import {provideRouter} from '@angular/router';
import {Home} from './routes/home/home';
import {Profile} from './routes/profile/profile';

export const routes = [
  {path: '', redirectTo: 'home'},
  {path: 'home', component: Home},
  {path: 'login', component: Login},
];

export const APP_ROUTES_PROVIDER = provideRouter(routes);

Etape 3 : Configurer le Router dans l’App

Configurez les routes dans votre composant racine (App).

// app.ts
import {Component} from '@angular/core';
import {Router, ROUTER_DIRECTIVES} from '@angular/router';

@Component({
  selector: 'app',
  templateUrl: 'app.html',
  styleUrls: ['app.css'],
  directives: [
    ROUTER_DIRECTIVES,
  ]
})
export class App {
  constructor() {}
}

Etape 4 : Afficher les composants en fonction des routes

Pour afficher les composants correspondant aux routes, utilisez le balise <router-outlet> dans votre HTML.

<!-- app.html -->
<router-outlet></router-outlet>

Cette balise remplacera automatiquement les composants en fonction de la route actuelle.

Etape 5 : Configurer les liens

Pour configurer les liens qui redirigent vers des routes spécifiques, utilisez le directive routerLink.

<!-- app.html -->
<a routerLink="/home">Home</a>

Etape 6 : Ajouter des composants dynamiquement

Pour ajouter des composants dynamiquement en fonction d’une source de données, utilisez la méthode createComponent sur l’instance de ViewContainerRef.

// app.ts
import {ViewChild} from '@angular/core';
import {ViewContainerRef} from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: 'app.html',
  styleUrls: ['app.css'],
})
export class App {
  @ViewChild('parent', {read: ViewContainerRef}) target: ViewContainerRef;

  addElement() {
    let childComponent = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    this.target.createComponent(childComponent);
  }
}

Conclusion

Dans cet article, nous avons vu comment configurer les routes dans une application Angular et comment afficher les composants correspondant aux routes. Nous avons également vu comment ajouter des composants dynamiquement en fonction d’une source de données.

Il est important de noter que la configuration des routes peut varier en fonction de votre application spécifique, mais le principe reste le même.

Prochaines étapes

• Configurer les liens pour rediriger vers des routes spécifiques
• Ajouter des composants dynamiquement en fonction d’une source de données
• Configurer les paramètres de route pour afficher des composants personnalisés