Impareremo cosa è un servizio Angular e poi creeremo un esempio con l’ultima versione di Angular 9.

Un servizio Angular è un singleton che può essere cablato con componenti o altri servizi tramite Dependency Injection.

> ✋✋ Unisciti al nostro gruppo Facebook 👈 per discutere di qualsiasi cosa relativa allo sviluppo Angular.

Secondo Wikipedia:

Nell’ingegneria del software, la dependency injection è una tecnica per cui un oggetto fornisce le dipendenze di un altro oggetto.

Non lasciatevi intimidire da questo termine, significa semplicemente che Angular (o una parte di Angular, l’iniettore) si occupa di istanziare i servizi e fornisce l’istanza al componente richiedente.

> ✋✋ Controlla anche Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

Secondo i documenti di Angular:

DI è cablato nel framework Angular e usato ovunque per fornire ai nuovi componenti i servizi o altre cose di cui hanno bisogno. I componenti consumano servizi; cioè, puoi iniettare un servizio in un componente, dando al componente l’accesso a quella classe di servizio.

Puoi usare i servizi per organizzare e condividere il codice nella tua app

Come definire un servizio Angular?

Per definire una classe come servizio in Angular, usa il decoratore @Injectable() per fornire i metadati che permettono ad Angular di iniettarla in un componente come dipendenza.

È necessario fornire un servizio prima che sia disponibile. Questo può essere fatto in tre modi:

• Dai metadati del servizio passati al decoratore @Injectable() (Il servizio sarà disponibile ovunque),
• Dall’array dei provider, in un modulo specifico (Il servizio è disponibile solo ai componenti e ai servizi del modulo),
• Dall’array dei provider in un componente specifico (Il servizio è disponibile solo al componente).

Angular 9 Service by Example

Creiamo ora un servizio di esempio.

Assicurati di avere un progetto Angular creato e Angular CLI v9 installato.

Andate alla vostra interfaccia a riga di comando e navigate nella cartella del vostro progetto:

$ cd your-angular-project

Poi, generate un nuovo servizio eseguendo il seguente comando:

$ ng generate service my-example

Aprite il file src/app/my-example.service.ts:

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

Grazie alla proprietà providedIn, non c’è bisogno di fare altro per iniziare a usare questo servizio tranne che implementare la funzionalità che deve fornire. il valore root si riferisce al modulo root dell’app.

Puoi anche iniettare altri servizi nel tuo nuovo servizio – per esempio, il servizio integrato HttpClient – attraverso il suo costruttore:

import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}

Dopo aver implementato i metodi del tuo servizio, puoi importarlo e iniettarlo in altri componenti e chiamare i metodi pubblici del tuo servizio nel tuo componente.

Secondo i documenti di Angular:

In genere, il compito di un componente è quello di abilitare l’esperienza dell’utente e nulla più. Un componente dovrebbe presentare proprietà e metodi per il data binding, al fine di mediare tra la vista (resa dal template) e la logica dell’applicazione.

Un componente può delegare alcuni compiti ai servizi, come il recupero dei dati dal server, la convalida dell’input dell’utente, o il log direttamente alla console.

Definendo tali compiti di elaborazione in una classe di servizio iniettabile, si rendono tali compiti disponibili a qualsiasi componente.