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

HOME

La gestió d'estat és un aspecte crucial en el desenvolupament d'aplicacions Angular, especialment quan es tracta d'aplicacions complexes amb múltiples components que necessiten compartir dades. En aquest tema, explorarem els conceptes bàsics de la gestió d'estat, les seves necessitats i les diferents estratègies que es poden utilitzar per gestionar l'estat de manera eficient.

Què és la gestió d'estat?

La gestió d'estat es refereix a la manera en què una aplicació maneja i sincronitza les dades entre diferents parts de l'aplicació. L'estat pot incloure informació com ara:

Dades de l'usuari (per exemple, informació de sessió)
Dades de l'aplicació (per exemple, configuracions, preferències)
Dades de negoci (per exemple, productes, comandes)

Per què és important la gestió d'estat?

Una gestió d'estat adequada és essencial per:

Mantenir la consistència de les dades: Assegura que totes les parts de l'aplicació tinguin accés a les dades més recents.
Millorar la mantenibilitat: Facilita la comprensió i el manteniment del codi.
Optimitzar el rendiment: Redueix la necessitat de sol·licituds repetides al servidor.
Facilitar el desenvolupament: Simplifica la comunicació entre components.

Estratègies de gestió d'estat

Hi ha diverses estratègies per gestionar l'estat en una aplicació Angular. Les més comunes són:

Gestió d'estat local

Cada component gestiona el seu propi estat. Aquesta és la forma més senzilla de gestió d'estat, però pot ser insuficient per a aplicacions complexes.

Gestió d'estat amb serveis

Els serveis Angular es poden utilitzar per compartir dades entre components. Aquesta estratègia és més escalable que la gestió d'estat local.

Exemple de servei per a la gestió d'estat

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private data: any = {};

  setData(key: string, value: any) {
    this.data[key] = value;
  }

  getData(key: string) {
    return this.data[key];
  }
}

Gestió d'estat global amb biblioteques

Per a aplicacions més complexes, es poden utilitzar biblioteques com NgRx, que proporcionen una solució més robusta per a la gestió d'estat global.

Avantatges i desavantatges de cada estratègia

Estratègia	Avantatges	Desavantatges
Gestió d'estat local	Simple d'implementar, fàcil de comprendre	Difícil de mantenir en aplicacions grans, duplicació de dades
Gestió d'estat amb serveis	Millor compartició de dades, més escalable	Pot ser complicat si no es gestiona correctament
Gestió d'estat global (NgRx)	Solució robusta, facilita la gestió d'estat complex	Corba d'aprenentatge pronunciada, pot ser excessiu per a aplicacions petites

Exercici pràctic

Objectiu

Crear un servei per gestionar l'estat d'una llista de tasques en una aplicació Angular.

Passos

Crear el servei de gestió d'estat

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: string[] = [];

  addTask(task: string) {
    this.tasks.push(task);
  }

  getTasks() {
    return this.tasks;
  }

  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

Utilitzar el servei en un component

import { Component } from '@angular/core';
import { TaskService } from './task.service';

@Component({
  selector: 'app-task-list',
  template: `
    <div>
      <input [(ngModel)]="newTask" placeholder="New Task">
      <button (click)="addTask()">Add Task</button>
    </div>
    <ul>
      <li *ngFor="let task of tasks; let i = index">
        {{ task }} <button (click)="removeTask(i)">Remove</button>
      </li>
    </ul>
  `
})
export class TaskListComponent {
  newTask: string = '';
  tasks: string[] = [];

  constructor(private taskService: TaskService) {
    this.tasks = this.taskService.getTasks();
  }

  addTask() {
    if (this.newTask) {
      this.taskService.addTask(this.newTask);
      this.newTask = '';
    }
  }

  removeTask(index: number) {
    this.taskService.removeTask(index);
  }
}

Solució

El codi anterior mostra com crear un servei per gestionar una llista de tasques i com utilitzar aquest servei en un component per afegir i eliminar tasques.

Conclusió

La gestió d'estat és un aspecte fonamental en el desenvolupament d'aplicacions Angular. Hem vist diferents estratègies per gestionar l'estat, des de la gestió local fins a l'ús de serveis i biblioteques com NgRx. En els següents temes, explorarem com utilitzar serveis per a la gestió d'estat de manera més detallada i com implementar solucions més avançades amb NgRx.

Introducció a la gestió d'estat

Què és la gestió d'estat?

Per què és important la gestió d'estat?

Estratègies de gestió d'estat

Gestió d'estat local

Gestió d'estat amb serveis

Exemple de servei per a la gestió d'estat

Gestió d'estat global amb biblioteques

Avantatges i desavantatges de cada estratègia

Exercici pràctic

Objectiu

Passos

Solució

Conclusió

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

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

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques