I servizi sono uno dei concetti più importanti in Angular e sono fondamentali per la creazione di applicazioni robuste e scalabili. Permettono di separare la logica di business dalle componenti dell'interfaccia utente, rendendo l'applicazione più modulare e manutenibile. In Angular, i servizi sono classi che contengono business logic riutilizzabile, fornendo dati e funzionalità a componenti diversi all'interno di un'applicazione.

I servizi possono essere facilmente condivisi tra più componenti e moduli dell'applicazione e possono essere utilizzati per effettuare chiamate a API esterne, gestire lo stato dell'applicazione e fornire funzionalità di autenticazione e autorizzazione. La creazione di un servizio in Angular è quindi un passo fondamentale per la creazione di un'applicazione robusta e scalabile.

Per creare un servizio in Angular utilizzando la console, digitiamo il seguente comando:

ng generate service my-service

Questo comando genera una nuova classe TypeScript con il nome my-service.service.ts nella cartella "app" del nostro progetto. Apriamo la classe appena generata e diamo un'occhiata alla al suo interno.

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  
  constructor() { }
  
  // logica del servizio
}

Quello che salta subito agli occhi è il decoratore @Injectable() che indica che il servizio MyService può essere iniettato in qualsiasi componente o altro servizio all'interno dell'applicazione.

Una volta creato un servizio in Angular, è possibile aggiungere metodi al suo interno per fornire funzionalità specifiche. Ad esempio, è possibile creare un metodo "getData" che restituisce dei dati in modo da poterli utilizzare all'interno della nostra applicazione.

Ecco un esempio di come creare un metodo getData in un servizio Angular:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  private products = [
    { id: 1, name: 'Prodotto 1', price: 9.99 },
    { id: 2, name: 'Prodotto 2', price: 19.99 },
    { id: 3, name: 'Prodotto 3', price: 29.99 }
  ];

  constructor() { }
  
  getData() {
    return this.products;
  }
}

In questo esempio, il servizio MyService contiene un array di dati "products", che rappresenta una lista di prodotti. Il metodo getData restituisce semplicemente questo array di dati. Ovviamente, nella realtà, i dati del servizio verrebbero recuperati da un'API o da una fonte di dati esterna.

Utilizzo del servizio in Angular

Per utilizzare il servizio in Angular, è necessario iniettarlo come dipendenza all'interno della classe in cui deve essere utilizzato. Ci sono diversi modi per iniettare un servizio in una classe ma il modo più comune è utilizzare il costruttore della classe.

Ecco un esempio di come utilizzare il servizio MyService all'interno di un componente Angular:

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

@Component({
  selector: 'app-my-component',
  template: '<h1>{{ data }}</h1>'
})
export class MyComponent implements OnInit {
  
  products: ({ price: number; name: string; id: number })[] = [];

  constructor(private myService: MyService) {
  }

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

Nell'esempio sopra, il servizio MyService è stato iniettato all'interno del costruttore della classe MyComponent. La variabile myService è stata dichiarata come privata per evitare che sia accessibile da altri componenti o servizi e infine la variabile products del componente è stata valorizzata utilizzando il metodo getData() del servizio MyService.