Angular: Routing

folder Projet: angularApp
le routage est le mechanisme qui permet de naviguer entre les component on doit declarer des routes qui pointent vers ces component Le fichier de routage est : /src/app/app-routing.module.ts

1.Créer des components

Avec angular/cli on vas générer ces components
Créer la component Home Commad:
ng generate component home
Créer la component List Commad:
ng generate component list
Ces component ont aussi les fichiers suivants:
  1. -list.component.css :contient le style spécifique à cette component
  2. -list.component.html :la template html
  3. -list.component.ts :la logique de la component contient les scriptes TypeScript
  4. -list.component.spec.ts:ficher de test
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
/*le constructeur */
constructor() { }

/*méthode s'éxéute automatiquement lorsque la component mount */
ngOnInit(): void {
}

}


Remarque: ajouter un menu dans la component principale app.component.html
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" routerLink="/list">List</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet>
</router-outlet>
</div>

Ajouter les routes / et /list dans le fichier de routage:

Le fichier de routage est : /src/app/app-routing.module.ts

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

//ici on a importer les components déja crées
//HomeComponent et ListComponent chaque variable point vers une component
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
//ce tableau est un tableau statique de routage ,contient toutes les routes
//de l'application sous la forme :{path:nomRoute,component:nomComponentDeclaréDansImport},
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list', component: ListComponent }
];

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

home.component.html

<div class="card text-dark mb-3">
<div class="card-header card bg-success text-white">Home Component</div>
<div class="card-body">
<h2>Contenu</h2>
</div>
</div>

list.component.html

<div class="card text-dark mb-3">
<div class="card-header card bg-warning text-white">List Component</div>
<div class="card-body">
<h2>Contenu</h2>
</div>
</div>

2.Routes avec des paramètres

Dans une application, on aura besoin de passer des paramètres entre les components
en utilisant les routes

A.Côté fichier de routage

Exemple:
{path: 'detail/:id' , component: detail}
Explication:
la component qui sera affichée est afficherProduit ,alors que cette
Component attend une paramètre id sous la forme :
produit/1
produit/12
...
Donc le syntaxe de la route est:
produit/:id
Afin de passer plusieurs paramètres on utilise :
{ path: 'produit/:id/:id1/:id2', component: traitements}

A.Côté View

<a [routerlink]="['/Produict', '2']">Afficher </a>
Ou
<a routerlink="/Product/2">Afficher </a>
Si on a plusieurs paramètres
<a [routerlink]="['/Produict', '2','12','78']">Afficher </a>
ou
<a routerlink="/Product/2/12/78">Afficher </a>

A.Côté Logique

soit la composante AfficherProduit.ts cette composante va recevoir les données envoyées , afin d'extraire ces paramètres on utilise la component ActviatedRoute 1.importer
import { ActivatedRoute } from '@angular/router';
2. Instancier un objet de type ActivatedRoute
constructor(private _Activatedroute:ActivatedRoute)
3. Extraire les données à partir de Activatedroute à l'aide de ParamMap
ParamMap qui fournit deux méthodes pour cela
  1. a.Snapshot
  2. b.observable
a.Snapshot
this.id=this._Activatedroute.snapshot.paramMap.get("id");
b.observable
this._Activatedroute.paramMap.subscribe(params => { this.id = params.get('id'); });

Exemple

Afin de tester le passage des paramètres via des routes , on va modifier la component list en ajoutant une liste de produits :
list.component.html
<div class="card text-dark mb-3">
<div class="card-header card bg-warning text-white">List Component</div>
<div class="card-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Name</th>
<th>Stock</th>
<th>Price</th>
<th>Détails</th>
</tr>
<tr *ngFor="let p of products; let i=index">
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.stock}}</td>
<td>{{p.price}}</td>
<td><a href="/details/{{p.id}}">Détails</a></td>
</tr>
</table>
</div>
</div>

list.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent {
products = [
{ id: 1, name: 'Sugar', stock: 10, price: 14 },
{ id: 2, name: 'Wheat', stock: 784, price: 125 },
{ id: 3, name: 'Rice', stock: 125, price: 75 }];
}

Créer la component Détails

ng generate component details
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute,ParamMap } from '@angular/router';
@Component({
selector: 'app-details',
templateUrl: './details.component.html',
styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit {

products = [
{ id: 1, name: 'Sugar', stock: 10, price: 14 },
{ id: 2, name: 'Wheat', stock: 784, price: 125 },
{ id: 3, name: 'Rice', stock: 125, price: 75 }];
constructor(private route:ActivatedRoute) { }
produit:any;

id:number=0;
ngOnInit(): void {
this.route.paramMap.subscribe((params: ParamMap) => {
this.id = Number(params.get('id'));
this.produit = this.products.find(t=>t.id ===this.id);

})
}

}

details.component.html
<div class="card text-dark mb-3">
<div class="card-header card bg-warning text-white">Détails : {{produit.name}}</div>
<div class="card-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Name</th>
<th>Stock</th>
<th>Price</th>
</tr>
<tr>
<td>{{produit.id}}</td>
<td>{{produit.name}}</td>
<td>{{produit.stock}}</td>
<td>{{produit.price}}</td>
</tr>
</table>
</div>
</div>


Router

permet de naviguer entre les composantes en utilisant la fonction navigate

app.component.ts

import { Component } from '@angular/core';
//import le Router
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//injécter une instance du Router
constructor(private router: Router) {
}
details(id:Number)
{
this.router.navigate(['/details', id]);
}

}


app.component.html

<button (click)="details(1)" class="btn">Details</button>
<router-outlet> </router-outlet>

Location

Location est un service qui permet de gérer l'historique de la navigation avec les fonctions forward(),back()

app.component.ts

import { Component } from '@angular/core';
//import le Location
import { Location } from '@angular/common';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
//injécter une instance du Location
constructor(public location: Location) {
}  
 
 pageAvant()
  {
   this.location.back();  
 }

}


app.component.html

<!--appeler une fonction de la component -->
<button (click)="pageAvant()" class="btn">Previous page</button>
<!--accéder directement à location doit etre déclaré public
constructor(public location: Location)
-->
<button (click)="location.forward()" class="btn">Next Page</button>

<router-outlet>   </router-outlet>