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

HOME

En aquest tema, aprendrem a crear i utilitzar serveis a 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 diferents components de l'aplicació.

Objectius

Comprendre què és un servei a Angular.
Aprendre a crear un servei.
Injectar i utilitzar un servei en un component.

Què és un servei?

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

Fer sol·licituds HTTP.
Gestionar dades compartides.
Implementar lògica de negoci.

Crear un servei

Pas 1: Generar un servei

Angular CLI proporciona una manera fàcil de generar serveis. Utilitzarem la comanda ng generate service per crear un nou servei.

ng generate service my-service

Aquesta comanda crearà 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 el servei

El fitxer my-service.service.ts tindrà un aspecte similar a aquest:

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

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

  constructor() { }

  getData(): string {
    return 'Hello from MyService!';
  }
}

Explicació del codi

@Injectable({ providedIn: 'root' }): Aquest decorador indica que el servei es pot injectar a qualsevol part de l'aplicació. providedIn: 'root' fa que el servei estigui disponible a nivell global.
getData(): Aquest és un mètode simple que retorna una cadena de text. En una aplicació real, aquest mètode podria fer una sol·licitud HTTP o realitzar alguna lògica de negoci.

Utilitzar un servei en un component

Pas 1: Injectar el servei

Per utilitzar el servei en un component, primer hem d'injectar-lo en el constructor del component.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  data: string;

  constructor(private myService: MyService) { }

  ngOnInit(): void {
    this.data = this.myService.getData();
  }
}

Explicació del codi

private myService: MyService: Aquesta línia injecta el servei MyService en el component.
ngOnInit(): Aquest mètode s'executa quan el component s'inicialitza. Aquí, estem cridant el mètode getData() del servei i assignant el resultat a la propietat data.

Pas 2: Mostrar les dades en la plantilla

Finalment, podem mostrar les dades en la plantilla del component.

<!-- my-component.component.html -->
<p>{{ data }}</p>

Exercici pràctic

Exercici 1: Crear i utilitzar un servei

Crea un nou servei anomenat DataService que tingui un mètode getData() que retorni una llista de cadenes de text.
Injecta el servei en un component i mostra les dades en la plantilla del component.

Solució

Pas 1: Crear el servei

ng generate service data

Pas 2: Definir el servei

// data.service.ts
import { Injectable } from '@angular/core';

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

  constructor() { }

  getData(): string[] {
    return ['Data 1', 'Data 2', 'Data 3'];
  }
}

Pas 3: Injectar el servei en un component

// my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  data: string[];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.data = this.dataService.getData();
  }
}

Pas 4: Mostrar les dades en la plantilla

<!-- my-component.component.html -->
<ul>
  <li *ngFor="let item of data">{{ item }}</li>
</ul>

Conclusió

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

Crear i utilitzar serveis

Objectius

Què és un servei?

Crear un servei

Pas 1: Generar un servei

Pas 2: Definir el servei

Explicació del codi

Utilitzar un servei en un component

Pas 1: Injectar el servei

Explicació del codi

Pas 2: Mostrar les dades en la plantilla

Exercici pràctic

Exercici 1: Crear i utilitzar un servei

Solució

Pas 1: Crear el servei

Pas 2: Definir el servei

Pas 3: Injectar el servei en un component

Pas 4: Mostrar les dades en la plantilla

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