Le Guide Angular
  • Le Guide Angular par Wishtack
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibilité
  • TypeScript
    • Pourquoi TypeScript ?
    • De l'ECMAScript au TypeScript
    • Visibilité des Propriétés
    • Typing des Propriétés
    • Types
    • Interfaces
    • Inference
    • Duck Typing
    • Duck Typing Patterns
      • Compatibilité de Librairies
      • Entity Constructor
    • Décorateurs
      • Décorateurs de Propriété
      • Décorateurs de Classe
      • Décorateurs de Méthode & Paramètres
    • Quelques Liens
  • Tools
    • Git
    • Command Line
    • NodeJS
    • NPM
    • Yarn
      • Pourquoi Yarn ?
      • Définition et Installation des Dépendances
      • Scripts
      • Mise à Jour et Automatisation
    • Chrome
    • IntelliJ / WebStorm / VSCode
      • Raccourcis clavier IntelliJ / WebStorm
    • Floobits
    • Angular CLI
    • StackBlitz
    • Compodoc
  • Angular
    • Bootstrap
    • Composants
      • Root Component
      • Template Interpolation
      • Property Binding
      • Class & Style Binding
      • Event Binding
      • *ngIf
      • *ngFor
      • L'approche MVC
      • Création de Composants
      • Exemple
    • Container vs. Presentational Components
    • Interaction entre Composants
      • Input
      • Output
      • Exemple
    • Change Detection
      • Les Approches Possibles
      • Fonctionnement de la Change Detection
      • Optimisation de la Change Detection
      • Immutabilité
      • Quelques Liens
    • Project Structure & Modules
      • Entry Point
      • Définition d'un Module
      • Root Module
      • Feature Module
      • Shared Module
      • Exemple
    • Dependency Injection
      • Qu'est-ce que la "Dependency Injection" ?
      • Injection d'un Service Angular
      • Services & Providers
      • Portée des Services
      • Tree-Shakable Services
      • Class vs Injection Token
      • Exemple
    • Callback Hell vs. Promise vs. Async / Await
      • Callback Hell
      • Promise
      • Async / Await
    • Observables
      • Reactive Programming
      • Promise vs Observable
      • Subscribe
      • Unsubscribe ⚠️
      • Création d'un Observable
      • Opérateurs
        • Définition d'un Opérateur
        • Lettable Operators vs Legacy Methods
        • map
        • filter
        • mergeMap & switchMap
        • shareReplay
        • buffer
        • debounceTime
        • distinctUntilChanged
        • retry
      • Quelques Liens
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • GraphQL
    • Formulaires
      • Template-driven Forms 🤢
      • Reactive Forms 👍
        • Avantages des "Reactive Forms"
        • La boite à outils des "Reactive Forms"
        • Validation
        • Observation des Changements
    • Directives
      • Attribute Directive
      • Structural Directive
    • Pipes
    • Routing
      • Mise en Place du Routing
      • Lazy Loading
      • Project Structure
      • Route Guards
    • Testing
      • Unit-Testing
        • Jasmine
        • Unit-Test Synchrone
        • Test-Driven Development
        • Unit-Test Asynchrone
        • TestBed
        • Unit-Test d'un Service
        • Unit-Test d'un Composant
        • Unit-Test et Spies
        • Unit-Test et HttpClient
      • End-to-End
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
Powered by GitBook
On this page
  • Déclaration d'un Service
  • Définition d'un Provider
  • useClass
  • useValue
  • useFactory

Was this helpful?

  1. Angular
  2. Dependency Injection

Services & Providers

Déclaration d'un Service

Pour déclarer un service Angular, il suffit de créer une classe TypeScript et de la décorer avec le décorateur @Injectable().

@Injectable()
export class BookRepository {
    ...
}

N'oubliez pas les parenthèses du décorateur @Injectable().

Pensez à utiliser un template ou live template dans votre IDE ou encore Angular CLI : yarn ng generate module book-repository

Evitez de suffixer tous vos services et leurs fichiers respectivement avec les suffixes Service et .service.ts. tant qu'il n'y a pas de conflit ou d'ambiguïté.

En suffixant toutes les classes et instances par Service, on finit par perdre en lisibilité.

Une classe (de type "helper" par exemple) peut devenir un "service" ou cesser d'être un "service" du jour au lendemain, la frontière est fine.

La bonne pratique est de toujours ajouter le décorateur @Injectable() bien que celui-ci ne soit actuellement pas obligatoire tant que le service n'a pas de dépendances.

En essayant de l'injecter,

@Component({...})
export class BookPreviewComponent {
    constructor(private _bookRepository: BookRepository) {
    }
}

... vous remarquerez l'erreur suivante :

StaticInjectorError(AppModule)[BookPreviewComponent -> BookRepository]: 
  StaticInjectorError(Platform: core)[BookPreviewComponent -> BookRepository]: 
    NullInjectorError: No provider for BookRepository!

Angular essaie donc d'injecter une instance de BookRepository mais ne sait pas la produire.

Définition d'un Provider

Afin de pouvoir instancier un service, Angular a besoin d'un "provider" lui indiquant comment produire l'instance de ce service.

useClass

La façon la plus commune de définir un provider est la suivante :

@NgModule({
    providers: [
        {
            provider: BookRepository,
            useClass: BookRepository
        }
    ]
})
export class BookCore
Module {
}

Cette approche étant la plus commune, il est alors recommandé d'utiliser la syntaxe raccourcie suivante :

@NgModule({
    providers: [
        BookRepository
    ]
})
export class BookCoreModule {
}

useValue

Utilisation d'une valeur "hardcoded".

@NgModule({
    providers: [
        {
            provider: BookRepository,
            useValue: new FakeBookRepository()
        }
    ]
})
export class BookCoreModule {
}

Il est préférable d'éviter cette utilisation.

Dans le cas d'une classe, cela voudrait dire que l'objet est instancié avant le démarrage de l'application et pourrait ne jamais être utilisé.

useFactory

Comme son nom l'indique, cette propriété permet de définir l'instanciation du service via une fonction.

@NgModule({
    providers: [
        {
            provider: BookRepository,
            useFactory: () => {

                /* Useful for A/B testing. */
                if (isBTeam) {
                    return new BookRepositoryV2();
                }

                return new BookRepository();

            }
        }
    ]
})
export class BookCoreModule {
}
PreviousInjection d'un Service AngularNextPortée des Services

Last updated 5 years ago

Was this helpful?

Cela se fait généralement via la propriété providers de la configuration du module associé mais nous verrons d'autres façons de faire plus tard. Cf. et .

Cela veut dire que pour fournir une instance de la classe BookRepository, il suffit de l'instancier en lui passant en paramètre les dépendances dont elle a besoin. Cf. .

Dans le cas d'une constante, cf. .

Portée des Services
Tree-Shakable Services
Injection d'un Service Angular
Class vs Injection Token