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

HOME

En aquest tema, explorarem com utilitzar serveis per gestionar l'estat de les aplicacions Angular. La gestió d'estat és crucial per mantenir la coherència de les dades i la interacció de l'usuari en aplicacions complexes. Els serveis d'Angular proporcionen una manera eficient de compartir dades i funcionalitats entre components.

Objectius

Comprendre la importància de la gestió d'estat.
Aprendre a crear i utilitzar serveis per gestionar l'estat.
Implementar patrons comuns de gestió d'estat amb serveis.

Conceptes Clau

Què és la gestió d'estat?

La gestió d'estat es refereix a com es maneja i es manté l'estat de l'aplicació, incloent dades de l'usuari, configuracions, i altres informacions que poden canviar durant l'ús de l'aplicació.

Per què utilitzar serveis per a la gestió d'estat?

Compartició de dades: Els serveis permeten compartir dades entre components sense necessitat de passar-les a través de la jerarquia de components.
Encapsulació de la lògica: La lògica de negoci es pot encapsular en serveis, mantenint els components més nets i enfocats en la presentació.
Reutilització: Els serveis poden ser reutilitzats en diferents parts de l'aplicació.

Creació d'un servei per a la gestió d'estat

Pas 1: Crear el servei

Utilitzarem Angular CLI per crear un servei. Suposem que estem gestionant l'estat d'una llista de tasques.

ng generate service task

Pas 2: Definir el servei

Definim el servei TaskService per gestionar l'estat de les tasques.

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

export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasksSubject = new BehaviorSubject<Task[]>([]);
  tasks$ = this.tasksSubject.asObservable();

  constructor() { }

  addTask(task: Task) {
    const currentTasks = this.tasksSubject.value;
    this.tasksSubject.next([...currentTasks, task]);
  }

  updateTask(updatedTask: Task) {
    const currentTasks = this.tasksSubject.value.map(task =>
      task.id === updatedTask.id ? updatedTask : task
    );
    this.tasksSubject.next(currentTasks);
  }

  deleteTask(taskId: number) {
    const currentTasks = this.tasksSubject.value.filter(task => task.id !== taskId);
    this.tasksSubject.next(currentTasks);
  }
}

Explicació del codi

BehaviorSubject: Utilitzem BehaviorSubject per mantenir l'estat de les tasques i permetre que els components es subscriguin a les actualitzacions.
tasks$: És un observable que els components poden subscriure's per rebre actualitzacions de l'estat de les tasques.
addTask, updateTask, deleteTask: Mètodes per modificar l'estat de les tasques.

Utilització del servei en components

Pas 3: Injectar el servei en un component

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

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks: Task[] = [];

  constructor(private taskService: TaskService) { }

  ngOnInit(): void {
    this.taskService.tasks$.subscribe(tasks => {
      this.tasks = tasks;
    });
  }

  addTask(title: string) {
    const newTask: Task = { id: Date.now(), title, completed: false };
    this.taskService.addTask(newTask);
  }

  updateTask(task: Task) {
    this.taskService.updateTask(task);
  }

  deleteTask(taskId: number) {
    this.taskService.deleteTask(taskId);
  }
}

Explicació del codi

ngOnInit: Ens subscrivim a tasks$ per rebre actualitzacions de l'estat de les tasques.
addTask, updateTask, deleteTask: Mètodes per interactuar amb el servei i modificar l'estat de les tasques.

Exercici Pràctic

Exercici

Crea un nou servei UserService per gestionar l'estat dels usuaris.
Defineix una interfície User amb els camps id, name, i email.
Implementa mètodes per afegir, actualitzar i eliminar usuaris.
Utilitza el servei en un component UserListComponent per mostrar la llista d'usuaris i permetre afegir, actualitzar i eliminar usuaris.

Solució

user.service.ts

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

export interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private usersSubject = new BehaviorSubject<User[]>([]);
  users$ = this.usersSubject.asObservable();

  constructor() { }

  addUser(user: User) {
    const currentUsers = this.usersSubject.value;
    this.usersSubject.next([...currentUsers, user]);
  }

  updateUser(updatedUser: User) {
    const currentUsers = this.usersSubject.value.map(user =>
      user.id === updatedUser.id ? updatedUser : user
    );
    this.usersSubject.next(currentUsers);
  }

  deleteUser(userId: number) {
    const currentUsers = this.usersSubject.value.filter(user => user.id !== userId);
    this.usersSubject.next(currentUsers);
  }
}

user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService, User } from './user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.userService.users$.subscribe(users => {
      this.users = users;
    });
  }

  addUser(name: string, email: string) {
    const newUser: User = { id: Date.now(), name, email };
    this.userService.addUser(newUser);
  }

  updateUser(user: User) {
    this.userService.updateUser(user);
  }

  deleteUser(userId: number) {
    this.userService.deleteUser(userId);
  }
}

Conclusió

En aquest tema, hem après com utilitzar serveis per gestionar l'estat en aplicacions Angular. Els serveis proporcionen una manera eficient de compartir dades i encapsular la lògica de negoci, facilitant la gestió de l'estat de l'aplicació. Hem creat un servei per gestionar tasques i hem vist com utilitzar-lo en un component. A més, hem practicat creant un servei per gestionar usuaris. En el proper tema, explorarem com utilitzar NgRx per a la gestió d'estat avançada.

Utilitzar serveis per a la gestió d'estat

Objectius

Conceptes Clau

Què és la gestió d'estat?

Per què utilitzar serveis per a la gestió d'estat?

Creació d'un servei per a la gestió d'estat

Pas 1: Crear el servei

Pas 2: Definir el servei

Explicació del codi

Utilització del servei en components

Pas 3: Injectar el servei en un component

Explicació del codi

Exercici Pràctic

Exercici

Solució

user.service.ts

user-list.component.ts

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