Guide pratique sur les composants angulaires et les modules ng

Dans cet article, je vais couvrir les composants et modules angulaires, puis vous expliquer comment ajouter des composants à l'application de suivi des dépenses que nous allons construire ensemble.

Angular est un cadre permettant de créer des applications côté client à l'aide de HTML, CSS. et JavaScript. C'est l'un des meilleurs frameworks JavaScript pour la création d'applications Web dynamiques. Dans un précédent article j'avais évoqué quelques notions de base de la CLI angulaire, mis en place un projet angulaire et examiné certaines configurations d'un projet angulaire.

Dans cet article, je vais couvrir les composants angulaires. et modules, puis vous expliquer comment ajouter des composants pour l’application de suivi des dépenses que nous allons construire ensemble. Si vous avez ignoré l'article précédent, vous pouvez télécharger le code source sur GitHub et copier les fichiers de src-part-1 dans le dossier src dans l'ordre

Qu'est-ce qu'un composant?

Les applications angulaires reposent sur une architecture à base de composants. Cela signifie que l'application est divisée en composants indépendants, chaque composant rendant un ensemble spécifique d'éléments sur la page et pouvant être combinés pour afficher une interface utilisateur fonctionnelle et interactive pour les utilisateurs.

Un composant angulaire détermine ce qui est affiché à l'écran. Ils doivent être conçus de manière à ce que la page soit segmentée, chaque section ayant un composant de support. Cela signifie qu'une page / vue peut avoir des composants organisés dans une hiérarchie, ce qui vous permet d'afficher et de masquer des sections entières de l'interface utilisateur en fonction de la logique de l'application. En d'autres termes, vous pouvez imbriquer des composants dans un autre composant, en ayant une sorte de relation parent-enfant.

Un composant angulaire est composé de:

1. Modèle: un modèle est un ensemble d'éléments HTML indiquant à Angular comment affiche le composant sur la page.
2. Style: liste de définitions de style CSS s'appliquant aux éléments HTML du modèle.
3. Classe: Classe contenant une logique permettant de contrôler certaines des rendus du modèle via une API.

Le composant racine angulaire

Une application angulaire doit avoir au moins un composant, qui est le composant racine et sous lequel les autres composants sont imbriqués. L'application générée a déjà un composant racine amorcé pour vous. C’est pourquoi, si vous exécutez ng serve pour exécuter l’application, vous verrez les éléments affichés à l’écran. Vous trouverez le composant dans le dossier src / app / .

Vous devriez remarquer les trois électeurs d'une composante dont nous avons parlé. Le fichier app.component.css contient le style, app.component.html contient le modèle et app.component.ts est la classe du composant. Ayant .component. dans le nom de fichier ne le rend pas un composant. Il s’agit d’une convention de nommage adoptée par la communauté angulaire, qui permet d’identifier facilement le type de fichier.

Ouvrez app.component.html pour afficher le contenu de ce fichier. Vous devriez voir les éléments HTML que vous devriez connaître. Mais vous devriez aussi remarquer {{title}} à la ligne 4, comment lier les données de la classe du composant, ainsi que à la ligne 21, qui est une directive utilisée lorsque vous ' travaillez de nouveau avec le module de routeur angulaire. Nous en parlerons dans un prochain article.

Ouvrez le fichier app.component.ts . Il devrait contenir le code ci-dessous:

 import   { Composant }   de   "@ angular / core" ; 

@  Composant  ( {
  sélecteur :   "et-root" 
  templateUrl :   "./ app.component.html" 
  styleUrls :   [ "./ app.component.css" ] 
] ) 
 classe d'exportation     AppComponent  
  title  =   "cost-tracker-angular" ; 
} 

Ce fichier TypeScript définit et exporte une classe. La classe se pare de décorateur @Component . Vous connaissez peut-être les décorateurs en JavaScript (qui sont encore au stade de la proposition). C’est le même concept dans TypeScript. Ils fournissent un moyen d'ajouter des annotations aux déclarations de classe et aux membres. Le décorateur de classe est appliqué au constructeur de la classe et peut être utilisé pour observer, modifier ou remplacer une définition de classe. C’est ce décorateur qui fait de la classe un cours de composant.

Le décorateur reçoit des métadonnées, qui indiquent à Angular où trouver les autres éléments nécessaires pour construire le composant et afficher sa vue. C'est ainsi que le modèle et le style sont associés à la classe. L'option templateUrl spécifie où trouver le modèle pour ce composant. L'option styleUrls spécifie également l'emplacement du fichier pour les styles. L’option selector indique l’identification du composant dans le code HTML du modèle. Par exemple, si Angular trouve en HTML dans l’application, il insérera une instance de ce composant entre ces balises. Vous remarquerez l'étiquette dans src / index.html .

La classe associée a un bien titre avec la valeur cost-tracker-angular . Les propriétés de la classe contiennent des données pouvant être référencées dans le modèle. Vous vous souvenez de l'extrait de {{title}} dans le modèle? Angular remplacera cela par les données de cette propriété.

NgModules et le module de racine angulaire

Les applications angulaires sont conçues pour être modulaires, grâce à un système de modularité appelé NgModules . NgModules (ou modules angulaires) est une technique utilisée pour construire un système à couplage lâche mais très cohérent en Angular. Un module est un ensemble de composants, services, directives et tuyaux (je parlerai plus en détail des tuyaux et des directives). Nous l'utilisons pour regrouper un ensemble de fonctionnalités dans l'application et pouvons exporter ou importer d'autres modules en fonction des besoins.

Le module Angular est l'un des blocs de construction fondamentaux de Angular. Ainsi, chaque application angulaire doit avoir au moins un module – le module racine. Ce NgModule racine est ce qui est utilisé pour amorcer l’application Angular. C'est également dans ce module racine que nous amorçons également le composant de niveau racine. Ce composant de niveau racine est la vue principale de l'application, qui héberge d'autres composants pour l'application.

Vous trouverez la racine NgModule pour l'application de suivi des dépenses que vous construisez dans src / app / app.module.ts. . Le contenu du fichier se présente comme suit:

 import   { BrowserModule }   de   "@ angular / platform-browser" ; 
 import [19659018] { NgModule }   à partir de   "@ angular / core" ; 

 import   { AppRoutingModule }   à partir de   ] "./ app-routing.module" ; 
 import   { AppComponent }   de   "./ app.component" ;  ]

@  NgModule  ( {
  déclarations :   [ composant d'application ] 
  importations :   [ NavigateurModule  AppRoutingModule ] 
  fournisseurs :   [] 
  bootstrap :   [ AppComponent ] 
  
 classe d'export   classe   AppModule   {] [] 

Un nGModule est une classe ornée du décorateur @NgModule . Le @NgModule utilise un objet de métadonnées qui décrit comment compiler le module. Les propriétés que vous voyez sont décrites ci-dessous:

1.     

   declarations : Déclare quels composants, directives et tuyaux appartiennent au module. Pour le moment, rien que la racine AppComponent .

       

2.     

   importations : Importe d'autres modules avec leurs composants, directives et tuyaux, dont les composants du module actuel ont besoin. Vous devriez remarquer que le BrowserModule est importé. Ce module exporte les modules CommonModule et ApplicationModule – NgModules nécessaires aux applications Web angulaires. Ils incluent des éléments tels que la directive NgIf que vous utiliserez dans le prochain article, ainsi que les dépendances essentielles nécessaires au démarrage des composants.

       

3.     

   bootstrap : spécifie le composant racine principal de l'application, qui héberge tous les autres vues / composants de l'application, et qui est nécessaire pour initialiser le module. Ce composant racine est inséré dans src / index.html . Seul le root NgModule doit définir la propriété bootstrap dans votre application Angular.

Le processus d'amorçage crée les composants répertoriés dans le tableau d'amorçage et les insère dans le DOM du navigateur. Chaque composant amorcé est la base de sa propre arborescence / hiérarchie de composants. L'insertion d'un composant amorcé déclenche généralement une cascade de créations de composants qui complètent cette arborescence de composants. De nombreuses applications ont une seule arborescence et amorcent un seul composant racine.

Le module racine est démarré en appelant platformBrowserDynamic (). BootstrapModule (AppModule) dans src / main.ts

Ajout de Bootstrap

Maintenant que nous avons couvert les bases du module Angular et des composants, et que nous avons vu comment ils sont construits en examinant le composant racine et le module racine, nous allons ajouter bootstrap et modifier la présentation actuelle de l'application. Pour installer bootstrap, exécutez:

 npm install bootstrap

Ceci ajoute le bootstrap en tant que dépendance du projet. Ensuite, importez le style dans le fichier de style global. Ouvrez src / styles.css et collez-y le code ci-dessous.

 @import   "~ bootstrap / dist / css / bootstrap.min.css" ;  ; 19659040] Cela ajoute un élément bootstrap aux styles globaux de l'application. 

 Création de composants 
 Nous allons ajouter un composant qui contiendra un résumé des dépenses totales actuelles et des mois précédents. Nous allons utiliser la CLI angulaire pour générer le composant. Ouvrez la ligne de commande et exécutez la commande  ng, générer des dépenses de composant / cartes de présentation . Cela génère les fichiers nécessaires au composant  des cartes de synthèse  et ajoute ce composant à la déclaration dans le module racine. Si vous cochez  app.module.ts vous verrez que le composant est importé et ajouté à la déclaration du module. 
 Vous allez mettre à jour le modèle HTML du composant comme indiqué ci-dessous. Ouvrez  src / app / dépenses / cartes-briefing / cartes-briefing.component.html  et mettez-le à jour. 
 < div   class  =  " ] rangée  " > 
   < div   class  = "  col-sm-3  " [1965921] ]> 
     < div   class  =  " carte "  > 
       < div   classe [1965921] 19659105] =  " entête de carte "  > 
         Août
       </  div > 
       < div   class  =  " du type corps de la carte "  [1965921].> 
          < div   style  = " taille de police :   30  ["  > [19659139] 300 $  </  div > 
       </  div > 
     </  div > 
   </  div > 
   < div   class  =  " col-sm-3 "  > 
     < ] div   class  =  " carte "  > 
       < div   class  =  " card-header  " > 
         septembre
       </  div > 
       < div   class  =  " du type corps de la carte "  [1965921].> 
          < div   style  = " taille de police :   30  ["  > [19659139] $ 90  </  div > 
       </  div > 
     </  div > 
   </  div > 
 </  div >  
 Dans ce modèle, nous avons codé en dur les valeurs. Nous allons rendre cette composante dynamique dans le prochain article où je couvrirai la liaison de données. La classe de composants est dans  briefing-cards.component.ts . Il est déjà décoré avec @Component et les fichiers nécessaires référencés. Le sélecteur porte le préfixe de sélecteur configuré pour le projet.
 Nous allons ensuite ajouter un autre composant appelé  cost-list . Ouvrez la ligne de commande et exécutez la commande  ng g c fees / cost-list . Cela crée les fichiers nécessaires pour le composant. Nous avons toujours utilisé la commande  ng generate sauf que cette fois-ci, nous avons utilisé le pseudonyme  g  pour generate et  c  pour l'argument composant. Vous pouvez en savoir plus sur cette commande dans la documentation  .
 Ouvrez le tableau  cost-list.component.html  et collez le balisage ci-dessous.
 <   class  =  " tableau "  > 
   < légende > 
     < bouton   type  =  " button "    class  =  " btn btn-dark "  [1965921].  Ajouter les frais  </  bouton > 
   </  Légende > 
   < thead   classe  = . " thead-dark "  > 
     < tr > 
       <   scope  =  "  col  " >  Description  </  e > 
       < e   portée  de  =  ] " col  " >  Date  </  e > 
       < e   scope  = "  col  " >  Montant  </  e > 
     </  tr > 
   </  thead > 
   < tbody > 
     < tr > 
       < td >  de la lessive  </  td > 
       < td >  12-08-2019  </  td > 
       < td   19659021]>  $ 2  </  td > 
     </  tr > 
     < tr > 
       <19659114].  td >  Dîner avec Shazam  </  td > 
       < td >  21-08-2019 > /  td > 
       < td >  $ 2500  </  td > 
     </  tr [19659021]> 
   </  tbody > 
 </  table >  
 Le modèle est déjà câblé avec la classe de composant et le composant ajouté à la déclaration dans le module racine depuis que nous avons utilisé la génération .  commande. C’est là que la CLI angulaire contribue à la productivité. La CLI utilise des styles de codage qui adhèrent à une conception faiblement couplée et cohérente, et les modifications de fichier nécessaires sont apportées pour vous.
 Composants imbriqués
 Les composants sont conçus pour avoir une responsabilité unique - un élément de la page qu'ils doivent contrôler. Pour combiner cela, vous utilisez un composant dans un autre composant, ce qui crée une hiérarchie de composants / vue qui s'ajoute pour afficher la mise en page nécessaire à l'écran.
 Pour l'application de suivi des dépenses, nous souhaitons avoir la page d'accueil affiche un en-tête de navigation, puis les deux vues des deux composants que vous avez créés en dessous.
 Exécutez la commande ci-dessous pour générer un nouveau composant.
 ng gc home
 Accédez au fichier de modèle HTML du composant et ajoutez ce qui suit:
 < et-briefing-cards >   </  et-briefing-cards  > 
 < br   /> 
 < et-depense-list >   </  et-depense-list >  
 Cette manière, nous les utilisons composants dans le composant  Home en les référençant à l’aide de l’identificateur de sélecteur spécifié dans le décorateur  @Component  pour ces composants. Lorsque l'application est exécutée, Angular affiche la vue du composant à l'emplacement où elle trouve la directive du composant correspondant dans le modèle.
 Ouvrez le modèle du composant d'application racine (c.-à-d. Src / app / app.component.html) et mettez-le à jour avec le modèle HTML suivant:
 < nav   class  =  " navbar navbar-expand-lg navbar-dark bg-dark "  [

 > 
   < a   class  =  " navbar-brand "    href  =  " #  " >  Suivi des dépenses  </  a > 
   < bouton 
     class  = " [19459004)] navbar-toggler  "
     type  =  "bouton  " 
     data-toggle  =  " effondrement " 
     data-target  =  " #navbarNavAltMarkup " 
     aria-controls  =  " navbarNavAltMarkup " 
     aria-expand  =  " false " 
     aria-label  =  " La navigation à bascule " 
  > 
     < span   class  =  " navbar-toggler-icon "  >   /  span > 
   </  button > 
   < div   class  =  " replapse navbar-collapse  "   id  = "  navbarNavAltMarkup  " > 
     < div   de  . 19659021] " navbar-nav "  > 
       < a   class  =  " nav-item navigation-link active  "
         >  Page d'accueil  < span   class  = "  sr-only  "   ]>  (actuel)  </  span >   </  a 
      > 
       < a   classe [1965912] 19659105] =  " lien de navigation élément nav "  >  Histoire  </  a > 
     </  div > 
   </  div > [19659139]
 </  nav > 

 < div   class  =  " conteneur "  > 
   < br   /> 
   ] < et-home >   </  et-home > 
 </  div >  
 Le nouveau balisage de la vue du composant racine contient du code permettant d'afficher un en-tête de navigation, puis le composant  Home . Vous pouvez tester l'application pour voir comment les nouveaux éléments ajoutés sont rendus dans le navigateur. Ouvrez votre application de ligne de commande et exécutez  ng serve -o . Cela démarre le serveur de développement et ouvre l'application dans votre navigateur par défaut.
 
 Résumé
 Dans cet article, vous avez découvert les composants et modules angulaires. Les composants permettent de définir les différentes vues d'une application. Avec cela, vous pouvez segmenter la page en différentes partitions et avoir des composants individuels traiter une zone de la page. Vous avez découvert les composants d’un composant Angular, ce que fait le décorateur  @Component  et comment inclure un composant dans un module afin qu’il soit accessible à tous les composants qui en ont besoin. Vous avez également découvert les modules angulaires, qui permettent d’organiser une application et de l’étendre avec des fonctionnalités de bibliothèques externes. Les modules angulaires fournissent un contexte de compilation pour leurs composants. Le NgModule racine a toujours un composant racine créé lors du démarrage.
 Nous avons examiné le module racine par défaut et le composant généré par la CLI, et je vous ai montré comment créer des composants pour définir la vue de votre application. Nous avons utilisé du texte statique, mais dans le prochain article, je parlerai de la liaison de données, et nous pourrons ainsi commencer à rendre l’application dynamique, ce qui est le but principal de l’utilisation d’Annular. ?
 Vous pouvez obtenir le code source sur  GitHub  dans le dossier  src-part-2 .
 Surveillez la suite de ce didacticiel.