Angular Academy · Leçon

Observables et abonnements

Créez des flux observables et abonnez-vous-y.

Observables et abonnements 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.

Qu’est-ce qu’un observable

Un Observable est un flux paresseux de valeurs au fil du temps. Rien ne se passe tant que vous ne vous êtes pas abonné avec subscribe. Il peut émettre zéro valeur ou davantage, puis soit se terminer, soit produire une erreur.

RxJS est la bibliothèque réactive fournie avec Angular pour gérer les opérations asynchrones comme les requêtes HTTP, les événements et les minuteurs.

Créer un observable

Le constructeur de Observable prend une fonction d’abonnement. Appelez next() pour émettre une valeur, complete() pour terminer et error() pour signaler un échec.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

S’abonner

L’abonnement démarre l’exécution. Transmettez un observateur avec des gestionnaires next, error et complete.

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

Les observables sont paresseux

La fonction d’abonnement ne s’exécute pas tant que subscribe() n’est pas appelé. Chaque abonnement déclenche une exécution nouvelle et indépendante (observable froid).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

Fonctions de création : of et from

Vous utilisez rarement le constructeur. Des fonctions comme of et from permettent de créer rapidement des observables.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

Les créateurs interval et timer

interval émet des nombres croissants selon une fréquence donnée ; timer attend, puis émet une valeur.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient renvoie des observables

Dans Angular, les méthodes de HttpClient renvoient des observables. La requête n’est envoyée que lorsque vous vous abonnez.

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

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

L’objet Subscription

subscribe() renvoie un objet Subscription. Appelez unsubscribe() pour arrêter de recevoir des valeurs et libérer les ressources.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

Fin de l’exécution ou désabonnement

Lorsqu’un observable appelle complete() ou error(), il libère automatiquement ses ressources. Pour les flux infinis (interval, événements du DOM), vous devez vous désabonner vous-même.

Syntaxe abrégée de l’observateur

Si seules les valeurs vous intéressent, transmettez une fonction unique : elle devient le gestionnaire next.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

Flux chauds et froids (en bref)

Les observables froids commencent à produire des valeurs lors de l’abonnement, et chaque abonné dispose de sa propre exécution (HTTP, of, interval). Les observables chauds produisent des valeurs indépendamment des abonnés et les partagent (nous découvrirons les sujets juste après).

Vérification rapide

Vérifiez votre compréhension des observables.

Récapitulatif : observables et abonnements

Un Observable est un flux paresseux que vous activez avec subscribe().

Émettez avec next, terminez avec complete et signalez un échec avec error.
Les méthodes de HttpClient renvoient des observables : elles s’exécutent lors de l’abonnement.
Désabonnez-vous des flux infinis pour éviter les fuites.

Ensuite : les sujets et BehaviorSubject.

Questions Fréquemment Posées

La leçon « Observables et abonnements » est-elle gratuite ?

Oui — le texte complet de « Observables et abonnements » 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 « Observables et abonnements » ?

Créez des flux observables et abonnez-vous-y. 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 « Observables et abonnements » ?

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