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 :   `
    

       Pièces de dépôt 
       Bons de dépôt 
      

      
      
    
   « 
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!