El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Ús de serveis per a la gestió d'estat

Següent ►
►

En aquest tema, aprendrem com utilitzar serveis en Angular per gestionar l'estat de l'aplicació. La gestió d'estat és crucial per mantenir la coherència de les dades i assegurar que els components de l'aplicació estiguin sincronitzats. Els serveis ens permeten centralitzar la lògica de negoci i compartir dades entre components de manera eficient.

Objectius

  • Entendre la importància de la gestió d'estat en aplicacions Angular.
  • 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 la manera com es maneja i es manté l'estat (dades) d'una aplicació. En aplicacions Angular, l'estat pot incloure informació com l'usuari actual, configuracions de l'aplicació, dades de formularis, etc.

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

  • Centralització: Els serveis permeten centralitzar la lògica de negoci i les dades, facilitant la seva gestió i manteniment.
  • Compartició de dades: Els serveis poden ser injectats en múltiples components, permetent compartir dades entre ells.
  • Desacoblament: Els serveis desacoblen la lògica de negoci dels components, fent que aquests siguin més simples i fàcils de provar.

Creació d'un Servei per a la Gestió d'Estat

Pas 1: Crear el Servei

Primer, crearem un servei utilitzant l'Angular CLI.

ng generate service state

Això generarà un fitxer state.service.ts amb el següent contingut bàsic:

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

@Injectable({
  providedIn: 'root'
})
export class StateService {

  constructor() { }
}

Pas 2: Definir l'Estat

Afegirem propietats al servei per mantenir l'estat de l'aplicació. Per exemple, podem gestionar l'estat d'un usuari autenticat.

export class StateService {
  private user: any = null;

  constructor() { }

  setUser(user: any) {
    this.user = user;
  }

  getUser() {
    return this.user;
  }

  clearUser() {
    this.user = null;
  }
}

Pas 3: Utilitzar el Servei en Components

Ara que tenim el servei, podem injectar-lo en els components que necessiten accedir o modificar l'estat.

import { Component, OnInit } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-user',
  template: `
    <div *ngIf="user">
      Benvingut, {{ user.name }}!
    </div>
  `
})
export class UserComponent implements OnInit {
  user: any;

  constructor(private stateService: StateService) { }

  ngOnInit() {
    this.user = this.stateService.getUser();
  }
}

Pas 4: Actualitzar l'Estat

Podem actualitzar l'estat des de qualsevol component injectant el servei i utilitzant els seus mètodes.

import { Component } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-login',
  template: `
    <button (click)="login()">Login</button>
  `
})
export class LoginComponent {

  constructor(private stateService: StateService) { }

  login() {
    const user = { name: 'John Doe' };
    this.stateService.setUser(user);
  }
}

Exercici Pràctic

Objectiu

Crear un servei per gestionar l'estat d'una llista de tasques (to-do list) i utilitzar-lo en diversos components.

Passos

  1. Crear el servei: ng generate service todo
  2. Definir l'estat: Afegir propietats i mètodes per gestionar la llista de tasques.
  3. Utilitzar el servei: Injectar el servei en components per afegir, eliminar i mostrar tasques.

Solució

1. Crear el servei

ng generate service todo

2. Definir l'estat

export class TodoService {
  private todos: string[] = [];

  constructor() { }

  addTodo(todo: string) {
    this.todos.push(todo);
  }

  getTodos() {
    return this.todos;
  }

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

3. Utilitzar el servei

Component per afegir tasques

import { Component } from '@angular/core';
import { TodoService } from './todo.service';

@Component({
  selector: 'app-add-todo',
  template: `
    <input [(ngModel)]="newTodo" placeholder="Nova tasca">
    <button (click)="addTodo()">Afegir</button>
  `
})
export class AddTodoComponent {
  newTodo: string = '';

  constructor(private todoService: TodoService) { }

  addTodo() {
    if (this.newTodo) {
      this.todoService.addTodo(this.newTodo);
      this.newTodo = '';
    }
  }
}

Component per mostrar tasques

import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service';

@Component({
  selector: 'app-todo-list',
  template: `
    <ul>
      <li *ngFor="let todo of todos; let i = index">
        {{ todo }}
        <button (click)="removeTodo(i)">Eliminar</button>
      </li>
    </ul>
  `
})
export class TodoListComponent implements OnInit {
  todos: string[] = [];

  constructor(private todoService: TodoService) { }

  ngOnInit() {
    this.todos = this.todoService.getTodos();
  }

  removeTodo(index: number) {
    this.todoService.removeTodo(index);
  }
}

Resum

En aquest tema, hem après com utilitzar serveis per gestionar l'estat en aplicacions Angular. Hem vist com crear un servei, definir l'estat, i utilitzar-lo en components per compartir dades i lògica de negoci. La gestió d'estat amb serveis és una pràctica recomanada que ajuda a mantenir el codi organitzat i fàcil de mantenir.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats