Guide du débutant: Angular: routage

Routing angulaire: créez le noyau de navigation d'une seule application de page

Dans toute application de page, le routage est le mécanisme de base qui garantit que les composants corrects sont chargés pour la vue actuelle ou l'état d'application. Le routage est généralement demandé lorsque l'application est chargée ou lorsque l'action utilisateur est déclenchée et peut également être déclenchée en fonction de l'entrée du serveur.

Les routeurs angulaires ont de nombreux éléments constitutifs importants. Cet article montrera la partie la plus importante du routeur angulaire et créera un exemple pratique dans le processus.

Étape 1: Installez le routeur angulaire

Tout d'abord, vous devez installer le routeur angulaire dans votre projet. Angular Router est un routeur basé sur JavaScript extrêmement puissant créé et entretenu par l'équipe Angular Core.

Vous pouvez facilement installer le routeur à partir du package @angular/router . Il existe deux façons différentes d'installer le package @angular/router , vous devez définir l'itinéraire racine de votre application dans votre fichier index.html . Dans le dossier racine de l'application, vous pouvez trouver le fichier index.html . Ici, utilisez le chemin "/" pour ajouter l'emplacement de base. Ce changement indique à Angular où commencent tous les itinéraires.

<base href="/">
<title>Routage angulaire</title>

Étape 2: Ajouter des dépendances à app.module.ts

Si vous utilisez NgModule , le App Module principal de l'application doit avoir une déclaration NgModule . Ce fichier doit être modifié à l'aide des composants suivants:

 import {ngmodule} de '@ angular / core';
import {BrowSerModule} depuis '@ angular / plateforme-Browser';
import {RouterModule} de '@ Angular / Router';

import {AppComponent} depuis './app.component';

@Ngmodule ({
  Imports: [Browsermodule, Routermodule],
  Bootstrap: [AppComponent],
  Déclarations: [AppComponent],
})
classe d'exportation Appmodule {}

Étape 3: Configurer RouterModule

RouterModule nécessite des informations sur le routage dans une seule application de page. Avant de fournir ces informations, RouterModule a deux méthodes statiques qui peuvent être utilisées pour fournir au routeur la configuration requise pour le routage dans l'application. C'est à ce moment que toute la configuration est terminée.

Lors de la définition d'un itinéraire pour la configuration racine d'une application, plusieurs instructions de routage dans l'application sont accessibles à l'aide d'une méthode statique appelée forRoot . Voici un petit extrait de code montrant comment utiliser forRoot . Dans de nombreux cas, il sera plus facile de lire et de maintenir si l'itinéraire est stocké dans un fichier séparé et importé dans le tableau ROUTES ci-dessous.

Ensuite, nous avons RouterModule.forRoot . La principale différence est forRoot . Les modules de l'application peuvent définir et configurer leurs propres itinéraires. Ces itinéraires peuvent être importés dans le module principal selon les besoins.

Voici un petit extrait de code où nous utilisons router-outlet . Lorsque notre routeur identifie le composant à charger pour l'itinéraire, le composant est créé dynamiquement. Les composants créés dynamiquement seront injectés le long de router-outlet . Dans AppComponent , vous pouvez injecter des directives comme suit:

 import {composant} de '@ angular / core';

@Composant({
  Sélecteur: «AppComponent»,
  modèle: `
<div>
<h1>Routage angulaire</h1>
<router-outlet></router-outlet>
</div>
  `,
})
classe d'exportation AppComponent {}

Les paramètres se terminent ici. Maintenant, nous pouvons examiner les besoins spécifiques du projet et commencer à construire l'itinéraire.

Étape 4: Créez un itinéraire pour une seule application de page

Nous allons construire l'itinéraire de l'application dans le fichier suivant: app.routing.ts . Avoir un routage statique est crucial lors de la création d'une seule application de page. Dans notre cas, le routage statique sera la page d'accueil du chargement de l'application.

Voici notre tableau routes :

 exportation const les approuses: routes = [
    {path: '', composant: homecomponent},
    {path: 'calc', composant: calccomponent},
    {path: '**', composant: notfoundComponent}
]]

• Un chemin vide représente un itinéraire statique.
• ** signifie ce qui doit être chargé s'il n'y a pas d'autre itinéraire de correspondance.

Étape 5: Navigation

En utilisant les modifications de routage et de configuration créées ci-dessus, nous pouvons naviguer. Créons d'abord un composant principal pour notre application appelée routerLink , une directive angulaire routerLink vous pouvez acheminer d'un itinéraire à un autre sans modifier la valeur dans la barre d'URL. Si vous souhaitez créer un itinéraire dynamique, vous devez envelopper [routerLink]=['/path', variable] .

Il s'agit de notre fichier home.component.html avec des liens de routage statiques.

<h2>
    Bienvenue sur la page d'accueil
</h2>

<nav>
<a routerlink="/calc" routerlinkactive="active">Aller au calc</a>
</nav>

Il s'agit du fichier home.component.ts correspondant:

 import {composant} de '@ angular / core';

@Composant({
  Sélecteur: «maison»,
  TemplateUrl: 'home.component.html'
})
Classe d'exportation HomeComponent {}

Par défaut, lorsque vous chargez l'application, le chemin "" correspond à /calc et la vue suivante sera affichée. Pourquoi? Parce que dans notre app.routing.ts CalcComponent .

Maintenant que vous avez appris les bases du routage, vous avez créé une page de connexion et un itinéraire pour votre application! Ensuite, nous présenterons des concepts avancés dans le routage angulaire.

Concept de routage avancé

Paramètres de routage dynamique

Dans une seule application de page, vous pouvez utiliser plusieurs actions pour accéder à un itinéraire spécifique. Par exemple, dans notre application de calculatrice, l'extrait URL est : . Le côlon indique au routeur que la valeur saisie ne fait pas partie de l'URL, mais un paramètre de routage.

 exportation const les approuses: routes = [
    {path: '', composant: homecomponent},
    {chemin: 'calc /: opération', composant: calccomponent},
    {path: '**', composant: notfoundComponent}
]]

Nous avons établi une route dynamique. Maintenant, lorsque nous créons un lien ou tapons une adresse dans la barre d'adresse, nous pouvons facilement échanger l'addition, la division et plus d'opérations.

Est maintenant notre prochain défi. Comment allez-vous extraire les informations de routage dynamiques de l'URL de routage? La plupart du temps, nous utilisons ngOnInit et son rôle dans le cycle de vie des composants.

Pour accéder aux paramètres de routage dynamique, nous utilisons ActivatedRoute pour inclure un params . Abonnez-vous à ngOnInit . Lorsque nous acheminons d'un paramètre à un autre, le composant de routage réel n'est pas détruit. Il s'agit de la technologie qu'angular utilise pour améliorer les performances. Lorsque vous vous abonnez sur ActivatedRoute .

 // l'itinéraire est défini comme chemin = '/ calc /: opération'

import {composant, onInit} de '@ angular / core';
import {actiatedRoute} de '@ angular / router';

@Composant({
  Sélecteur: «calc.
  TemplateUrl: './calc.component.html'
})
Classe d'exportation CalcComponent implémente onInit {
  opération: chaîne;
  Constructeur (route privée: activéStroute) {}
  ngonInit () {
    this.Route.params.Subscribe ((params) => this.operation = params.Operation);
  }
}

Créer un sous-programme

Jusqu'à présent, nous avons vu des routes qui ne contiennent que des niveaux uniques. Maintenant, définissons le routage à plusieurs niveaux. Par exemple, un routage à un niveau unique serait /calc/addition .

Nous pouvons affecter /calc/addition aura un autre composant. Pour réaliser ce comportement, nous l'utilisons dans le composant parent<router-outlet></router-outlet> , l'itinéraire y sera rendu.

Parfois, nous ne pouvons pas du tout utiliser des composants spécifiques de l'itinéraire parent. Dans ce cas, nous pouvons supprimer le composant de la déclaration de routage. Ceci est également appelé routage sans composant.

Voici un exemple simple qui peut vous aider à comprendre ces concepts.

 // Définir les routes Const de la route: routes = [
  {
    Chemin: 'Calc',
    Composant: calcComponent,
    enfants: [
      {Path: 'ajout', composant: calcadditionComponent},
      {path: 'soustraction', composant: calcSubstractionComponent},
    ],
  },
]]

// Routes de constants de routage sans composant Routes: routes = [
  {
    Chemin: 'Calc',
    enfants: [
      {Path: 'ajout', composant: calcadditionComponent},
      {path: 'soustraction', composant: calcSubtractionComponent},
    ],
  },
]]
@Ngmodule ({
  Imports: [Browsermodule, RouterModule.Forroot (routes)],
})


// Créer des composants parent Import {Component} de '@ Angular / Core';

@Composant({
  Sélecteur: «calc.
  modèle: `
<div>
<calc-addition></calc-addition>
<calc-subtraction></calc-subtraction>
<router-outlet></router-outlet>
</div>
  `,
})
classe d'exportation calccomponent {}

Obtenez des itinéraires à partir de différents modules

À mesure que les applications augmentent, le traitement du routage peut être un défi. Parfois, vous devez obtenir l'itinéraire à partir de différents modules. Dans ce cas, vous pouvez utiliser RouterModule.forChild() .

Commençons par un exemple:

 // Routes Constons d'exportation de sous-programme: routes = [
  {
    chemin: '',
    Composant: calcComponent,
    enfants: [
      {Path: 'ajout', composant: calcadditionComponent},
      {path: 'soustraction', composant: calcSubtractionComponent},
    ],
  },
]]

@Ngmodule ({
  importations: [Commonmodule, RouterModule.ForChild (routes)],
})
classe d'exportation calcmodule {}

// Routes Const de la route des parents: routes = [
  {
    Chemin: 'Calc',
    chargeurs de charge: './calc/calc.module#calcmodule',
  },
]]

@Ngmodule ({
  Imports: [Browsermodule, RouterModule.Forroot (routes)],
})
classe d'exportation Appmodule {}

Certains aspects intéressants à comprendre du code ci-dessus sont:

• Nous avons un chemin vide. En effet, nous ne voulons pas que le chemin de la route vers CalcModule doit être importé dans Root /calc/** .

Résumer

Dans ce tutoriel, vous avez appris les bases de la façon de gérer le routage dans Angular. Vous avez appris à définir des itinéraires et à naviguer différemment à travers des applications angulaires. Les concepts discutés dans cet article couvrent les bases. Une fois que vous avez maîtrisé les bases, vous pourrez approfondir les concepts de routage angulaires plus avancés tels que les gardes d'activation, la navigation de routage, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!