Nous apprendrons ce qu’est un service Angular puis nous créerons un exemple avec la dernière version d’Angular 9.

Un service Angular est un singleton qui peut être câblé avec des composants ou d’autres services via Dependency Injection.

> ✋✋ Rejoignez notre groupe Facebook 👈 pour discuter de tout ce qui concerne le développement Angular.

Selon Wikipédia :

En génie logiciel, l’injection de dépendances est une technique par laquelle un objet fournit les dépendances d’un autre objet.

Ne soyez pas intimidé par ce terme, cela signifie simplement qu’Angular (ou une partie d’Angular, l’injecteur) se charge d’instancier les services et fournit l’instance au composant demandeur.

> ✋✋ Consultez également Angular 9/8 Services &Injection de dépendance via providedIn, racine & tout Tutoriel 👈

Selon les docs Angular :

DI est câblé dans le framework Angular et utilisé partout pour fournir aux nouveaux composants les services ou autres choses dont ils ont besoin. Les composants consomment des services ; c’est-à-dire que vous pouvez injecter un service dans un composant, donnant au composant l’accès à cette classe de service.

Vous pouvez utiliser les services pour organiser et partager le code à travers votre app

Comment définir un service Angular ?

Pour définir une classe comme un service dans Angular, utilisez le décorateur @Injectable() pour fournir les métadonnées qui permettent à Angular de l’injecter dans un composant en tant que dépendance.

Vous devez fournir un service avant qu’il puisse être disponible. Cela peut être fait de trois façons :

• Via les métadonnées du service passées au décorateur @Injectable() (Le service sera disponible partout),
• Via le tableau des fournisseurs, dans un module spécifique (Le service est disponible uniquement pour les composants et les services du module),
• Via le tableau des fournisseurs dans un composant spécifique (Le service est disponible uniquement pour le composant).

Service Angular 9 par exemple

Créons maintenant un service par exemple.

Vérifiez que vous avez un projet Angular créé et Angular CLI v9 installé.

Dirigez-vous vers votre interface de ligne de commande et naviguez dans le dossier de votre projet :

$ cd your-angular-project

Puis, générez un nouveau service en exécutant la commande suivante :

$ ng generate service my-example

Ouvrez le fichier src/app/mon-exemple.service.ts:

@Injectable({
providedIn: 'root'
})
export class MyExampleService { 
}

Grâce à la propriété providedIn, vous n’avez rien d’autre à faire pour commencer à utiliser ce service, sauf pour implémenter la fonctionnalité qui doit fournir. la valeur root fait référence au module racine de l’app.

Vous pouvez également injecter d’autres services dans votre nouveau service – par exemple, le service intégré HttpClient – via son constructeur :

import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}

Après avoir implémenté les méthodes de votre service, vous pouvez l’importer et l’injecter dans d’autres composants et appeler les méthodes publiques de votre service dans votre composant.

Selon la docs Angular:

Typiquement, le travail d’un composant est de permettre l’expérience utilisateur et rien de plus. Un composant doit présenter des propriétés et des méthodes pour la liaison de données, afin de servir de médiateur entre la vue (rendue par le modèle) et la logique de l’application.

Un composant peut déléguer certaines tâches à des services, comme récupérer des données du serveur, valider l’entrée de l’utilisateur ou se connecter directement à la console.

En définissant de telles tâches de traitement dans une classe de service injectable, vous rendez ces tâches disponibles pour n’importe quel composant.