Angular pas à pas

 

1.      Routage

Dans les SPA(single page application) c.à.d.  une application monopage, l’utilisateur reste dans la même page, mais  la  vue  de cette page change. Ce changement dépend des besoins (actions) de l’utilisateur( ce qu’il veut faire).

Pour gérer la navigation d’une vue à l’autre tout en restant dans la même page nous utilisant un routeur angular.

Le routage permet la navigation d’une vue à l’autre en interprétant les URLs  comme des instructions de changement de vue.

 

Normalement quand on crée un projet angular, angular vous demande si tu veut créer un module de routage (appRoutingModule). Ce module te permet de configurer le routage.

Vérifier s’il existe sinon créer un par la commande suivante :

ng generate module app-routing --flat --module=app

 

2.      définir une route basique

 

il 3 principaux blocs pour créer une route.

1.      Import the AppRoutingModule into AppModule and add it to the imports array.

Cette étape est faite automatiquement par le cli mais en cas contraire c’est à vous de configurer.

 

1.      Import RouterModule and Routes into your routing module.

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

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

// CLI imports router

const routes: Routes = [];

 // sets up routes constant where you define your routes // configures NgModule imports and exports

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

 

2.      Définir les routes dans le tableau  Routes (array)

 

Les routes informe angular sur la vue à afficher quand l’utilisateur click sur un lien ou colle une url.

Chaque route  dans le tableau est un objet ayant deux propriétés.

La 1 ere path définit l’url de la route.

Le seconde component définit le composant angular à utiliser pour cette route.

 

Exemple

const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, ];

ceci apprend au routeur :

1.     de matcher l’url avec le path: first-component  et afficher FirstComponent quand l’URL est similaire à localhost:4200/ first-component  .

2.    de matcher l’url avec le path: second-component  et afficher SecondComponent quand l’URL est similaire à localhost:4200/ second-component 

 

 

 

3.      Ajouter les routes à l’application

1.      Ajouter les liens au deux composants. Affecter à la balise anchor(<a>) , que tu veut l’ajouter la route,  l’attribut routerLink.

2.      Mettez la valeur de l’attribut au composant à afficher  quand l’utilisateur click sur le lien.

3.      Modifier le Template de composant pour qu’il contient <router-outlet>. Cet élément informe angular pour qu’il modifie la vue de l’application avec le composant pour cette route.

 

 

Exemple

Template avec  routerLink et router-outlet

content_copy<h1>Angular Router App</h1>

<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->

<nav>

  <ul>

    <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>

    <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>

  </ul>

</nav>

<!-- The routed views render in the <router-outlet>-->

<router-outlet></router-outlet>

Exemple

Créons une page d’accueille et 2 autres.

On peut naviguer du principale au autres.

Créer un projet tp3

Créer un composant first

Créer un composant second

Modifier

App.routing.module import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { FirstComponent } from './first/first.component';   import { SecondComponent } from './second/second.component'; const routes: Routes = [{ path: 'p1', component: FirstComponent},   { path: 'p2', component: SecondComponent },];   @NgModule({   imports: [RouterModule.forRoot(routes)],   exports: [RouterModule] }) export class AppRoutingModule { }

App.componnet.html <h1> bienvenue ici page d'acceille</h1> <nav>   <ul>     <li><a routerLink="/p1" routerLinkActive="active">1 ere vue</a></li>     <li><a routerLink="/p2" routerLinkActive="active">2eme vue</a></li>   </ul> </nav>   <router-outlet></router-outlet>

 

4.      Avoir des informations sur la route

Souvent durant la navigation,  on veut passer de l’information d’un composant à un autre.

Par exemple considérer notre application qui affiche les produits et à coté de chaque produit un lien détail. Pour connaitre les détails l’user click sur ce lien et l’application réagit par l’affichage du détail de produit. Pour réaliser cette tache on doit passer l’ID du produit au deuxième composant pour qu’il connait  produit dont il doit afficher ses détails.

On peut utiliser la route pour passer ces information au composant.

Pour y faire, on utilise l’interface  ActivatedRoute.

Pour avoir l’information à partir d’une route:

1. Import ActivatedRoute and ParamMap  à votre  composant.

 

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

2.      Injecter une instance de ActivatedRoute en l’ajoutant au constructeur de l’application:

Dans la classe de  composant

constructor(

  private route: ActivatedRoute,

) {}

 

3.      Modifier  ngOnInit() pour qu’elle accède à ActivatedRoute et  tracker le paramètre  id:

ngOnInit() { this.activatedRoute.queryParams.subscribe(params => { this.name = params['name']; }); }

 

dans cet exemple on utilise une var name et on lui affectant une valeur en se basant sur le nom de param.