Palvelun käyttö Angularissa

Edellisessä oppitunnissa loimme oman palvelun DataService. Tuotaamme sen nyt komponenttiin:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // tässä

@Component -dekoraattorin providers -ominaisuuteen on määritettävä palvelumme:

@Component({
	.....
	providers: [ DataService ] // tässä
})

Nyt käytämme erikoista lähestymistapaa, jota kutsutaan riippuvuuden injektoinniksi (dependency injection). Sen ydin on, että komponentin konstruktorissa voimme välittää palvelumme parametrina, ja se päätyy automaattisesti komponenttimme yksityiseen ominaisuuteen. Katso koodista:

export class AppComponent {
	constructor(private dataService: DataService) { // injektoidaan riippuvuus
		console.log(this.dataService); // palvelu yksityisessä ominaisuudessa
	}
}

Riippuvuuden injektointi palveluumme toimii, koska käytimme sille aiemmin Injectable -dekoraattoria.

Saadaan nyt komponenttiluokan konstruktorissa data palvelustamme kutsumalla vastaavaa metodia:

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

Esitetään saatu data komponentin templatessa:

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

Hae tuotteet palvelustasi komponenttiin ja esitä ne komponentin templatessa.

Tee palveluusi metodi uuden tuotteen lisäämiseksi. Tee komponenttiin painike, jota klikkaamalla lisätään uusi tuote.

Tee lomake, jossa on kaksi syöttökenttää ja painike, jota painamalla lisätään uusi tuote.