Angular Academy · Les

Observables en subscriptions

Maak observable streams en abonneer u erop.

Les 1 van 413 stappen

Observables en subscriptions is een gratis Angular Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Wat is een Observable

Een Observable is een luie stroom van waarden in de loop van de tijd. Er gebeurt niets totdat je je abonneert. De stroom kan nul of meer waarden uitzenden en daarna voltooien of een fout geven.

RxJS is de reactieve bibliotheek die Angular meelevert voor het afhandelen van asynchroon werk, zoals HTTP, gebeurtenissen en timers.

Een Observable maken

De constructor van Observable neemt een abonnee-functie aan. Je roept next() aan om een waarde uit te zenden, complete() om af te ronden en error() om te mislukken.

import { Observable } from 'rxjs';

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

Abonneren

Abonneren start de uitvoering. Geef een observer door met next-, error- en complete-afhandelaars.

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

Observables zijn lui

De abonnee-functie wordt pas uitgevoerd wanneer subscribe() wordt aangeroepen. Elk abonnement start een nieuwe, onafhankelijke uitvoering (een koude observable).

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

Makers: of en from

Je gebruikt de constructor zelden. Helpers zoals of en from maken snel 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));

De interval- en timer-makers

interval zendt volgens een schema oplopende getallen uit; timer wacht en zendt daarna een waarde uit.

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 retourneert Observables

In Angular retourneren de methoden van HttpClient Observables. Het verzoek wordt pas verzonden wanneer je je abonneert.

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

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

Het Subscription-object

subscribe() retourneert een Subscription. Roep unsubscribe() aan om geen waarden meer te ontvangen en resources vrij te geven.

import { interval } from 'rxjs';

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

Voltooien versus abonnement opzeggen

Wanneer een observable complete() of error() uitvoert, ruimt deze automatisch op. Voor oneindige stromen (interval, DOM-gebeurtenissen) moet je zelf het abonnement opzeggen.

Korte notatie voor Observer

Als je alleen geïnteresseerd bent in waarden, geef je één functie door — die wordt de next-afhandelaar.

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

Heet versus koud (kort)

Koude observables beginnen waarden te produceren zodra je je abonneert en elke abonnee krijgt een eigen uitvoering (HTTP, of, interval). Hete observables produceren waarden ongeacht abonnees en delen deze waarden (Subjects komen hierna aan bod).

Korte controle

Test je begrip van observables.

Beantwoord dit in de interactieve les

Samenvatting: Observables en abonnementen

Een Observable is een luie stroom die je activeert met subscribe().

Zend waarden uit met next, rond af met complete en geef een fout met error.
De methoden van HttpClient retourneren observables — ze worden uitgevoerd zodra je je abonneert.
Zeg abonnementen op oneindige stromen op om geheugenlekken te voorkomen.

Volgende: Subjects en BehaviorSubject.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Observables en subscriptions” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Observables en subscriptions”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Observables en subscriptions”?

Maak observable streams en abonneer u erop. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Observables en subscriptions”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy