Configuration de routes enfants dans Angular 12

Dans mon dernier blog nous avons examiné comment rendre la création de SPA amusante en tirant parti de la puissance du routage dans Angular, et aujourd'hui nous allons voir comment créer des routes enfants pour approfondir notre compréhension de l'imbrication.
Avant de commencer
Voici quelques éléments à avoir:
- Un environnement de développement intégré (IDE) comme VS Code
- Node Package Manager version 6.7 ou supérieure
- La dernière version d'Angular (version 12):
ng version
Confirmez que vous utilisez la version 12, et mettez à jour à 12 si vous ne l'utilisez pas.
D'autres choses qui vous seront utiles sont:
- Connaissance pratique du routeur angulaire à un niveau débutant, ou vous pouvez consulter le dernier article ici
What Are Nesting Routes?
Il est important de comprendre que Angular en tant que framework est basé sur des composants, ce qui signifie que votre application est divisée en composants si la structure est dessiné dans un format arborescent avec des sous-composants issus d'autres composants.
Un bon exemple est de savoir comment les autres composants d'une application Angular se trouvent principalement dans le composant principal de l'application. De la même manière, le routeur angulaire vous permet d'avoir des routes imbriquées dans des routes déjà définies.
Pourquoi l'imbrication de routes peut être utile
Avec les routes enfants, vous pouvez avoir une structure de type composant définie pour les routes de votre app. Il est essentiel car il existe des vues auxquelles l'utilisateur ne devrait pas pouvoir accéder à moins qu'il ne se trouve dans une vue particulière. De cette façon, la structure devient arborescente, tout comme la structure des composants. Dans cet article, nous allons parcourir le processus de création de routes enfants et d'afficher les composants que nous leur relions.
Ce que nous allons construire
Nous allons essayer de construire une interface utilisateur ATM simple avec trois composants principaux: retirez, déposez et équilibrez, et l'expérience ressemblera à ceci:
Configuration
Pour commencer, ouvrez un emplacement de fichier de votre choix sur votre PC , et à l'intérieur, exécutez VS Code. Ouvrez un nouveau terminal dans l'onglet Terminal et exécutez cette commande pour créer une nouvelle application Angular provisionnée avec un routage prêt à l'emploi:
ng new childapp --routing
Après avoir choisi CSS, accédez au nouveau fichier créé et exécutez-le dans le serveur de développement comme ceci:
cd childapp
ng servir
Votre application doit ressembler à ceci:
Définition des itinéraires parents
La première chose à faire est de définir les itinéraires parents pour l'application à l'intérieur de laquelle nous aurons les itinéraires enfants. Ce guichet automatique dispose de trois boutons représentant trois composants. Commençons par générer ces composants.
ng générer le composant retirer -it -is
ng générer un dépôt de composant -it -is
ng générer le solde des composants -it -is
Ces trois composants que nous venons de créer ont des options de modèle et de style en ligne, de sorte que des fichiers de modèle et de feuille de style supplémentaires ne seront pas créés. La structure du fichier est comme Vue.js. Si vous ouvrez le fichier, vous y verrez un simple paragraphe "retirer des travaux". Nous changerons le contenu plus tard.
Maintenant, dans le module de routage d'application, définissons les routes parentes comme ceci:
import { NgModule } from '@ angular / core' ;
import { Routes RouterModule } from '@ angular / router' ;
import { BalanceComponent } from './ balance / balance.component' ;
import { DepositComponent } de './ deposit / deposit.component' ;
import { WithdrawComponent } from './ retirer /withdraw.component'[19659036Often;[19659037Often routes : Routes = [
{
chemin : 'balance' component : BalanceComponent
} {
chemin : 'deposit' component : DepositComponent
} {
chemin : 'retirer' composant : WithdrawComponent
}
] ;
@ NgModule ( {
importations : [ RouterModule . forRoot ( routes ) ]
exportations : [ RouterModule ]
} )
export class AppRoutingModule { }
export [19659034] const ArrayOfComponents = [ BalanceComponent DepositComponent WithdrawComponent ]
Ici, nous avons défini les composants parents de notre application ATM. Nous les avons également liés à un tableau pour ne pas avoir à importer les trois composants partout où nous en avons besoin, mais simplement importer le tableau à la place.
Les enregistrer
Pour enregistrer ce nouveau développement, ouvrez votre module d'application fichier et copiez-le dans le bloc de code ci-dessous:
import { BrowserModule } from '@ angular / platform-browser' ;
import ] { NgModule } from '@ angular / core' ;
import { AppRoutingModule ArrayOfComponents } de './ app-routing.module' ;
import { AppComponent } from './ app.component «;
@ NgModule ( {
déclarations : [
AppComponent
ArrayOfComponents
]
importations : [
BrowserModule
AppRoutingModule
]
fournisseurs : []
bootstrap : [ AppComponent ]
} )
export class AppModule { }
Template Setup
Prenons maintenant soin du modèle. Remplacez le code dans le fichier HTML du composant de votre application par le bloc de code ci-dessous:
< div class = " car " >
< div style = " text-align : center ; " > [19659144] < h1 >
Bonjour Lotanna, bienvenue à Diamond Bank ATM
</ h1 >
< h3 > Que souhaitez-vous faire? </ h3 > [19659137] </ div >
< nav style = " text-align : center ; [19659036] " >
< bouton routerLink = ' / balance ' > Check votre solde </ bouton >
< bouton routerLink = ' / deposit ' > Déposer de l'argent </ bouton >
< bouton routerLink = ' / retirer ' > Retirer de l'argent </ bouton >
</ nav >
< router-outlet [19659036]> </ router-outlet >
</ div >
Le tester
Avant de le tester et de voir nos progrès jusqu'à présent, ajoutons un peu de style à l'application. Dans le fichier app component.css, ajoutez ces deux règles:
.car {
top : 50% ;
text-align ]: center ;
border-radius : 25 px ;
border : 2 px solid # 73AD21 ;
padding : 20 px ;
width : 600 px ; [19659199] hauteur : 350 px ;
marge gauche : 25% ;
margin-bottom : 15 px ;
}
bouton {
top : 50% ;
text-align : center ;
border-radius : 15 px ;
border : 2 px solid # 73AD21 ;
largeur : fi t-content ;
margin : 20 px ;
padding : 20 px ;
}
Maintenant, enregistrez tous les fichiers et exécutez l'application sur le serveur de développement en exécutant cette commande:
ng serve
Pour rendre cela plus amusant, travaillons sur l'ajout de routes imbriquées dans nos composants.
Generate Child Composants
Dans cet article, nous aurons deux composants enfants: DepositA pour les pièces et DepositB pour les billets. Générons-les avec ces commandes:
ng generate component deposita -it -is
ng générer un dépôt de composantb -it -is
Ajout de routes enfants
Dans Angular, le routeur vous permet d'ajouter des routes enfants en utilisant la propriété children dans le module de routage.
import { NgModule } from ] '@ angular / core' ;
import { Routes RouterModule } from '@ angular / router' [19659036];
import { BalanceComponent } from './ balance / balance.component' ;
import { DepositComponent } de './ deposit / deposit.component' ;
import { DepositaComponent } from './ deposita / deposita.component ';
import { DepositbComponent } from ' ./ depositb / depositb.component ';
import { WithdrawComponent } de [19659035] «./ retirer / retirer.component» ;
const routes : Routes = [
{
chemin : 'balance' component : BalanceComponent
} {
chemin : 'dépôt'
composant : DepositComponent
enfants : [
{
chemin : 'pièces' composant : DepositaComponent
}
{
chemin : 'notes' composant : DepositbComponent
}
]
} {
chemin : 'retirer' composant : WithdrawComponent
}
] ;
@ NgModule ( {
importations : [ RouterModule . forRoot ( routes ) ]
exportations : [ RouterModule ]
} )
export class AppRoutingModule { }
export [19659034] const ArrayOfComponents = [ BalanceComponent
DepositComponent WithdrawComponent
DepositaComponent DepositbComponent ]
Ici, vous pouvez voir que le module de routage a été mis à jour avec la route enfant et ajouté au tableau des composants afin que nous n'ayons pas besoin de tous les importer partout où nous allons.
Ajout du code de présentation
Le Le composant parent est l'endroit où toute la magie se produit pour le composant enfant. Dans la démo, vous pouvez voir que nous avons lié la fonctionnalité à des boutons. Remplacez le contenu de votre composant de dépôt par le bloc de code ci-dessous:
import { Component OnInit } from '@ angular / core' ;
import { ActivatedRoute Router } from '@ angular / router'
@ Composant ( {
sélecteur : 'app-deposit'
modèle : `
«
styles : [ 'button {top: 50%; text-align: center; border-radius: 15px; bordure: solide 2px # 73AD21; largeur: ajustement-contenu; marge: 20px; padding: 20px;} ']
} )
export class DepositComponent implements OnInit {
constructor ( route privée : ActivatedRoute routeur privé : Routeur ) { } [19659378] ngOnInit () : void {
}
coins () {
this . routeur . naviguer ( [ 'coins' ] { relativeTo : this . route } ) ;
}
notes () {
this . router . naviguer ( [ 'notes' ] { relativeTo : this [19659036].[1 9459003] route } ) ;
}
}
Ici, nous avons introduit la route activée et le routeur de la bibliothèque. Ils permettent de lier des itinéraires à des éléments du modèle. Nous avons utilisé une simple fonction OnClick pour demander au routeur de changer l'URL en «/ deposit / notes» lorsque nous cliquons sur des notes et le comportement similaire lorsque nous cliquons sur des pièces.
Lorsque vous enregistrez tous les fichiers du projet, vous peut à nouveau exécuter l'application sur le serveur de développement. Il devrait ressembler exactement au premier gif que nous avons vu.
Le code complet de ce tutoriel peut être trouvé ici sur GitHub .
Conclusion
Nous venons d'examiner l'imbrication dans Angular Router , pourquoi c'est important et comment commencer. Nous sommes passés par un processus de création d'itinéraires enfants et de la manière dont ils sont ajoutés à vos modèles dans Angular avec notre application ATM. J'espère que vous pouvez voir combien de cas d'utilisation vous pouvez avoir lorsque vous envisagez d'imbriquer des itinéraires dans votre application. Bon piratage!
Source link