Tout au long de ce didacticiel, Ahmed Bouchefra présente Angular Router et son utilisation pour créer des applications côté client et des applications à page unique avec routage et navigation.

Au cas où vous ne maîtriseriez pas encore Angular 7, j’aimerais vous rapprocher de tout ce que cet impressionnant framework front-end a à offrir. Je vais vous présenter une application de démonstration angulaire qui présente différents concepts liés au routeur, tels que:

• La prise du routeur,
• Routes et chemins,
• Navigation.

Je vais également vous montrer comment utiliser Angular CLI v7 pour générer un projet de démonstration dans lequel nous allons utiliser le routeur Angular pour implémenter le routage et la navigation. Mais tout d’abord, permettez-moi de vous présenter Angular et de passer en revue certaines des nouvelles fonctionnalités importantes de sa dernière version.

Introduction à Angular 7

Angular est l’un des frameworks front-end les plus populaires pour la création de sites Web côté client. applications pour le Web mobile et de bureau. Il suit une architecture à base de composants où chaque composant est un morceau de code isolé et réutilisable qui contrôle une partie de l'interface utilisateur de l'application.

Un composant dans Angular est une classe TypeScript décorée avec le @Component . ] décorateur. Il est associé à un modèle et à des feuilles de style CSS qui forment la vue du composant.

Angular 7, la dernière version d'Angular, a récemment été publiée avec de nouvelles fonctionnalités, notamment dans les performances et les outils CLI, telles que:

• Invites CLI: Un objet commun Des commandes telles que ng add et ng new peuvent maintenant inviter l'utilisateur à choisir les fonctionnalités à ajouter à un projet, telles que le format du routage et des feuilles de style, etc.
• Ajout du défilement à Angular Material CDK (Component DevKit).
• Ajout du support par glisser-déposer à Angular Material CDK.
• Les projets utilisent également par défaut des offres budgétaires qui avertissent les développeurs lorsque leurs applications dépassent les limites de taille. Par défaut, les avertissements sont émis lorsque la taille dépasse 2 Mo et les erreurs à 5 Mo. Vous pouvez également modifier ces limites dans votre fichier angular.json . etc.

Introduction à Angular Router

Angular Router est un puissant routeur JavaScript construit et mis à jour par l'équipe angulaire. qui peut être installé à partir du package @ angular / router . Il fournit une bibliothèque de routage complète avec la possibilité d'avoir plusieurs prises de routeur, différentes stratégies de correspondance de chemin, un accès facile aux paramètres de route et des gardes de route pour protéger les composants contre les accès non autorisés.

Le routeur angulaire est une partie essentielle de la plateforme angulaire. Il permet aux développeurs de créer des applications à une seule page avec plusieurs vues et de naviguer entre ces vues.

Voyons maintenant les concepts de routeur essentiels plus en détail.

The Router-Outlet

The Router-Outlet 19659027] est une directive disponible dans la bibliothèque de routeurs dans laquelle le routeur insère le composant recherché en fonction de l'URL du navigateur actuel. Vous pouvez ajouter plusieurs sorties dans votre application Angular, ce qui vous permet d'implémenter des scénarios de routage avancés.

Tout composant associé au routeur le restitue comme un frère de la prise de routeur.

Routes And Paths

Routes sont des définitions (objets) composées d'au moins un chemin et des attributs de composant (ou d'un chemin redirectTo ). Le chemin renvoie à la partie de l'URL qui détermine une vue unique à afficher, et composant au composant angulaire devant être associé à un chemin. Sur la base d'une définition de route que nous fournissons (via une méthode statique RouterModule.forRoot (routes) ), le routeur est capable de diriger l'utilisateur vers une vue spécifique.

Chaque route ] mappe un chemin URL sur un composant

Le chemin peut être vide, ce qui indique le chemin par défaut d'une application et correspond généralement au début de l'application.

Le chemin peut prendre . ] joker chaîne ( ** ). Le routeur sélectionnera cette route si l’URL demandée ne correspond à aucun chemin pour les routes définies. Cela peut être utilisé pour afficher une vue «Introuvable» ou rediriger vers une vue spécifique si aucune correspondance n'est trouvée.

Voici un exemple d'itinéraire:

 {chemin: 'contacts', composant: ContactListComponent}

Si cette définition d'itinéraire est fournie à la configuration du routeur, celui-ci restituera ContactListComponent lorsque l'URL du navigateur de l'application Web devient / contacts .

Stratégies de correspondance d'itinéraire [Stratégies de correspondance d'itinéraire]. 19659025] Le routeur angulaire propose différentes stratégies de correspondance de route. La stratégie par défaut consiste simplement à vérifier si l’URL du navigateur actuel est préfixé par le chemin .

Par exemple, notre route précédente:

 {chemin: 'contacts', composant: ContactListComponent}

Pourrait également être écrit comme:

 {chemin: 'contacts', cheminMatch: 'préfixe', composant: ContactListComponent}

L'attribut patchMath spécifie la stratégie de correspondance. Dans ce cas, il s’agit du préfixe qui est la valeur par défaut

. La deuxième stratégie d’adéquation est complète . Lorsqu'il est spécifié pour une route, le routeur vérifie si le chemin est exactement égal à au chemin de l'URL du navigateur actuel:

 {chemin: 'contacts', pathMatch: 'full', composant : ContactListComponent}

Route Params

La création d'itinéraires avec des paramètres est une fonctionnalité courante dans les applications Web. Le routeur angulaire vous permet d'accéder aux paramètres de différentes manières:

Vous pouvez créer un paramètre de route à l'aide de la syntaxe colon . Il s'agit d'un exemple d'itinéraire avec un paramètre id :

 {chemin: 'contacts /: id', composant: ContactDetailComponent}

Route Guards

Un garde de route est une fonction du routeur angulaire qui permet aux développeurs d'exécuter une certaine logique lorsqu'un itinéraire est demandé. En fonction de cette logique, il permet ou interdit à l'utilisateur d'accéder à l'itinéraire. Il est couramment utilisé pour vérifier si un utilisateur est connecté et dispose de l'autorisation avant de pouvoir accéder à une page.

Vous pouvez ajouter un garde de route en implémentant l'interface CanActivate disponible à partir de @angular / router et étend la méthode canActivate () qui contient la logique permettant d'autoriser ou de refuser l'accès à la route. Par exemple, la protection suivante autorisera toujours l’accès à une route:

la classe MyGuard implémente CanActivate {
  canActivate () {
    retourne vrai;
  }
}

Vous pouvez ensuite protéger une route avec le gardien en utilisant l'attribut canActivate :

 {chemin: 'contacts /: id, canActivate: [MyGuard]composant: ContactDetailComponent}

Directive sur la navigation

Le routeur angulaire fournit la directive routerLink pour créer des liens de navigation. Cette directive prend le chemin associé au composant vers lequel naviguer. Par exemple:

 Contacts 

Prises multiples et voies auxiliaires

Le routeur angulaire prend en charge plusieurs prises de la même application.

Un composant est associé à une voie principale et peut avoir des voies auxiliaires. Les routes auxiliaires permettent aux développeurs de parcourir plusieurs routes en même temps.

Pour créer une route auxiliaire, vous avez besoin d'une prise de routeur nommée sur laquelle le composant associé à la route auxiliaire sera affiché.

• La ​​prise sans nom. est le point de vente principal.
• Tous les points de vente devraient avoir un nom, à l'exception du point de vente principal.

Vous pouvez ensuite spécifier le point de vente auquel vous voulez rendre votre composant à l'aide de l'attribut de point de vente:

 {chemin: "contacts" , composant: ContactListComponent, outlet: "outlet1"}

Création d’un projet de démonstration Angular 7

Dans cette section, nous verrons un exemple concret sur la manière de configurer et de travailler avec le routeur angulaire. Vous pouvez voir la démonstration en direct que nous allons créer et le référentiel GitHub du projet.

Installation de Angular CLI v7

Angular CLI nécessite Noeud 8.9+ avec NPM 5.5.1+ . Vous devez vous assurer que ces exigences sont installées sur votre système, puis exécutez la commande suivante pour installer la dernière version de Angular CLI:

 $ npm install -g @ angular / cli

Ceci installera la CLI angulaire globalement.

Note : Vous pouvez utiliser sudo pour installer des packages globalement, en fonction de la configuration de votre npm.

Création d'un projet Angular 7

La création d'un nouveau projet est une commande, il vous suffit simplement d’exécuter la commande suivante:

 $ ng new angular7-router-demo

La CLI vous demandera si vous souhaitez ajouter un routage (tapez N pour Non car nous verrons comment ajouter du routage manuellement) et quel format de feuille de style voulez-vous utiliser, choisissez CSS , la première option a ensuite frappé Entrez . La CLI créera une structure de dossiers avec les fichiers nécessaires et installera les dépendances requises du projet.

Création d'un service fictif d'arrière-plan

Etant donné que nous n'avons pas vraiment d'arrière-plan pour interagir, nous allons créer un faux back-end utilisant la bibliothèque angular-in-memory-web-api qui est une API Web en mémoire pour les démonstrations et les tests angulaires émulant des opérations CRUD sur une API REST.

en interceptant les requêtes HttpClient envoyées au serveur distant et les redirigeant vers un magasin de données en mémoire local que nous devons créer.

Pour créer un faux back-end, nous devons suivre la prochaine étapes:

1. Premièrement, nous installons le module angular-in-memory-web-api
2. Ensuite, nous créons un service qui renvoie des données fausses,
3. Enfin, configurez l'application pour utilisez le faux back-end.

Dans votre terminal, exécutez la commande suivante pour installer le angular-in-memory-web-api . module à partir de npm:

 $ npm install --save angular-in-memory-web-api

Ensuite, générez un service back-end en utilisant:

 $ ng g s backend

Ouvrez le fichier src / app / backend.service.ts et importez-le dans le module InMemoryDbService du module angular-in-memory-web-api : [19659037] importer {InMemoryDbService} depuis 'angular-in-memory-web-api'

La classe de service doit implémenter InMemoryDbService puis ignorer la méthode createDb () :

 @Injectable ({
  FourniDans: 'root'
})
La classe d'exportation BackendService implémente InMemoryDbService {

  constructeur () {}
  createDb () {
    
   let contacts = [
     {  id:  1,  name:  'Contact 1', email: 'contact1@email.com' },
     {  id:  2,  name:  'Contact 2', email: 'contact2@email.com' },
     {  id:  3,  name:  'Contact 3', email: 'contact3@email.com' },
     {  id:  4,  name:  'Contact 4', email: 'contact4@email.com' }
   ];

   retourne {contacts};
    
  }
}

Nous créons simplement un tableau de contacts et nous les renvoyons.

Enfin, nous devons simplement importer InMemoryWebApiModule dans le fichier app.module.ts et fournir notre faux service back-end.

 ] importer {InMemoryWebApiModule} à partir de “angular-in-memory-web-api”;
importer {BackendService} à partir de “./backend.service”;
/ * ... * /

@NgModule ({
  déclarations: [
    /*...*/
  ],
  importations: [
    /*...*/
    InMemoryWebApiModule.forRoot(BackendService)
  ],
  fournisseurs: [],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

Créez ensuite un ContactService qui contient le code permettant de travailler avec des contacts:

 $ ng g s contact

Ouvrez le fichier src / app / contact.service.ts et mettez-le à jour pour lui donner une apparence similaire au code suivant:

 import {Injectable} à partir de '@ angular / core';
importer {HttpClient} à partir de “@ angular / common / http”;

@Injectable ({
  FourniDans: 'root'
})
classe d'exportation ContactService {

  API_URL: string = "/ api /";
  constructeur (http privé: HttpClient) {}
  getContacts () {
   renvoyer this.http.get (this.API_URL + 'contacts')
  }
  getContact (contactId) {
   return this.http.get (`$ {this.API_URL + 'contacts'} / $ {contactId}`)
  }
}

Nous avons ajouté deux méthodes:

• getContacts ()
  Pour obtenir tous les contacts.
• getContact ()
  Pour obtenir un contact par id.

Vous pouvez définir le API_URL vers n'importe quelle URL, car nous n'allons pas utiliser de véritable back-end. Toutes les demandes seront interceptées et envoyées au back-end en mémoire.

Création de nos composants angulaires

Avant que nous puissions voir comment utiliser les différentes fonctionnalités du routeur, créons d'abord un ensemble de composants dans notre projet. 19659011] Rendez-vous sur votre terminal et exécutez les commandes suivantes:

 $ ng gc contact-list
$ ng g c contact-detail

Ceci générera deux composants ContactListComponent et ContactDetailComponent et les ajoutera au module principal de l'application.

Configuration du routage

Dans la plupart des cas, vous utiliserez le Angular CLI pour créer des projets avec une configuration de routage, mais dans ce cas, nous l’ajouterons manuellement afin d’avoir une meilleure idée du fonctionnement du routage dans Angular.

Ajout du module de routage

Nous devons ajouter AppRoutingModule. qui contiendra nos routes d'application et une sortie de routeur où Angular insérera le composant correspondant en fonction de l'URL actuelle du navigateur.

Nous verrons:

• Comment créer un module angulaire pour le routage et l'importer ;
• Ajout de routes à différents composants;
• Ajout d'une sortie de routeur.

Commençons par créer un module de routage dans un fichier app-routing.module.ts . . Dans le src / app créez le fichier en utilisant:

 $ cd angular7-router-demo / src / app
$ touch app-routing.module.ts

Ouvrez le fichier et ajoutez le code suivant:

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

routes const: Routes = [];

@NgModule ({
  importations: [RouterModule.forRoot(routes)],
  exportations: [RouterModule]
})
classe d'exportation AppRoutingModule {}

Nous commençons par importer le NgModule du paquet @ angular / core qui est un décorateur TypeScript utilisé pour créer un module angulaire.

Nous importons également le RouterModule et Classes d'itinéraires du package @ angular / router . RouterModule fournit des méthodes statiques comme RouterModule.forRoot () pour transmettre un objet de configuration au routeur.

Nous définissons ensuite un tableau constant de types . Routes qui seront utilisées pour stocker des informations sur chaque route.

Enfin, nous créons et exportons un module appelé AppRoutingModule (vous pouvez l'appeler comme vous voulez), qui est simplement un Classe TypeScript décorée avec le décorateur @NgModule prenant un objet méta-information. Dans l'attribut imports de cet objet, nous appelons la méthode statique RouterModule.forRoot (routes) avec le tableau routes comme paramètre. Dans le tableau exports nous ajoutons le RouterModule .

Importation du module de routage

Nous devons ensuite importer ce module de routage dans le module principal de l'application qui réside dans le fichier src / app / app.module.ts :

 import {BrowserModule} à partir de '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';

import {AppRoutingModule} depuis './app-routing.module';
importer {AppComponent} à partir de './app.component';

@NgModule ({
  déclarations: [
    AppComponent
  ],
  importations: [
    BrowserModule,
    AppRoutingModule
  ],
  fournisseurs: [],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

Nous importons le AppRoutingModule de ./ app-routing.module et nous l'ajoutons au tableau importations du module principal.

Ajout du La prise du routeur

Enfin, nous devons ajouter la prise du routeur. Ouvrez le fichier src / app / app.component.html contenant le modèle d'application principal et ajoutez le composant :

Le routeur angulaire rendra le composant correspondant au navigateur actuel. chemin.

C’est toutes les étapes à suivre pour configurer manuellement le routage dans un projet angulaire.

Création de routes

Ajoutons maintenant des routes à nos deux composants. Ouvrez le fichier src / app / app-routing.module.ts et ajoutez les routes suivantes au tableau :

 const routes: Routes = [
    {path: 'contacts' , component: ContactListComponent},
    {path: 'contact/:id' , component: ContactDetailComponent}
];

Assurez-vous d'importer les deux composants du module de routage:

 import {ContactListComponent} depuis './contact-list/contact-list.component';
import {ContactDetailComponent} de './contact-detail/contact-detail.component';

Nous pouvons maintenant accéder aux deux composants des chemins / contacts et contact /: id .

Ajout de liens de navigation

Ajoutez maintenant des liens de navigation à notre application. modèle utilisant la directive routerLink . Ouvrez le fichier src / app / app.component.html et ajoutez le code suivant au-dessus de la prise du routeur:

 Contacts  

Nous devons ensuite afficher la liste des contacts dans ContactListComponent . Ouvrez le fichier src / app / contact-list.component.ts puis ajoutez le code suivant:

 import {Component, OnInit} à partir de '@ angular / core';
import {ContactService} à partir de '../contact.service';

@Composant({
  sélecteur: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  styleUrls: ['./contact-list.component.css']
})
La classe d'exportation ContactListComponent implémente OnInit {

  contacts: any [] = [];
  

  constructeur (private contactService: ContactService) {}

  ngOnInit () {
    this.contactService.getContacts (). subscribe ((data: any []) => {
        console.log (données);
        this.contacts = data;
    })
  }
}

Nous créons un tableau de contacts pour contenir les contacts. Ensuite, nous injectons ContactService et appelons la méthode getContacts () de l'instance (sur la ngOnInit du cycle de vie) pour obtenir des contacts et les affecter à le tableau contacts .

Ouvrez ensuite le fichier src / app / contact-list / contact-list.component.html et ajoutez:

  

  

    
 Nom 
    
 Email [19659158] Actions 
  
  

    
 {{contact.name}} 
    
 {{contact.email}} 
 
    

     Aller au détail 
    

Nous parcourons les contacts et affichons le nom et l’adresse électronique de chaque contact. Nous créons également un lien vers le composant d'informations détaillées de chaque contact à l'aide de la directive routerLink .

Ceci est une capture d'écran du composant:

Lorsque nous cliquons sur le lien Accéder aux détails il nous mènera à ContactDetailsComponent . La route a un paramètre id voyons comment nous pouvons y accéder depuis notre composant.

Ouvrez le src / app / contact-detail / contact-detail.component.ts . archivez et modifiez le code afin qu'il ressemble au code suivant:

 import {Component, OnInit} from '@ angular / core';
importer {ActivatedRoute} depuis '@ angular / router';
import {ContactService} à partir de '../contact.service';

@Composant({
  sélecteur: 'app-contact-detail',
  templateUrl: './contact-detail.component.html',
  styleUrls: ['./contact-detail.component.css']
})
La classe d'exportation ContactDetailComponent implémente OnInit {
  
  contact: tout;
  constructeur (contactService privé: ContactService, voie privée: ActivatedRoute) {}

  ngOnInit () {
    this.route.paramMap.subscribe (params => {
    console.log (params.get ('id'))
     this.contactService.getContact (params.get ('id')). subscribe (c => {
        console.log (c);
        this.contact = c;
    })
    });
     
  }
}

Nous injectons ContactService et ActivatedRoute dans le composant. Dans ngOnInit () nous récupérons le paramètre id qui sera transmis de la route et l'utilisera pour obtenir les détails du contact que nous attribuons à un contact objet.

Ouvrez le fichier src / app / contact-detail / contact-detail.component.html et ajoutez:

  Contact # {{contact.id}} 

  . : {{Nom du contact}}


  Email: {{contact.email}}

Lorsque nous visitons notre application pour la première fois à partir de 127.0.0.1:4200/ le point de vente ne restitue aucun composant. Nous allons donc rediriger le chemin vide vers les chemins en ajoutant le route suivante vers le tableau de routes:

 {chemin: '', cheminMatch: 'complet', redirectTo: 'contacts'}

Nous voulons faire correspondre le chemin vide exact, c'est pourquoi nous spécifions la stratégie de correspondance complète .

Conclusion

Dans ce didacticiel, nous avons vu comment utiliser le routeur angulaire pour l'ajouter. routage et navigation dans notre application. Nous avons vu différents concepts, tels que la sortie du routeur, les itinéraires et les chemins, et nous avons créé une démonstration pour présenter les différents concepts de manière pratique. Vous pouvez accéder au code à partir de ce référentiel .

(dm, ra, yk, il)