El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

Els observables són una part fonamental de la programació reactiva en Angular. Proporcionen una manera poderosa de gestionar fluxos de dades asíncrons, com ara sol·licituds HTTP, esdeveniments d'usuari i molt més. En aquest tema, aprendrem què són els observables, com crear-los, com subscriure-s'hi i com utilitzar operadors per transformar i combinar fluxos de dades.

Què és un Observable?

Un observable és un objecte que emet una seqüència de valors al llarg del temps. Els observables són part de la llibreria RxJS (Reactive Extensions for JavaScript), que ve integrada amb Angular.

Característiques clau dels observables:

Asíncrons: Els observables poden emetre valors de manera asíncrona.
Flux de dades: Poden emetre múltiples valors al llarg del temps.
Cancel·lables: Les subscripcions als observables es poden cancel·lar per evitar fuites de memòria.

Creació d'un Observable

Per crear un observable, utilitzem la classe Observable de RxJS. Aquí teniu un exemple bàsic:

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next('Hola');
  subscriber.next('Món');
  subscriber.complete();
});

Explicació del codi:

Observable: Importem la classe Observable de la llibreria RxJS.
new Observable: Creem un nou observable passant una funció que rep un objecte subscriber.
subscriber.next: Emetem valors utilitzant el mètode next.
subscriber.complete: Finalitzem l'emissió de valors amb el mètode complete.

Subscripció a un Observable

Per rebre els valors emesos per un observable, ens hi hem de subscriure. Utilitzem el mètode subscribe:

observable.subscribe({
  next(x) { console.log(x); },
  error(err) { console.error('Error: ' + err); },
  complete() { console.log('Completat'); }
});

Explicació del codi:

next: Funció que es crida per a cada valor emès.
error: Funció que es crida si es produeix un error.
complete: Funció que es crida quan l'observable ha completat l'emissió de valors.

Operadors d'Observables

Els operadors són funcions que permeten transformar, filtrar i combinar observables. Alguns dels operadors més comuns són map, filter i merge.

Exemple d'ús de l'operador `map`:

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);
const squaredNumbers = numbers.pipe(
  map(x => x * x)
);

squaredNumbers.subscribe(x => console.log(x));

Explicació del codi:

of: Crea un observable que emet una seqüència de nombres.
pipe: Aplica operadors a l'observable.
map: Transforma cada valor emès multiplicant-lo per si mateix.

Exemple pràctic: Sol·licitud HTTP amb Observables

Vegem com utilitzar observables per gestionar sol·licituds HTTP en Angular.

Pas 1: Importar el client HTTP

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

constructor(private http: HttpClient) {}

Pas 2: Fer una sol·licitud HTTP

getData(): Observable<any> {
  return this.http.get('https://api.example.com/data');
}

Pas 3: Subscripció a la sol·licitud HTTP

this.getData().subscribe({
  next(data) { console.log(data); },
  error(err) { console.error('Error: ' + err); },
  complete() { console.log('Sol·licitud completada'); }
});

Exercici pràctic

Exercici:

Crea un observable que emeti els nombres de l'1 al 5, multiplica cada nombre per 10 utilitzant l'operador map i subscriu-te per imprimir els resultats a la consola.

Solució:

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);
const multipliedNumbers = numbers.pipe(
  map(x => x * 10)
);

multipliedNumbers.subscribe(x => console.log(x));

Resum

En aquest tema, hem après què són els observables, com crear-los, com subscriure-s'hi i com utilitzar operadors per transformar fluxos de dades. Els observables són una eina poderosa per gestionar dades asíncrones en Angular, i la seva comprensió és essencial per desenvolupar aplicacions Angular eficients i reactives.

Ús d'observables

Introducció

Què és un Observable?

Característiques clau dels observables:

Creació d'un Observable

Explicació del codi:

Subscripció a un Observable

Explicació del codi:

Operadors d'Observables

Exemple d'ús de l'operador `map`:

Explicació del codi:

Exemple pràctic: Sol·licitud HTTP amb Observables

Pas 1: Importar el client HTTP

Pas 2: Fer una sol·licitud HTTP

Pas 3: Subscripció a la sol·licitud HTTP

Exercici pràctic

Exercici:

Solució:

Resum

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

Ús d'observables

Introducció

Què és un Observable?

Característiques clau dels observables:

Creació d'un Observable

Explicació del codi:

Subscripció a un Observable

Explicació del codi:

Operadors d'Observables

Exemple d'ús de l'operador map:

Explicació del codi:

Exemple pràctic: Sol·licitud HTTP amb Observables

Pas 1: Importar el client HTTP

Pas 2: Fer una sol·licitud HTTP

Pas 3: Subscripció a la sol·licitud HTTP

Exercici pràctic

Exercici:

Solució:

Resum

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

Exemple d'ús de l'operador `map`: