Fermer

mai 3, 2021

Notions de base angulaires: utilisation de tuyaux dans angulaire


Angular propose un ensemble d'options de tuyaux pour transformer la façon dont vos données sont affichées, vous permettant de contrôler à quoi elles ressemblent. Examinons certaines de ces options.

Même si vous ne faites que commencer dans Angular, vous savez déjà que la plupart des choses que nous faisons lors de la création d'applications Web tournent autour des données: obtenir des données, parcourir des données, manipuler des données et enfin présenter Les données. Dans cet article, nous examinerons l'une des façons dont Angular nous a facilité la manipulation et la présentation des données.

Prérequis

Pour pouvoir suivre la démonstration de cet article, vous devriez avoir:

  • Un module intégré environnement de développement (IDE) comme VS Code
  • Node version 11.0 installée sur votre ordinateur
  • Node Package Manager version 6.7 (il est généralement livré avec l'installation Node)
  • Angular CLI version 8.0 ou supérieure [19659006] La dernière version d'Angular (version 12)
 // exécuter la commande dans un terminal
version ng

Confirmez que vous utilisez la version 12, et mettez à jour à 12 si vous ne l'êtes pas.

D'autres choses qui seront utiles sont:

  • Connaissance pratique du framework Angular à un niveau débutant

] Transformer des données en angulaire

Souvent, nous n'avons pas le contrôle des données qui entrent dans nos applications Web. Cependant, Angular garantit que nous avons un contrôle total sur la façon dont les données peuvent être présentées. Angular nous fournit des tuyaux pour que nous puissions transformer les données sous la forme exacte que nous voulons qu'elles soient présentées, comme quelqu'un pourrait avoir 10–01–2021 et vous voulez que ce soit le 10 janvier 2021 — Angular vous permet de le faire avec des tuyaux. ] Ce que nous allons construire

Nous allons construire une application Angular simple pour présenter les principaux types de tuyaux disponibles par défaut dans Angular.

Configuration

Pour commencer, ouvrez VS Code et dans le terminal créez un nouvelle application angulaire avec la commande ci-dessous:

 ng new newapp 

Cela crée un nouveau projet angulaire dans le répertoire où vous avez exécuté la commande. Maintenant, changez le répertoire pour naviguer dans le dossier racine de l'application avec cette commande:

 cd newapp 

Vous pouvez tester pour voir que tout fonctionne bien en exécutant cette nouvelle application dans le serveur de développement avec la commande:

 ng serve 

Vous verrez que dans votre emplacement localhost: 4200 dans votre navigateur, la page par défaut de l'échafaudage angulaire s'affiche. Maintenant, ouvrez votre fichier app.component.html et remplacez le contenu par ce bloc de code ci-dessous:

 < div > 
   < h1 > 
     Bonjour, ceci est notre terrain d'essai
   </  h1 > 
   {{title}}
 </  div >  

Votre fichier app.component.ts doit ressembler exactement à ceci:

 import   { Component }   from   '@ angular / core' ; 
@  Composant  ( {
  sélecteur :   'app-root' 
  templateUrl :   './ app.component.html' 
  styleUrls :   [ './ app.component.css' ] 
} ) 
 export   class   AppComponent   {
  title  =   'newapp' ; 
} 

Ce projet ne se concentrera pas sur le style, donc dans le fichier CSS du composant de l'application, ajoutez cette règle de style unique:

 div  {
     font-size :   20  px ; 
} 

Avec cela, nous sommes prêts à jeter un œil à tous les tuyaux intégrés dans Angular.

Pipes majuscules et minuscules

Ces tuyaux intégrés dans Angular transforment toutes les données de chaîne sur lesquelles vous les appliquez en majuscules ou en minuscules, quel que soit l'état actuel de la chaîne. C'est un bon moyen de formater les données en synchronisation avec votre interface utilisateur. Copiez le bloc de code ci-dessous dans le fichier HTML du composant de votre application:

 < div > 
   < h1 > 
     Bonjour, voici notre terrain d'essai
   </  h1 >  
  < h2 >   {{titre | minuscules}}  </  h2 >  
 < h2 >   {{titre | majuscules}}  </  h2 >  
 </  div >  

Lorsque vous exécutez ceci sur votre serveur de développement, l'affichage de votre navigateur devrait ressembler à ceci:

 «Salut, c'est notre terrain de test» a un H majuscule dans «salut» et le reste est en minuscules. 'newapp' tout en minuscules. 'NEWAPP' tout en majuscules.

Tuyaux de casse de titre

Cela transforme toute chaîne en casse de titre, ce qui signifie qu'après la transformation, les premières lettres de chaque mot sont en majuscules. Il reconnaît les mots avec des délimiteurs tels que des espaces, des tabulations ou tout autre caractère de saut de ligne. Copiez le bloc de code ci-dessous dans le fichier HTML du composant de votre application:

 < div > 
   < h1 > 
     Bonjour, voici notre terrain d'essai
   </  h1 >  
  < h2 >   {{titre | minuscules}}  </  h2 >  
 < h2 >   {{titre | majuscules}}  </  h2 >  
 < h2 >   {{texte | titlecase}}  </  h2 >  
 </  div >  

Dans votre fichier app component.ts, mettez à jour les variables avec du texte comme ceci:

 import   { Component }   from   '@ angular / core' [19659027]; 
@  Composant  ( {
  sélecteur :   'app-root' 
  templateUrl :   './ app.component.html' 
  styleUrls :   [ './ app.component.css' ] 
} ) 
 export   class   AppComponent   {
  title  =   'Newapp' ; 
  nom  =   'Lotanna' ; 
  text  =   "salut, bienvenue au Ghana" 
} 

L'application ressemblera maintenant à ceci lorsque vous l'exécuterez sur votre serveur de développement:

 'newapp' tout en minuscules. «NEWAPP» tout en majuscules. «Salut, Bienvenue au Ghana» a la lettre initiale de chaque mot en majuscule.

The Slice Pipe

Ce tuyau transforme une corde en une version tranchée de ladite corde, donc si vous vouliez couper une corde de la quatrième caractère au 12ème caractère, c'est le tuyau à utiliser pour atteindre exactement cela. Il crée un nouveau tableau ou une nouvelle chaîne contenant un sous-ensemble défini d'une chaîne donnée. La syntaxe ressemble à ceci:

{{value_expression | slice: start [ : end ]}}

Nous voyons qu'il est livré avec une sorte d'arguments, les arguments de début et de fin, qui sont facultatifs. En ajoutant un tube de coupe à notre exemple de travail, nous avons quelque chose comme ceci:

 < div > 
   < h1 > 
     Bonjour, c'est notre terrain d'essai
   </  h1 >  
  < h2 >   {{titre | minuscules}}  </  h2 >  
 < h2 >   {{titre | majuscules}}  </  h2 >  
 < h2 >   {{texte | titlecase}}  </  h2 >  
 < h2 >   {{texte | tranche: 3}}  </  h2 >  
 < h2 >   {{texte | tranche: 3: 6}}  </  h2 >  
 </  div >  

Le premier slice pipe n'a pas de second argument – rappelez-vous que le second argument est optionnel. Le premier dit tranche du troisième élément et la deuxième tranche dit commencer à partir du troisième élément mais se terminer au sixième sans inclure le sixième élément. Vous avez donc quelque chose comme ceci:

 «Salut, bienvenue au Ghana». «Bienvenue au Ghana». "wel".

Le tuyau JSON

Ce tuyau affiche essentiellement un nœud enfant objet sous forme de représentation JSON. La syntaxe ressemble à ceci:

{{value_expression | json}}

Pour travailler avec cela, ajoutons d'abord un objet au modèle. Ouvrez votre fichier app.component.ts et remplacez le contenu par le bloc de code ci-dessous:

 import   { Component }   from   '@ angular / core'  ; 
@  Composant  ( {
  sélecteur :   'app-root' 
  templateUrl :   './ app.component.html' 
  styleUrls :   [ './ app.component.css' ] 
} ) 
 export   class   AppComponent   {
  title  =   'Newapp' ; 
  nom  =   'Lotanna' ; 
  text  =   "salut, bienvenue au Ghana" 
  ami  =   {
     'nom' :   'Hafeez Babatunde' 
     'voiture' :   'Tesla Roadstar'  , 
     'âge' :   15 
  } 
} 

Dans votre fichier modèle, ajoutez la nouvelle ligne JSON dans le bloc de code ci-dessous:

 < div > 
   < h1 > 
     Bonjour, c'est notre terrain d'essai
   </  h1 >  
  < h2 >   {{titre | minuscules}}  </  h2 >  
 < h2 >   {{titre | majuscules}}  </  h2 >  
 < h2 >   {{texte | titlecase}}  </  h2 >  
 < h2 >   {{texte | tranche: 3}}  </  h2 >  
 < h2 >   {{texte | tranche: 3: 6}}  </  h2 >  
 < h2 >   {{ami | json}}  </  h2 >  
 </  div >  

Ceci apparaîtra comme ceci dans votre navigateur:

 «Salut, bienvenue au Ghana». «Bienvenue au Ghana». «wel». '{

Sans le tube JSON, il n'y a aucun moyen que vous puissiez afficher le contenu de cet objet avec cette configuration de liaison de données, mais les tubes le rendent également très possible et simple.

Conclusion [19659004] Dans cet article, vous avez appris à transformer des données en Angular à l'aide de tuyaux. Vous avez vu pourquoi les tuyaux sont utiles et comment ils peuvent être utilisés dans votre flux de travail. Nous nous sommes concentrés sur les tuyaux intégrés dans Angular en référence aux chaînes. Vous pouvez voir la documentation complète des tuyaux dans la Angular Docs . Bon piratage!




Source link