Angular Academy · Leçon

La fonction inject

Résolvez les dépendances avec la fonction inject.

La fonction inject est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

La fonction inject

La fonction inject() récupère une dépendance auprès de l’injecteur. C’est l’alternative moderne à l’injection d’une dépendance par paramètre du constructeur.

Utilisation de base

Appelez inject avec la classe souhaitée et affectez le résultat à un champ.

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  private data = inject(DataService);
}

Comparaison avec l’injection par constructeur

L’ancienne méthode déclare les dépendances comme paramètres du constructeur. inject() effectue le même travail qu’un initialiseur de champ, ce qui est souvent plus clair.

// old style:
// constructor(private data: DataService) {}

Où appeler inject

inject() doit s’exécuter dans un contexte d’injection : lors de la construction d’un composant, d’une directive ou d’un service, ou dans des initialiseurs de champs et des fonctions fabrique de fournisseurs.

Injecter dans un service

Utilisez également inject dans les services, par exemple pour obtenir HttpClient.

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class Api {
  private http = inject(HttpClient);
}

Moins de code répétitif

Avec inject, vous évitez les longues signatures de constructeur. Chaque dépendance est une simple déclaration de champ, facile à lire et à réorganiser.

Utiliser des services injectés

Une fois injecté, appelez le service comme n’importe quel objet.

export class XComponent {
  private store = inject(CounterStore);
  add() { this.store.increment(); }
}

inject dans les gardes fonctionnelles

Les gardes de routes et les résolveurs fonctionnels s’exécutent dans un contexte d’injection ; vous pouvez donc appeler inject à l’intérieur pour accéder aux services.

// export const authGuard = () => {
//   const auth = inject(AuthService);
//   return auth.isLoggedIn();
// };

Dépendances facultatives

inject accepte des options, notamment pour marquer une dépendance comme facultative : la fonction renvoie alors null au lieu de lever une erreur lorsqu’elle n’est pas fournie.

// const logger = inject(Logger, { optional: true });

En dehors du contexte d’injection

Appeler inject en dehors d’un contexte d’injection (par exemple dans une fonction de rappel setTimeout) lève une erreur. Capturez plutôt la dépendance lors de la construction.

Pourquoi préférer inject

inject fonctionne bien avec les mixins, les classes de base et les API fonctionnelles, tout en gardant les classes de composants concises. C’est l’approche recommandée dans Angular moderne.

Vérification rapide : inject

Récupérer une dépendance.

Récapitulatif : inject

Vous avez découvert la fonction inject() comme méthode moderne pour obtenir des dépendances, utilisable dans les composants, les services et les gardes fonctionnelles au sein d’un contexte d’injection. Elle réduit le code répétitif par rapport à l’injection par constructeur et prend en charge des options comme optional. Ensuite : les fournisseurs et les portées.

Questions Fréquemment Posées

La leçon « La fonction inject » est-elle gratuite ?

Oui — le texte complet de « La fonction inject » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « La fonction inject » ?

Résolvez les dépendances avec la fonction inject. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « La fonction inject » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy