È una classe Angular utilizzata per implementare funzionalità indipendenti da una view specifica, o per fornire dati e logica condivisi per più componenti.
I services vengono iniettati in altri componenti o servizi tramite dependency injection.
La dependecy injection è un design pattern e un meccanismo per la creazione e la distribuzione di parti di una applicazione all'interno di altre parti che le richiedono.
Un componente potrebbe avere la necessità di utilizzare un service per ottenere dei dati o per utilizzare delle funzioni.
Se un componente "A" si affida ad un altra entità "B", si dice che "A" dipende da "B" e che "B" è una dipendenza di "A".
Solitamente, i services sono parti di logica o dati che vengono condivisi in più componenti.
È logico inserirli in una cartella shared.
Non sempre, un service è condiviso per l'intera applicazione.
Il nome del file deve rispecchiare il seguente pattern:
service-name.service.ts
-src
--app
---shared
----logging.service.ts /* src/app/shared/logging.service.ts */
export class LoggingService {
}Il service, per poter essere utilizzato, va prima definito
nell'array providers, all'interno del decorator @Component
/* src/app/app.component.ts */
import { Component } from '@angular/core';
import { LoggingService } from '../shared/logging.service';
@Component({
providers:[LoggingService],
...
})
export class AppComponent {
}Il service va poi iniettato, tramite dependency injection, nel
componente tramite il suo costruttore
/* src/app/app.component.ts */
import { Component } from '@angular/core';
import { LoggingService } from '../shared/logging.service';
@Component({
...
})
export class AppComponent {
constructor(private ls: LoggingService) {}
}La dependency injection in Angular è di tipo gerarchica: i figli del componente nel quale viene iniettato il service riceveranno automaticamente le funzionalità del servizio stesso.
Se ChildComponent è figlio di AppComponent (dove è stato iniettato il servizio) allora non è necessario includerlo nell'array providers
/* src/app/app.component.ts */
import { Component } from '@angular/core';
import { LoggingService } from '../shared/logging.service';
@Component({
...
})
export class ChildComponent {
constructor(private ls: LoggingService) {}
}Il service, grazie ad @Injectable, può ricevere, tramite dependency injection, un altro service.
/* src/app/shared/logging.service.ts
*/
import { Injectable } from '@angular/core';
import { OtherService } from '../shared/other.service';
@Injecatable()
export class LoggingService {
constructor(private os: OtherService) {}
}Creare applicazioni moderne significa fare un passo avanti anche sui concetti oramai consolidati in programmazione.
Con le attuali esigenze degli utenti, le applicazioni devono essere sempre più reattive e, allo stesso tempo, essere leggere da caricare ed eseguire.
Con queste problematiche è nata la programmazione reattiva (Reactive Programming): un paradigma di programmazione che, più che basarsi sugli oggetti, si basa su flussi di dati (tipicamente asincroni) e sulla possibilità che più entità possano "abbonarsi" (subscribe) a questi flussi.