Services & Injection de Dépendances

Service Basique

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

@Injectable({
  providedIn: 'root' // Singleton à travers l'app
})
export class UserService {
  private users: string[] = [];

  getUsers() {
    return this.users;
  }

  addUser(user: string) {
    this.users.push(user);
  }
}

Injecter dans un Component

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  standalone: true
})
export class UserListComponent {
  // Fonction inject() moderne
  userService = inject(UserService);

  // Ou injection par constructeur (traditionnel)
  constructor(private userService: UserService) {}

  users = this.userService.getUsers();
}

Niveaux de Provide

// Niveau root (singleton)
@Injectable({ providedIn: 'root' })

// Niveau component (nouvelle instance par component)
@Component({
  providers: [UserService]
})

// Niveau module (déprécié avec standalone)
@NgModule({
  providers: [UserService]
})

Tokens d’Injection

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

export const API_URL = new InjectionToken<string>('api.url');

// Fournir
@Component({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' }
  ]
})

// Injecter
apiUrl = inject(API_URL);

Providers Factory

export function userServiceFactory(http: HttpClient) {
  return new UserService(http, '/api/users');
}

@Component({
  providers: [
    {
      provide: UserService,
      useFactory: userServiceFactory,
      deps: [HttpClient]
    }
  ]
})

Bonnes Pratiques

• Utiliser providedIn: 'root' pour les services à l’échelle de l’app
• Utiliser les providers de component pour l’état spécifique au component
• Préférer inject() à l’injection par constructeur (moderne)
• Garder les services sans état quand c’est possible
• Utiliser des interfaces pour l’abstraction