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

Creació i ús de serveis

Següent ►
►

En aquest tema, aprendrem com crear i utilitzar serveis en Angular. Els serveis són una part fonamental de qualsevol aplicació Angular, ja que permeten encapsular la lògica de negoci i compartir dades entre components de manera eficient.

Objectius

  • Entendre què és un servei en Angular.
  • Aprendre a crear un servei.
  • Injectar i utilitzar un servei en un component.
  • Compartir dades entre components mitjançant serveis.

Què és un servei en Angular?

Un servei en Angular és una classe que encapsula una lògica específica que es pot compartir entre diferents components de l'aplicació. Els serveis es creen per:

  • Gestionar dades.
  • Realitzar operacions de xarxa.
  • Implementar lògica de negoci.
  • Facilitar la reutilització del codi.

Creació d'un servei

Pas 1: Crear el servei

Per crear un servei, podem utilitzar l'Angular CLI. Executem la següent comanda en el terminal:

ng generate service my-service

Això generarà dos fitxers:

  • my-service.service.ts: Conté la definició del servei.
  • my-service.service.spec.ts: Conté les proves unitàries per al servei.

Pas 2: Definir la lògica del servei

Obrim el fitxer my-service.service.ts i afegim la lògica necessària. Per exemple, crearem un servei que gestiona una llista de tasques:

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

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

  constructor() { }

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

  getTasks(): string[] {
    return this.tasks;
  }

  clearTasks(): void {
    this.tasks = [];
  }
}

Explicació del codi

  • @Injectable({ providedIn: 'root' }): Aquest decorador indica que el servei es pot injectar en qualsevol part de l'aplicació. providedIn: 'root' fa que el servei estigui disponible a nivell global.
  • tasks: Una propietat privada que emmagatzema les tasques.
  • addTask(task: string): Afegeix una tasca a la llista.
  • getTasks(): Retorna la llista de tasques.
  • clearTasks(): Neteja la llista de tasques.

Utilització d'un servei en un component

Pas 1: Injectar el servei

Per utilitzar el servei en un component, primer l'hem d'injectar en el constructor del component. Obrim el fitxer del component, per exemple app.component.ts, i afegim el servei al constructor:

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tasks: string[] = [];

  constructor(private myService: MyService) { }

  ngOnInit(): void {
    this.tasks = this.myService.getTasks();
  }

  addTask(task: string): void {
    this.myService.addTask(task);
    this.tasks = this.myService.getTasks();
  }

  clearTasks(): void {
    this.myService.clearTasks();
    this.tasks = [];
  }
}

Explicació del codi

  • constructor(private myService: MyService): Injecta el servei en el component.
  • ngOnInit(): Obté la llista de tasques quan el component s'inicialitza.
  • addTask(task: string): Afegeix una tasca mitjançant el servei i actualitza la llista de tasques.
  • clearTasks(): Neteja la llista de tasques mitjançant el servei.

Pas 2: Actualitzar la plantilla

Actualitzem la plantilla del component, per exemple app.component.html, per interactuar amb el servei:

<div>
  <h1>Llista de Tasques</h1>
  <input #taskInput type="text" placeholder="Nova tasca">
  <button (click)="addTask(taskInput.value); taskInput.value=''">Afegeix Tasca</button>
  <button (click)="clearTasks()">Neteja Tasques</button>
  <ul>
    <li *ngFor="let task of tasks">{{ task }}</li>
  </ul>
</div>

Explicació del codi

  • #taskInput: Una referència local per obtenir el valor de l'input.
  • (click)="addTask(taskInput.value); taskInput.value=''": Afegeix una tasca i neteja l'input.
  • (click)="clearTasks()": Neteja la llista de tasques.
  • *ngFor="let task of tasks": Itera sobre la llista de tasques i les mostra en una llista no ordenada.

Exercici pràctic

Exercici

  1. Crea un nou servei anomenat UserService que gestioni una llista d'usuaris.
  2. Defineix les següents funcions en el servei:
    • addUser(user: string): Afegeix un usuari a la llista.
    • getUsers(): Retorna la llista d'usuaris.
    • clearUsers(): Neteja la llista d'usuaris.
  3. Injecta el servei en un component i utilitza'l per gestionar una llista d'usuaris en la interfície d'usuari.

Solució

user.service.ts

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

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

  constructor() { }

  addUser(user: string): void {
    this.users.push(user);
  }

  getUsers(): string[] {
    return this.users;
  }

  clearUsers(): void {
    this.users = [];
  }
}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  users: string[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.users = this.userService.getUsers();
  }

  addUser(user: string): void {
    this.userService.addUser(user);
    this.users = this.userService.getUsers();
  }

  clearUsers(): void {
    this.userService.clearUsers();
    this.users = [];
  }
}

app.component.html

<div>
  <h1>Llista d'Usuaris</h1>
  <input #userInput type="text" placeholder="Nou usuari">
  <button (click)="addUser(userInput.value); userInput.value=''">Afegeix Usuari</button>
  <button (click)="clearUsers()">Neteja Usuaris</button>
  <ul>
    <li *ngFor="let user of users">{{ user }}</li>
  </ul>
</div>

Conclusió

En aquest tema, hem après a crear i utilitzar serveis en Angular. Els serveis ens permeten encapsular la lògica de negoci i compartir dades entre components de manera eficient. Hem vist com crear un servei, injectar-lo en un component i utilitzar-lo per gestionar dades. A més, hem practicat aquests conceptes amb un exercici pràctic. En el proper tema, explorarem la injecció de dependències en més detall.

◄ 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