Le Guide Angular | Marmicode
  • Le Guide Angular par Marmicode
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Event Loop
    • 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
    • Clavier mécanique
    • 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
      • Talks
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • State Management
      • Quelques Liens
      • Talks
    • 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
        • 📺Introduction au Test-Driven Development
        • 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
      • Talks
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
    • Remplacement Dynamique de Composants
    • Lazy Loading without Router
    • Project Structure
    • SCAM Modules
    • Setup a Mock ReSTful API
  • Autres Ressources
  • Stay Tuned
    • 🎁-20% sur nos workshops avec le code GUIDEANGULAR
    • 🐦Suivez-moi !
    • 📺Cours Vidéo
    • 📬Newsletter
    • 📝Blog
  • Nos Services
    • Formation Angular
    • Atelier Unit-Testing Angular
    • Atelier Architecture Angular
    • Consultation à Distance & Code Review
  • Nos Guides
    • Guide Agile
    • Guide API ReST
    • Guide NodeJS
Propulsé par GitBook
Sur cette page
  • Déclaration d'un Service
  • Définition d'un Provider
  • useClass
  • useValue
  • useFactory
  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 BookCoreModule {
}

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 {
}
PrécédentInjection d'un Service AngularSuivantPortée des Services

Dernière mise à jour il y a 5 ans

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