Découvrir AOP-Routing avec Angular

Écrit par Cédrick Guerin

Qu’est-ce que la libraire AOP-Routing ?

AOP-Routing est une librairie écrite pour Angular afin de simplifier la façon de gérer le routage dans une application. Ainsi il est possible de gérer la navigation via des décorateurs TypeScript sans avoir besoin d’injecter le Router Angular dans notre composant.

En clair, on peut naviguer sans utiliser le Router Angular, en passant par des décorateurs TypeScript et on peut mettre à jour dynamiquement notre table de routage.

Tiré de la documentation :

Ci-dessous la liste des features que nous offre cette librairie.

Navigation impérative en utilisant des décorateurs

// Exemple de navigation impérative
this.router.navigateByUrl(this.router.url);

Navigation “Popstate” en utilisant des décorateurs

La navigation “Popstate” est la navigation via le navigateur (précédent, suivant) ou le fait d’intercepter ces évènements pour customiser le routage

Customisation possible de la logique de navigation
Ajout dynamique d’un nouveau path dans la table de routage pendant l’exécution de l’application
Changement dynamique d’un composant lié à une url durant l’exécution de l’application
Ajout/Suppression dynamique des guards canActivate pendant l’exécution de l’application

Dans cet article, nous allons découvrir ensemble comment mettre en place un simple routage et gérer notre navigation grâce à AOP-Routing.

Installation et intégration de la librairie

Note : Aop-Routing est compatible avec les versions 8.1 et plus d’Angular

Installez la librairie dans l’application

npm install aop-routing

2. Une fois installée, il faut l’ajouter dans le module de plus haut niveau (généralement le AppModule)

imports: [
 …
 AopRoutingModule
 ]

3. Injectez le service d’AOP dans le constructor du même module que celui utilisé ci-dessus.

export class AppModule {
 constructor(private navigationService: AopNavigationService) {}
 }

Et voilà ! AOP-Routing est prête à être utilisée dans votre appli.

Utilisation

Navigation Impérative

Découvrons maintenant comment l’utiliser.

Pour les exemples suivants, j’utiliserais la table de routage ci-dessous :

const routes: Routes = [
{path: 'page1', component: Page1Component, canActivate: [Guard]},
{path: 'page2', component: Page2Component },
{path: 'page3', component: Page3Component }
];

Pour naviguer à la page suivante, vous aurez besoin d’utiliser le décorateur RouteNext().

import { Component} from '@angular/core';@Component({
...
})
export class Page1Component {constructor() {}@RouteNext('page2')
public test() {
//contenu de la méthode
 }
}

En faisant cela, lorsque la méthode test() aura terminé de s’exécuter, l’application naviguera automatiquement sur page2

Si la navigation de l’application est gérée avec des données retournées, on peut aussi le faire en retournant un string ou un objet de type AopNavigator comme ceci

import { Component} from '@angular/core';@Component({
...
})
export class Page1Component {constructor() {}@RouteNext()
public test(): string {
//contenu de la méthode// return string
return 'page2';//return AopNavigator
const aop: AopNavigator = {
     destinationPage: 'page2',
   };
  return obj;
 }
}

AOP propose également des décorateurs pour faire ça de manière asynchrone.

// Le décorateur RouteNextAsync va souscrire a la méthode test()
// et fera naviguer notre application sur la valeur de l'observable // retournée@RouteNextAsync()
public test(): Observable<string> {
 //contenu de la méthode
  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of('page2');
   })
 );
}

De la même manière que plus haut, il est possible de retourner un AopNavigator en le définissant de la même manière.

Nous venons de voir comment utiliser AOP-Routing pour faire de la navigation impérative. Voyons maintenant comment faire de la navigation dite Popstate

Navigation Popstate

La navigation popstate est la navigation via le navigateur (précédent, suivant, etc…). Cette navigation peut être gérée de la même manière que la navigation impérative mais avec des décorateurs différents qui sont @RouteBack() et @RouteBackAsync()

//Retour à la page précédente après l'exécution de la méthode test()
@RouteBack()
public test() {
 //contenu de la méthode
}
------------------------------------------------------------------- //Retour à la page précédente après l'exécution asynchrone de la // méthode test()
@RouteBackAsync()
public test() {
 return of(async operations...).pipe(
 operators...)
}

Nous pouvons également choisir le nombre d’états que l’on souhaite passer en se basant sur l’historique du navigateur avec @RouteToState() et RouteToStateAsync()

// Retour en arrière 2 fois. Equivaut a cliquer 2 fois sur le bouton 
// précédent du navigateur@RouteToState(-2)
public test() {
 //contenu de la méthode
}

// Equivaut a cliquer 2 fois sur le bouton suivant du navigateur
@RouteToState(2)
public test() {
 // contenu de la méthode
}// souscrit à la méthode et, dans ce cas précis, fait 2 retours 
// arrières@RouteToStateAsync()
public test(): Observable<number> {
  //contenu de la méthode
  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(-2);
   })
 );
}// souscrit à la méthode et, dans ce cas précis, fait 2 retours 
// arrières en utilisant un AopNavigator
@RouteToStateAsync()
public test(): Observable<AopNavigator> {
  //contenu de la méthode
  
   const obj: AopNavigator = {
    destinationPage: -2',
  };

  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(obj);
   })
 );
}

Conclusion

Vous savez maintenant utiliser AOP-Routing pour gérer votre navigation simplement. Comme vous avez pu le constater, cette librairie nous permet de nous affranchir du Router et de la Location fournis par Angular ce qui facilite la gestion de la navigation pour les développeurs.

Source :