Utilizzo del servizio in Angular

Nella lezione precedente abbiamo creato il nostro servizio DataService. Ora importiamolo nel componente:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // qui

Nel decoratore @Component nella proprietà providers dobbiamo specificare il nostro servizio:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // qui
})

Ora utilizzeremo un approccio speciale, chiamato iniezione di dipendenze (dependency injection). La sua essenza consiste nel fatto che nel costruttore del componente possiamo passare il nostro servizio come parametro e automaticamente finirà in una proprietà privata del nostro componente. Guardate nel codice:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // iniettiamo la dipendenza
    console.log(this.dataService); // servizio nella proprietà privata
  }
}

L'iniezione per il nostro servizio funziona, perché in precedenza abbiamo applicato ad esso il decoratore Injectable.

Ora nel costruttore della classe del componente otteniamo i dati dal nostro servizio, richiamando il metodo corrispondente:

app/app.component.tsexport class AppComponent {
  public data: string[] = [];
  
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

Ora visualizziamo i dati ottenuti nel template del componente:

app/app.component.html<ol>
  <li *ngFor="elem of data">
    {{ elem }}
  </li>
</ol>