mai 27, 2021

Pourquoi vous devriez utiliser les services en angulaire

Les meilleures pratiques nous enseignent le principe DRY: ne vous répétez pas. Voyons comment nous avons construit des composants et des classes avant les services.

Dans cet article, nous verrons comment nous avons construit des composants et des classes avant que les services n'existent et plaiderons en faveur des services. en angulaire. Il s'agit d'un article en deux parties sur l'injection de dépendances.

Prérequis

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

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

Confirmez que vous utilisez la version 12, et mettez à jour la version 12 si vous ne l'utilisez pas.
Parmi les autres avantages, citons:
- Connaissance pratique du framework Angular à un niveau débutant
Before Services Were Né
Comment gérions-nous auparavant le partage de données entre les classes dans Angular? Au départ, nous devions faire des choses difficiles à mettre à l'échelle ou à maintenir, y compris la répétition de blocs de code. Commençons par créer deux classes et parcourir le processus pour étayer cette illustration.
Mise en route
Ouvrez un emplacement de fichier que vous souhaitez utiliser pour ce projet dans votre éditeur de code. J'utilise VS Code. Avec VS Code, vous obtenez un terminal dans l'application que vous pouvez utiliser pour exécuter la commande scaffold:
```
 ng new serviceapp
```
Après avoir choisi la feuille de style avec laquelle vous êtes le plus à l'aise (choisissez CSS si vous ne pouvez pas décider), vous voyez qu'une nouvelle application Angular a été conçue pour vous avec facilité. Testez pour voir que tout fonctionne en exécutant les commandes ci-dessous dans le même terminal:
```
 application de service cd
ng servir
```
Après la compilation, ouvrez votre navigateur sur localhost: 4200 et vous devriez le voir comme ceci:

Tout d'abord, nous changeons le contenu de l'espace réservé dans le fichier app.component.html en le bloc de code ci-dessous:
```
 < div > 
   < h2 > 
     Bonjour, voici le {{title}}
   </  h2 >  
 </  div >  
 < app-Artists >    </  app-Artists >  
```
Si vous commentez les artistes de l'application après la division de clôture, vous pouvez voir dans votre navigateur que l'application ressemble à ceci:

Générons maintenant notre composant de classe, un composant qui affiche une liste de noms d'artistes.
```
 ng generate component Artists
```
Cela génère un nouveau composant Artistes dans lequel nous codons en dur les données que nous utilisons pour cette illustration. Remplacez le contenu de votre fichier Artists.component.html par ce bloc de code ci-dessous:
```
 < h2 > 
     Voici la liste des meilleurs artistes de musique africains
 </  h2 >  
 < ul   * ngFor  =  " let artist of Artists "  > 
      < li > 
     {{artist.name}} qui est actuellement le numéro {{artist.grade}}
     </  li >  
 </  ul >  
```
Vous pouvez voir que nous avons utilisé la directive ngFor pour parcourir le tableau. Maintenant, collez le bloc de code ci-dessous dans le fichier Artists.component.ts:
```
 import   { Component  OnInit }   from   '@ angular / core »; 
@  Composant  ( {
  sélecteur :   'app-Artists' 
  templateUrl :   './ Artists.component.html' 
  styleUrls :   [ './ Artists.component.css' ] 
} ) 
 export   class   ArtistsComponent   implements [19659078] OnInit   {
 public  artistes  =   [
     { 'grade' :  1   'name «:  'Davido'   'country' :  'Nigeria' } 
     { 'grade' [19659025]:  2   'name' :  'Burna Boy'   'country' :  'Nigeria' [19659025]} 
     { 'grade' :  3   'name' :  'Diamondz Platinum' [19659063] 'pays' :  'Tanzanie' } 
     { 'grade' :  4   'nom ": " Sarkodie " " pays ": " G hana '} 
     {' grade ':  5  ' name ': ' Mr. Eazi ' ' country ': ' Nigeria '} 
  ] 
 constructor  ()   { } 
 ngOnInit  () :   void   {
  } 
} 
```
Avec tout cela configuré, si vous exécutez l'application dans le serveur de développement avec la commande:
```
 ng serve
```
Vous verrez que le navigateur renvoie ceci:

Ce que nous construisons
Si on vous demandait de créer un autre composant de classe pour afficher les artistes dans un format différent de ce que nous avons ci-dessus, comment iriez-vous? à propos de ça? Commençons par générer un nouveau composant.
```
 ng generate component Artistnames
```
Ouvrez le fichier HTML du composant Artistsname et remplacez le contenu par le bloc de code ci-dessous:
```
 < h2 > 
     Voici la liste des emplacements des meilleurs artistes de musique africains
 </  h2 >  
 < ul   * ngFor  =  " let artist of Artists "  > 
      < li > 
     Notre artiste numéro {{artist.grade}} en Afrique vient de {{artist.country}}
     </  li >  
 </  ul >  
```
Si vous enregistrez le fichier, vous verrez une ligne rouge grinçante sous les artistes, et lorsque vous passez la souris dessus, vous devriez voir un message d'erreur comme celui-ci:

C'est simplement parce que les données publiques codées en dur que nous avons utilisées dans cette illustration n'existent pas dans le nouveau composant de classe que nous avons créé. Pour résoudre ce problème, nous devons copier le tableau et le coller dans ce nouveau composant. Dans le fichier artistname component.ts, collez le bloc de code ci-dessous:
```
 import   { Component  OnInit }   from   '@ angular / noyau »; 
@  Composant  ( {
  sélecteur :   'app-artistnames' 
  templateUrl :   './ artistnames.component.html' 
  styleUrls :   [ './ artistnames.component.css' ] 
} ) 
 export   class   ArtistnamesComponent   implements [19659078] OnInit   {
   public  artistes  =   [
     { 'grade' :  1   'name ': ' Davido ' ' country ': ' Nigeria '} 
     {' grade '[19659025]:  2   'name' :  'Burna Boy'   'country' :  'Nigeria' [19659025]} 
     { 'grade' :  3   'name' :  'Diamondz Platinum' [19659063] 'pays' :  'Tanzanie' } 
     { 'grade' :  4   'nom »: « Sarkodie » « pays »: [19659072] 'Ghana' } 
     { 'grade' :  5   'name' :  'Mr . Eazi ' ' country ': ' Nigeria '} 
  ] 
 constructor  ()   { } 
 ngOnInit  () :   void   {
  } 
} 
```
Vous devez maintenant indiquer au composant principal de l'application que ce nouveau composant sera affiché en l'ajoutant au modèle. Copiez ce bloc de code dans le fichier HTML du composant de votre application:
```
 < div > 
   < h2 > 
     Bonjour, voici le {{title}}
   </  h2 >  
 </  div >  
 < app-Artists >    </  app-Artists >  
 < app-artistnames >    </  app-artistnames >  
```
Maintenant, si vous enregistrez tous les fichiers et exécutez l'application sur votre serveur de développement, voici ce que vous obtiendrez:

Si vous avez suivi ce message depuis le début, vous verrez que nous avons réalisé ce que nous avons prévu de faire, qui consiste à utiliser les mêmes données dans deux classes distinctes. L'idée est de montrer comment cela a été réalisé dans le passé avant l'introduction des services.
Le principe DRY et les domaines d'intervention
Vous pourriez vous demander, qu'est-ce qui ne va pas avec cette approche que nous avons adoptée? Le La première façon d'examiner les approches de résolution de problèmes est l'échelle, alors imaginez que nous devions partager ces mêmes données entre 20 classes. Avec notre approche actuelle, cela signifierait vraiment que nous devions répéter le processus de copier-coller 20 fois.
Dans les meilleures pratiques de programmation, il existe un principe appelé DRY: ne vous répétez pas. Cela aide à guider les développeurs dans leur cheminement pour se rappeler de réfléchir à l'optimisation et à la maintenabilité de leur code.
Une autre chose importante que nous pouvons également observer ici est la façon dont le composant de classe dont l'objectif devrait être de gérer la logique fait maintenant également un deuxième travail de stockage de données.
Maintenant que nous avons vu que notre approche n'est pas aussi optimale que nous le souhaitons, y a-t-il un moyen de contourner cela?
Conclusion
Oui, il y en a, et dans l'article suivant dans cette série, nous examinerons les services dans Angular, comment ils fonctionnent et comment ils résolvent ce problème particulier. Nous allons apprendre comment nous pouvons également commencer à les utiliser dans notre flux de travail pour partager des données.