Services et Injectable
Créez des services injectables pour la logique partagée.
Services et Injectable est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Services et Injectable
Un service est une classe qui contient une logique ou un état réutilisable, comme la récupération de données ou un magasin partagé. Angular crée et partage les services grâce à l’injection de dépendances.
Pourquoi utiliser des services
Les composants doivent se concentrer sur la vue. Déplacez la logique métier, les appels à l’API et l’état partagé dans des services afin de pouvoir les réutiliser et les tester indépendamment.
Le décorateur Injectable
Marquez une classe de service avec @Injectable afin qu’Angular puisse la créer et l’injecter là où elle est nécessaire.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' enregistre le service auprès de l’injecteur racine de l’application. Angular crée une instance unique partagée (un singleton) pour toute l’application.
Fournisseurs optimisables par élagage
Comme le fournisseur est déclaré dans la classe avec providedIn, les services inutilisés peuvent être automatiquement supprimés du paquet lors de l’élagage.
Un service avec état
Les services contiennent souvent un état. Avec des signaux, exposez l’état réactif depuis le service.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}Un service avec des méthodes
Ajoutez des méthodes que les composants peuvent appeler pour effectuer des actions ou récupérer des données.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Générer un service
Le CLI crée la structure d’un service en ajoutant déjà le décorateur Injectable.
ng g service dataLes singletons partagent l’état
Comme un service racine est un singleton, chaque composant qui l’injecte voit la même instance et le même état. C’est ainsi que les composants partagent des données.
Les services peuvent injecter des services
Un service peut dépendre d’autres services. Par exemple, un service de données peut utiliser le service HttpClient pour effectuer des requêtes.
Gardez des services ciblés
Attribuez à chaque service une responsabilité unique et claire. Les petits services ciblés sont plus faciles à tester et à réutiliser que les grands services qui font beaucoup de choses.
Vérification rapide : Injectable
Enregistrer un service singleton.
Récapitulatif : services
Vous avez appris que les services contiennent une logique et un état réutilisables, sont marqués avec @Injectable et utilisent providedIn: root pour enregistrer un singleton à l’échelle de l’application. Les services partagent leur état entre les composants et peuvent dépendre d’autres services. Ensuite : la fonction inject.
Questions Fréquemment Posées
La leçon « Services et Injectable » est-elle gratuite ?
Oui — le texte complet de « Services et Injectable » 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 « Services et Injectable » ?
Créez des services injectables pour la logique partagée. 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 1 sur 4.
Combien de temps prend la leçon « Services et Injectable » ?
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
- Services et Injectable
- La fonction inject
- Fournisseurs et portées
- Jetons d’injection