Créer une Nouvelle Instance de Service avec le Décorateur @Injectable dans Angular

Angular est un framework JavaScript dynamique qui utilise des décorateurs pour ajouter des métadonnées aux classes du programme. Un de ces décorateurs utilisés pour créer une nouvelle instance d'un service est @Injectable({ providedIn: 'root' }).

Dans Angular, les services sont des classes avec un objectif défini, elles sont utilisées pour organiser et partager un code commun entre différentes parties de l'application. Pour rendre ces services disponibles pour être injectés dans d'autres parties du code, Angular utilise le décorateur @Injectable.

Le décorateur @Injectable({ providedIn: 'root' }) crée une instance unique de service qui est disponible dans toute l'application, également appelée Singleton. En ajoutant cette métadonnée providedIn: 'root' à @Injectable, le service sera automatiquement injecté dans le root de l'application et sera disponible globalement.

Voir ci-dessous un exemple simple d'une utilisation de @Injectable({ providedIn: 'root' }):

import { Injectable } from '@angular/core';

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

  constructor() { }

  // Méthodes du service
  
}

Dans cet exemple, DataService est un service qui sera disponible pour toute l'application.

Les autres décorateurs mentionnés dans la question, @Component, @NgModule et @Directive, ont des utilisations différentes. Par exemple, @Component est utilisé pour déclarer une classe en tant que composant Angular, @NgModule pour définir un module Angular, et @Directive pour changer l'apparence ou le comportement d'un élément du DOM.

Il est important de noter que bien que @Injectable({ providedIn: 'root' }) rend le service disponible globalement, il est considéré comme une bonne pratique de ne pas partager tous les services de cette façon. À la place, vous devriez fournir chaque service au niveau le plus proche possible de là où il est utilisé, pour améliorer l'efficacité et la maintenabilité de votre code.