Korišćenje servisa u Angularu

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

import { 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:

@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:

export 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:

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

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

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

Dobavite proizvode iz vašeg servisa u komponenti i prikažite ih u template-u komponente.

Napravite u vašem servisu metodu za dodavanje novog proizvoda. U komponenti napravite dugme, čijim će se klikom dodavati novi proizvod.

Napravite formu sa dva input polja i dugmetom, čijim će se pritiskom dodavati novi proizvod.