Korišćenje servisa u Angularu

U prethodnoj lekciji smo napravili sopstveni servis DataService. Hajde sada da ga uvezemo u komponentu:

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

U dekoratoru @Component u svojstvu providers treba da navedemo naš servis:

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

Sada ćemo iskoristiti poseban pristup, koji se zove ubrizgavanje zavisnosti (dependency injection). Njegova suština se sastoji u tome što u konstruktoru komponente možemo proslediti naš servis kao parametar i on će automatski biti dostupan kao privatno svojstvo naše komponente. Pogledajte u kodu:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // ubrizgavamo zavisnost
    console.log(this.dataService); // servis je u privatnom svojstvu
  }
}

Ubrizgavanje za naš servis radi, jer smo mu prethodno primenili dekorator Injectable.

Hajde sada u konstruktoru klase komponente da dobijemo podatke iz našeg servisa, pozivajući odgovarajuću metodu:

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

Hajde da prikažemo dobijene podatke u template-u komponente:

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