📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment utiliser useClass dans le provider dans Angular ? ​

Pour utiliser useClass dans le provider d'un module Angular, vous devez d'abord déclarer votre classe et ses éventuelles dépendances. Par exemple, supposons que vous avez une classe LoggerService qui dépend d'une classe LogLevel :

ts
import { inject, Injectable } from '@angular/core';

export class LogLevel {
  static readonly DEBUG: string = 'DEBUG';
  static readonly INFO: string = 'INFO';
  static readonly WARN: string = 'WARN';
  static readonly ERROR: string = 'ERROR';
}

@Injectable()
export class LoggerService {
  private level = inject(LogLevel);

  log(message: string) {
    console.log(`[${this.level}]: ${message}`);
  }
}

Ensuite, vous pouvez utiliser useClass dans le provider d'un module Angular en spécifiant la classe que vous souhaitez utiliser et ses éventuelles dépendances. Par exemple :

ts
import { ApplicationConfig } from '@angular/core';
import { LoggerService, LogLevel } from './logger.service';

export const appConfig: ApplicationConfig = {
    providers: [
      {
        provide: LoggerService,
        useClass: LoggerService,
        deps: [LogLevel]
      }
    ]
};

Vous pouvez maintenant injecter LoggerService dans n'importe quel composant ou service de votre application.

ts
import { LoggerService } from './logger.service';

@Component({
  // ...
})
export class AppComponent {
  private logger = inject(LoggerService);
}

Exemple de useClass pour créer un mock ​

INFO

Cette exemple utilise useClass dans les tests unitaires pour montrer un exemple concret

Dans le module où vous voulez utiliser le mock, utilisez la méthode useClass de l'objet TestBed dans votre fonction de configuration du module pour remplacer l'implémentation de l'interface par votre classe de mock. Voici un exemple de code :

ts
// Créez une interface pour représenter une fonctionnalité que vous souhaitez mock
export interface MonInterface {
  maMethode(): string;
}

// Créez une classe de mock qui implémente l'interface
@Injectable()
export class MonMock implements MonInterface {
  maMethode(): string {
    return 'Je suis un mock';
  }
}

// Créez un composant ou un service qui utilise l'interface
@Injectable()
export class MonService {
  constructor(private monInterface: MonInterface) {}

  utiliserInterface(): string {
    return this.monInterface.maMethode();
  }
}

// Créez un test pour votre composant ou service
describe('MonService', () => {
  let service: MonService;
  let mock: MonMock;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MonService,
        { provide: MonInterface, useClass: MonMock }
      ]
    });

    // Injectez une instance de votre service et de votre mock
    service = TestBed.inject(MonService);
    mock = TestBed.inject(MonMock);
  });

  it('devrait utiliser l\'interface mockée', () => {
    // Vérifiez que votre service utilise correctement l'interface mockée
    expect(service.utiliserInterface()).toEqual('Je suis un mock');
  });
});

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !