Servizi e Dependency Injection

L'esempio di applicazione che stiamo via via implementando nel corso della guida permette la gestione di articoli tramite una gerarchia di componenti. Richiamando il codice sviluppato finora, possiamo vedere come la gestione vera e propria dell'elenco degli articoli viene effettuata all'interno del root component:

import { Component } from '@angular/core';
import { Articolo } from './articolo'; 
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'Articoli Tecnici';
  elencoArticoli: Articolo[]; 
  constructor() {
    this.elencoArticoli = [];
  } 
  addArticolo(articolo) {
    this.elencoArticoli.push(articolo);
  }
}

Notiamo in particolare come nel costruttore del componente venga creata una lista di articoli cui viene aggiunto un articolo e come il componente metta a disposizione un metodo per aggiungere nuovi articoli.

È utile ricordare che questo codice è scritto a scopo didattico per evidenziare il ruolo dei componenti ed ha poco senso per una situazione reale. In un'applicazione reale l'elenco degli articoli andrebbero richiesti ad un server e i nuovi articoli andrebbero persistiti sullo stesso server.

In questo caso il lavoro di interazione con il server potrebbe risultare un po' più complesso della semplice gestione di un array di articoli e non sarebbe corretto affidare questo compito ad un componente. Ricordiamo infatti che il compito di un componente consiste nel controllo di una porzione dell'interfaccia utente e contribuisce a realizzare quella che è la view di un'applicazione Web.

Come già avveniva in Angular 1.x, anche in Angular 2 il compito di implementare la logica di business di un'applicazione è delegato ai servizi.

Un servizio in Angular 2 è una classe che implementa funzionalità condivise dai vari elementi di un'applicazione, siano essi componenti che altri servizi. A differenza di Angular 1.x in cui era possibile scegliere tra service, factory, constant e value, con sfumature leggermente diverse e non sempre così chiare, in Angular 2 è stato unificato il tutto con il solo concetto di servizio.

Come utilizzare un servizio, FormBuilder

Abbiamo già avuto modo di usare un servizio nella nostra applicazione d'esempio. Si tratta di FormBuilder, l'oggetto che ci consentiva di semplificare la definizione di una form. Rivediamo brevemente come sfruttiamo FormBuilder nel nostro componente:

import {FormBuilder} from '@angular/forms'; 
... 
export class ArticoloFormReactiveComponent {
  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      txtTitolo: [],
      txtAutore: [],
      txtTesto: []
    });
  }
}

Per utilizzare il servizio è stato sufficiente importarlo nel modulo corrente e prevedere un oggetto di tipo FormBuilder come parametro del costruttore del nostro componente. Le funzionalità del servizio sono immediatamente disponibili senza creare un'istanza del servizio: il sistema di dependency injection di Angular 2 lo fa per noi.

Dependency Injection in Angular 2

La dependency injection è uno dei cardini di Angular. All'interno del framework esso rappresenta un pattern di programmazione di primo piano che fornisce almeno due grandi vantaggi:

• una gestione evoluta delle dipendenze
• la testabilità degli elementi di un'applicazione

Grazie al sistema dependency injection del framework un componente, un servizio o una generica classe si limita a dichiarare nel costruttore gli oggetti di cui ha bisogno. Sarà il sistema a creare le istanze necessarie ed a passarle al costruttore.

Questo stesso meccanismo ci consente di testare un componente o un servizio senza la necessità di coinvolgere le sue dipendenze reali. Possiamo infatti creare dei mock delle dipendenze e verificare le funzionalità specifiche dell'elemento che stiamo implementando.

Senza addentrarci troppo nei dettagli del sistema, possiamo dire che con Angular 2 sono state superate alcune delle limitazioni della versione 1.x. Ad esempio, come per Angular 1.x, anche i servizi di Angular 2 sono dei singleton, cioè esiste una sola loro istanza condivisa tra i diversi utilizzatori. Tuttavia, in Angular 2, si può definire un ambito all'interno del quale un servizio è disponibile, grazie ad un meccanismo di registrazione che vedremo più avanti che definisce una dependency injection gerarchica, basata sulla struttura dell'albero dei componenti di un'applicazione.