Fermer

juin 4, 2021

Comment utiliser les services dans Angular


Maintenant que nous avons appris comment les données étaient partagées entre les classes avant les services et que ce n'était pas très SEC ou évolutif, apprenons à utiliser les services pour l'injection de dépendances.

Ceci est la deuxième partie d'un article en deux parties. sur l'injection de dépendance. Dans le premiernous avons appris pourquoi nous voudrions utiliser des services dans Angular. Dans cet article, nous verrons comment les utiliser.

Prérequis

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

  • Un environnement de développement intégré comme VS Code
  • Node version 11.0 installé sur votre machine
  • 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)
// exécuter la commande dans un terminal
ng version

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

  • Créez une nouvelle application Angular avec la commande ci-dessous :
 ng new serviceapp
application de service cd

Autres choses à avoir :

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

Before Services Were Born

Dans la première partie de cette série d'injections de dépendances, nous avons plaidé en faveur de l'utilisation de services dans nos applications angulaires. Des avantages tels que l'écriture de code modulaire, l'efficacité et le fait de ne pas avoir à se répéter, entre autres, en font une excellente approche. Assurez-vous de lire la première partie du post ici.

Introduction to Services

En termes simples, les services dans Angular vous permettent de définir du code ou des fonctionnalités qui sont ensuite accessibles et réutilisables dans de nombreux autres composants de votre projet angulaire. Les services vous aident avec l'abstraction de la logique et des données qui sont hébergées indépendamment mais peuvent être partagées entre d'autres composants.

La classe de service a une fonction unique et bien définie, vous aidant à rendre la structure de votre application très modulaire. Elle est différente des autres classes d'Angular en raison du processus d'injection. L'injection de dépendances est le concept qui vous permet de recevoir des dépendances d'une classe à une autre.

Comment nous allons utiliser un service

L'un des plus grands cas d'utilisation des services Angular est la gestion, la manipulation ou même le stockage de données. . Nous verrons comment créer un service, l'enregistrer et partager des données entre deux composants aujourd'hui.

Ce que nous construisons

Nous allons recréer l'application qui affiche les informations sur l'artiste et les lieux comme dans le premier partie de la série d'injection de dépendance, mais cette fois-ci, nous utiliserons un service.

Page "Salut, c'est le serviceapp" avec la liste à puces "Ceci est la liste des meilleurs artistes de musique africaine": Davido who est actuellement numéro 1; Burna Boy qui est actuellement le numéro 2, etc. jusqu'au numéro 5. Une deuxième liste avec l'en-tête « Ceci est la liste des lieux des meilleurs artistes de la musique africaine » comprend une liste à puces : Notre artiste numéro 2 en Afrique est originaire du Nigeria. etc. jusqu'au numéro 5.

Mise en route

Ouvrez votre nouvelle application que vous avez créée au début de cet article, et dans le terminal à l'intérieur de votre code VS (ou tout autre IDE) générez les deux composants :

 ng générer des artistes composant
ng generate composant Noms d'artiste

Accédez au composant artiste et modifiez le contenu en blocs de code ci-dessous :


import { Component, OnInit } from ' @angulaire/noyau';
@Composant({
  sélecteur: 'app-artistes',
  templateUrl: './artists.component.html',
  styleUrls: ['./artists.component.css']
})
export class ArtistsComponent implements[19659048]OnInit {
public artistes = [
    {'grade':1, 'name ':'Davido', 'pays':'Nigeria'},
    {'grade'[19659034]:2, 'nom':'Burna Boy', 'pays':'Nigeria'[19659034]},
    {'grade':3, 'name':'Diamondz Platinum',[19659033]'pays':'Tanzanie'},
    {'grade':4, 'nom ':'Sarkodie', 'pays':'G hana'},
    {'grade':5, 'nom':'M. Eazi', 'country':'Nigeria'}
  ]
constructor() { } 
ngOnInit(): void {
  }
}

<h2>
    C'est le liste des meilleurs artistes de musique africaine
</h2>
<ul *ngFor="let artiste d'artistes">
    <li >
     {{artist.name}} qui est actuellement le numéro {{artist.grade}}
    </li>
</ul>

Maintenant, dans le deuxième composant, remplacez le contenu par les blocs de code ci-dessous :


import { Component, OnInit } from  '@angular/core';
@Composant({
  sélecteur: 'app-artistnames',
  templateUrl: './artistnames.component.html',
  styleUrls: ['./artistnames.component.css']
})
export class ArtistnamesComponent implements[19659048]OnInit {
  public artistes = [
    {'grade':1, 'name ':'Davido', 'pays':'Nigeria'},
    {'grade'[19659034]:2, 'nom':'Burna Boy', 'pays':'Nigeria'[19659034]},
    {'grade':3, 'name':'Diamondz Platinum',[19659033]'pays':'Tanzanie'},
    {'grade':4, 'nom ':'Sarkodie', 'pays':[19659042]'Ghana'},
    {'grade':5, 'nom':'Mr . Eazi', 'country':'Nigeria'}
  ]
constructor() { } 
ngOnInit(): void {
  }
}

<h2>
    C'est le liste des lieux des meilleurs artistes de la musique africaine
</h2>
<ul *ngFor="let artiste d'artistes">
    <li >
     Notre numéro {{artist.grade}} artiste en Afrique vient de {{artist.country}}
    </li>
</ul>

Enfin, dans le fichier HTML du composant d'application, remplacez le contenu par le bloc de code :

<div>
  <h2>
    Bonjour, c'est le {{title}}
  </h2>
</div>
<app-artists></app-artists>
<app-artistnames></app-artistnames>

Si vous enregistrez tous les fichiers et exécutez l'application en développement comme ceci :

 ng serve

Vous verrez que cela ressemble exactement à ce que nous avons dans l'image au début de cette section.

La tâche consiste maintenant à avoir les données que nous avons répétées dans les deux composants à l'intérieur d'un service à partir duquel elles peuvent être référencées à tout moment il est nécessaire.

Création du service

Pour créer un service dans Angular, vous devez exécuter la commande generate service :

ng generate service data

Deux nouveaux fichiers seront créés. Accédez au fichier data service.ts et assurez-vous que le contenu est le même que celui-ci :

import { Injectable } from '@angular/core'[19659034];
@Injectable({
  fourniDans : 'root'
})
export class DataService {
constructeur()  { }
getList(){
    return[
      {'grade':1 , 'nom':'Davido', 'pays':'Nigeria'},
      {[19659042]'grade':2, 'nom':'Burna Boy', 'pays':[19659042]'Nigeria'},
      {'grade':3, 'name':'Diamondz Platinum ', 'pays':'Tanzanie'},
      {'grade':4 , 'nom':'Sarkodie', 'pays':[19659042]'Ghana'},
      {'grade':5, 'nom':'Mr . Eazi', 'pays':'Nigeria'}
    ];
  }
}

Ce service de données a maintenant été créé et les données codées en dur sont stockées dans la fonction getList.

Enregistrement du service Angular

À ce stade, Angular prend ce service comme n'importe quelle autre classe Angular, donc pour s'assurer qu'Angular compte comme un service, nous devons l'enregistrer. Il est également important de noter la manière hiérarchique dont Angular gère des choses comme l'injection de dépendances. Partout où vous enregistrez votre service, les dépendances ne peuvent être injectées que dans ledit composant ou les nœuds enfants. Donc, dans notre cas, nous allons l'enregistrer dans le module racine.

Accédez à votre fichier de module d'application et assurez-vous qu'il ressemble à ceci :

import { BrowserModule }[19659032]de '@angular/platform-browser';
import { NgModule } de '@angular/core' ;
import { AppComponent } from './app.component';
import { ArtistsComponent  } from './artists/artists.component';
import { ArtistnamesComponent } from './artistnames/artistnames .component';
import { DataService } from './data.service'
@NgModule({
  déclarations : [
    AppComponent,
    Composante Artistes,
    Noms des artistesComposant
  ],
  importations: [
    NavigateurModule
  ],
  fournisseurs : [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Utiliser le Service

Pour utiliser le service que nous avons mis en place dans notre projet, il nous suffit de l'importer là où cela est nécessaire et d'en importer des fonctions via le constructeur du composant.

Dans votre composant artiste, copiez ce bloc de code ci-dessous dans celui-ci :

import { Component, OnInit } from '@angular/core';
import[19659031]{ DataService } de '../data.service';
@Composant({
  sélecteur: 'app-artistes',
  templateUrl: './artists.component.html',
  styleUrls: ['./artists.component.css']
})
export class ArtistsComponent implements[19659048]OnInit {
public artistes = []
constructeur(private liste: DataService) { }
ngOnInit(): void {
    this.artistes = this.list.getList();
  }
}

Vous pouvez voir comment cela se fait et nous avons maintenant accès aux fonctions déclarées à l'intérieur du service que nous avons créé.

Faire de même pour le composant Artistnames :

import { Component, OnInit } de '@angular/core';
import { DataService } de[19659033]'../data.service';
@Composant({
  sélecteur: 'app-artistes',
  templateUrl: './artistname.component.html',
  styleUrls: ['./artistname.component.css']
})
export class ArtistnameComponent implements[19659048]OnInit {
public artistes = []
constructeur(private liste: DataService) { }
ngOnInit(): void {
    this.artistes = this.list.getList();
  }
}

Si vous enregistrez tous les fichiers et rafraîchissez votre navigateur, vous verrez que l'affichage est exactement le même qu'avant :

Même image qu'avant, la page 'Salut, c'est la serviceapp' avec ' Il s'agit de la liste des meilleurs artistes de la musique africaine et de la liste des emplacements des meilleurs artistes de la musique africaine.

Cette fois, cependant, c'est plus efficace et très modulaire car nous avons fait abstraction de la fonction des données gestion à un service de données et les composants peuvent désormais servir leurs objectifs sans avoir besoin de répéter le code ou de faire plus que ce pour quoi ils ont été conçus.

Conclusion

Cela a été une excellente introduction à l'utilisation des services dans Angular. Nous avons examiné comment nous avons surchargé les composants dans le passé et comment Angular possède des fonctionnalités étendues qui nous aident à encapsuler certaines choses, rendant ainsi les structures que nous construisons plus efficaces et modulaires. Bon piratage !




Source link

juin 4, 2021