février 20, 2020

Un guide pratique de l'angulaire: routage et gestion des événements

Le routage côté client est une caractéristique clé des applications d'une seule page. Apprenez à implémenter le routage dans une application Angular avec ce guide pratique.

Angular est un cadre pour la création d'applications côté client dynamiques à l'aide de HTML, CSS et JavaScript. Il dispose d'un bel outil CLI qui aide à la productivité des développeurs et à la génération de code qui suit le guide de conception angulaire recommandé afin que vous puissiez créer des applications rapides, réactives et modulaires. Dans cet article, vous apprendrez comment implémenter le routage dans une application angulaire et comment gérer les événements (par exemple, événement de clic de bouton).

Vous devez avoir une compréhension des composants, des directives, des modules, de la liaison de données, des services et des dépendances. injection en angulaire, car ces concepts sont nécessaires pour que vous compreniez de quoi je parle. Si vous ne connaissez pas ces concepts, vous êtes en bonne compagnie parce que j'ai écrit à leur sujet ??. Voici les liens vers les articles que j'ai écrits couvrant ces sujets:

L'application que nous allons créer ensemble pendant que vous parcourez cet article s'appuie sur le suivi des dépenses application que j'ai construite à partir de zéro pendant que j'écrivais les articles listés ci-dessus. Si vous avez lu et travaillé avec moi sur ces articles, vous devriez avoir le code complet. Sinon, vous pouvez télécharger le projet sur GitHub . Lorsque vous le téléchargez, vous devez ensuite copier le contenu du dossier src-part-5 dans le dossier src si vous souhaitez coder pendant que vous lisez.

Ajout du Page Historique

L'application n'a qu'une seule page pour le moment. Cette page permet aux utilisateurs de voir les dépenses du mois en cours. Nous allons ajouter une nouvelle page qui permettra aux utilisateurs de choisir un mois et de voir les dépenses pour le mois sélectionné.

Exécutez la commande ng g c dépenses / historique pour générer un nouveau composant. Collez le code ci-dessous dans le fichier de modèle du composant.


  
     Sélectionnez le mois:

Ce composant affichera un élément d'entrée qui sera utilisé pour sélectionner un mois et un tableau qui affichera les dépenses pour le mois sélectionné, rendu via le composant liste de dépenses . Nous utilisons la liaison d'événement pour gérer l'événement de keyup pour l'élément d'entrée. La liaison d'événements est la façon dont vous écoutez et vous abonnez aux événements dans Angular.

La syntaxe consiste en un nom d'événement cible entre parenthèses à gauche d'un signe égal et une instruction de modèle citée à droite. Dans le code ci-dessus, il est écrit (keyup.enter) = "getExpense (month.value)" . L'événement keyup écoutera chaque frappe, mais nous ne voulons répondre que lorsque l'utilisateur appuie sur la touche entrée. Angular fournit le pseudo-événement keyup.enter qui n'est déclenché que lorsque la touche Entrée est enfoncée.

Lorsque l'événement est déclenché, il appelle la fonction getExpense () avec la valeur de month.value . La #mois déclare une variable qui fait référence à l'élément d'entrée et donne accès aux données de l'élément. Avec lui, nous pouvons obtenir la valeur de l'élément et la transmettre à la fonction getExpense () .

Ouvrez history.component.ts et mettez à jour la classe avec le code ci-dessous .

 importer {Component} depuis "@ angular / core";
importer {ExpenseService} à partir de "../expense.service";
importer IExpense depuis "../expense";

@Composant({
  sélecteur: "et-history",
  templateUrl: "./history.component.html",
  styleUrls: ["./history.component.css"]
})
exporter la classe HistoryComponent {
  dépenses: IExpense [] = [];
  constructeur (private dépensesService: ExpenseService) {}

  getExpense (period: string) {
    si (période) {
      this.expenseService.getExpenses (period) .subscribe (
        dépenses => {
          this.penses = dépenses;
        },
        erreur => {
          console.log ("Erreur lors de la récupération des dépenses", erreur);
        }
      );
    }
  }
}

L'implémentation de getExpense appelle this.expenseService.getExpenses (period) pour obtenir un tableau de IExpense et l'attribue ensuite à la propriété dépenses qui est lié au composant liste de dépenses .

Configuration des itinéraires

Nous avons deux composants qui représentent deux pages distinctes dans l'application – le Accueil et le composant History .

La prochaine chose à faire est d'activer le routage dans l'application afin que les utilisateurs puissent naviguer entre les pages. Pour ce faire, nous allons d'abord configurer le routeur angulaire de sorte que lorsqu'un utilisateur navigue vers des chemins spécifiques, il doit afficher la vue du composant responsable de cet itinéraire. Le routeur angulaire est géré par le service de routeur angulaire, et ce service est enregistré dans le RouterModule . Le RouterModule déclare également certaines directives de routeur telles que les directives RouterLink et RouterOutlet .

Le projet possède déjà un module appelé AppRoutingModule , c'est là que nous mettrons toute logique liée au routage de l'application. Ce module est déclaré dans app-routing-module.ts et est inclus dans le tableau imports du module d'application racine.

 @NgModule ({
  déclarations: [
    AppComponent,
    BriefingCardsComponent,
    ExpenseListComponent,
    HomeComponent,
    HistoryComponent
  ],
  importations: [BrowserModule, AppRoutingModule, HttpClientModule],
  fournisseurs: [],
  bootstrap: [AppComponent]
})

Afin de travailler avec le service et les directives du routeur, nous devons importer le RouterModule . Ce module est inclus dans le tableau AppRoutingModule importe comme vous pouvez le voir dans le fichier

 import {NgModule} de "@ angular / core";
importer {Routes, RouterModule} depuis "@ angular / router";

const routes: Routes = [];

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

La variable routes est l'endroit où vous définirez les routes pour l'application et son type Routes . Le type Routes représente un tableau d'objets Route . Nous allons définir des routes pour l'application, mais une chose à noter est l'appel RouterModule.forRoot (routes) . La méthode forRoot expose les routes à l'application racine.

Mettez à jour la variable routes avec la valeur ci-dessous.

 const routes: Routes = [
  {
    path: "history",
    component: HistoryComponent
  },
  { path: "", component: HomeComponent },
  { path: "**", redirectTo: "/", pathMatch: "full" }
];

La route est un objet qui possède une propriété path qui correspondra au chemin URL dans le navigateur et une propriété component qui spécifie le composant qui doit être rendu lorsque l'itinéraire correspond au chemin spécifié. Le chemin history est mappé au composant History, tandis que le chemin avec une chaîne vide correspondra à l'itinéraire par défaut / et est mappé au composant Home.

Le chemin ** indique un chemin générique, qui est appelé lorsque le chemin demandé dans l'URL ne correspond à aucune des routes définies. Donc, si l'utilisateur visite localhost: 4200 / dashboard qui n'est pas affiné, nous voulons le rediriger vers l'itinéraire par défaut / . C'est pourquoi nous spécifions la propriété redirectTo qui indique le chemin vers lequel rediriger lorsque cette définition d'itinéraire est mise en correspondance.

En règle générale, vous souhaitez disposer d'une page d'erreur vers laquelle les chemins non existants sont acheminés. La propriété pathMatch est utilisée pour spécifier la stratégie de correspondance de chemin. Par défaut, le routeur vérifie les éléments URL à partir de la gauche pour voir si l'URL correspond à un chemin d'accès donné et s'arrête lorsqu'il y a correspondance. Par exemple, / team / 11 / user correspond à team /: id .

Ajoutez l'instruction d'importation suivante pour référencer les composants Home et History.

 importez {HistoryComponent} de "./expenses/history/history.component";
importer {HomeComponent} depuis "./home/home.component";

Utilisation des directives RouterLink et RouterOutlet

Maintenant que nous avons défini les itinéraires, nous voulons ajouter des liens qui permettront aux utilisateurs de naviguer dans l'application. Le composant racine App a un en-tête de navigation dans le balisage. Nous voulons que l'utilisateur navigue en cliquant sur l'un des deux liens qui doivent rediriger vers la page réelle. Pour ce faire, nous allons utiliser la directive RouterLink . Cette directive est une directive attribut que nous pouvons ajouter à la balise d'ancrage.

Ouvrez la app.component.html et mettez à jour les lignes 17 à 20 pour inclure la directive RouterLink en tant que attribut dont la valeur correspond à un chemin d'accès.

 Accueil 
 Historique

L'utilisation de cet attribut sur la balise d'ancrage permet au routeur de contrôler cet élément.

Nous avons encore besoin d'une chose pour compléter la demande. Si la route est activée, le routeur doit savoir où placer la vue du composant qu'il est censé rendre pour cette route. C'est là que vous utiliserez la directive RouterOutlet . Elle est utilisée comme directive de composant et indique l'endroit dans la vue où le routeur doit afficher le composant pour cet itinéraire.

Avec le composant racine App toujours ouvert, changez la ligne 25 pour utiliser le Directive RouterOutlet et non la directive du composant Home .

Cela complète les modifications que nous devons apporter pour activer le routage pour une application SPA Angular. Testez votre travail en exécutant la commande ng serve -o pour démarrer l'application angulaire.