Un servei en Angular és una classe que conté lògica empresarial, dades o funcionalitats que es poden compartir entre diferents components de l'aplicació. Els serveis permeten separar la lògica de negoci de la lògica de presentació, facilitant així la reutilització del codi i la seva mantenibilitat.

• Reutilitzables: Els serveis es poden utilitzar en múltiples components.
• Injectables: Es poden injectar en components o altres serveis mitjançant el sistema d'injecció de dependències d'Angular.
• Encapsulació: Permeten encapsular la lògica de negoci, mantenint els components més nets i enfocats en la presentació.

Angular CLI proporciona una manera fàcil de generar serveis. Utilitza el següent comandament per crear un servei:

Aquest comandament 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.

A continuació, es mostra un exemple bàsic d'un servei que proporciona dades:

• @Injectable: El decorador @Injectable indica que aquesta classe pot ser injectada com una dependència. L'opció providedIn: 'root' fa que el servei estigui disponible a nivell global de l'aplicació.
• data: Una propietat privada que emmagatzema un array de cadenes.
• getData(): Un mètode públic que retorna les dades emmagatzemades.

Per utilitzar el servei en un component, primer cal injectar-lo en el constructor del component:

• MyService: Importem el servei MyService.
• constructor(private myService: MyService): Injectem el servei en el constructor del component.
• ngOnInit(): Utilitzem el mètode getData() del servei per obtenir les dades i assignar-les a la propietat data del component.

Crear un servei que proporcioni una llista de productes i utilitzar-lo en un component per mostrar aquests productes.

1. Generar el servei:

   ng generate service product
   

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

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class ProductService {
     private products: string[] = ['Producte 1', 'Producte 2', 'Producte 3'];
   
     constructor() { }
   
     getProducts(): string[] {
       return this.products;
     }
   }
   

3. Crear un component:

   ng generate component product-list
   

4. Utilitzar el servei en el component (product-list.component.ts):

   import { Component, OnInit } from '@angular/core';
   import { ProductService } from '../product.service';
   
   @Component({
     selector: 'app-product-list',
     templateUrl: './product-list.component.html',
     styleUrls: ['./product-list.component.css']
   })
   export class ProductListComponent implements OnInit {
     products: string[];
   
     constructor(private productService: ProductService) { }
   
     ngOnInit(): void {
       this.products = this.productService.getProducts();
     }
   }
   

5. Mostrar els productes en la plantilla (product-list.component.html):

   <ul>
     <li *ngFor="let product of products">{{ product }}</li>
   </ul>
   

Després de seguir els passos anteriors, hauríeu de veure una llista de productes mostrada en el component ProductListComponent.

En aquesta secció, hem après què són els serveis en 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 compartir dades entre components, millorant així la modularitat i mantenibilitat de les aplicacions Angular.