Els serveis a Angular són classes que encapsulen la lògica de negoci, la lògica de dades o qualsevol altra funcionalitat que es pugui compartir entre diferents components de l'aplicació. Els serveis permeten que el codi sigui més modular, reutilitzable i fàcil de mantenir.

• Reutilitzables: Un servei pot ser utilitzat per múltiples components.
• Encapsulació: Permeten encapsular la lògica de negoci i les operacions de dades.
• Injecció de dependències: Angular proporciona un mecanisme per injectar serveis en components o altres serveis.

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

Això generarà dos fitxers:

• my-service.service.ts
• my-service.service.spec.ts (per a proves unitàries)

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

• @Injectable: Aquest decorador indica que la classe pot ser injectada com una dependència. L'opció providedIn: 'root' fa que el servei estigui disponible a tota l'aplicació.
• getData(): Un mètode simple que retorna una cadena de text.

Per utilitzar el servei en un component, primer cal injectar-lo en el constructor del component. Suposem que tenim un component anomenat app.component.ts.

• constructor(private myService: MyService): Injecta el servei MyService en el component.
• ngOnInit(): En el cicle de vida del component, el mètode ngOnInit s'utilitza per inicialitzar la propietat data amb el valor retornat pel servei.

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

Crear un servei que proporcioni una llista d'elements i utilitzar aquest servei en un component per mostrar la llista.

1. Crear el servei:

   ng generate service item
   

2. Definir el servei (item.service.ts):

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class ItemService {
   
     constructor() { }
   
     getItems() {
       return ['Item 1', 'Item 2', 'Item 3'];
     }
   }
   

3. Injectar i utilitzar el servei en un component (app.component.ts):

   import { Component, OnInit } from '@angular/core';
   import { ItemService } from './item.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     items: string[];
   
     constructor(private itemService: ItemService) { }
   
     ngOnInit() {
       this.items = this.itemService.getItems();
     }
   }
   

4. Mostrar la llista en la plantilla (app.component.html):

   <ul>
     <li *ngFor="let item of items">{{ item }}</li>
   </ul>
   

Si has seguit els passos correctament, hauries de veure una llista d'elements mostrada en la pàgina principal de l'aplicació.

En aquesta secció, hem après què són els serveis a Angular, com crear-los i com utilitzar-los en components. Els serveis són una eina poderosa per encapsular la lògica de negoci i les operacions de dades, fent que el codi sigui més modular i fàcil de mantenir. En el proper tema, explorarem com crear i utilitzar serveis més avançats i com gestionar la injecció de dependències.