Matumizi ya Huduma katika Angular

Katika somo lililopita tuliunda huduma yetu ya DataService. Sasa hebu tuimporte kwenye kipengele:

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

Katika kiambishi @Component kwenye sifa providers inahitajika kubainisha huduma yetu:

@Component({
	.....
	providers: [ DataService ] // hapa
})

Sasa tutatumia mbinu maalum, inayoitwa ukingizaji wa utegemezi (dependency injection). Kiini chake ni kwamba kwenye mjenzi wa kipengele tunaweza kupitisha huduma yetu kama kigezo na itaingia moja kwa moja kwenye sifa ya faragha ya kipengele chetu. Angalia kwenye msimbo:

export class AppComponent {
	constructor(private dataService: DataService) { // tunaingiza utegemezi
		console.log(this.dataService); // huduma iko kwenye sifa ya faragha
	}
}

Uingizaji wa utegemezi kwa huduma yetu unafanya kazi, kwa sababu tulitumia kiambishi Injectable kwake hapo awali.

Sasa hebu kwenye mjenzi wa darasa la kipengele tupate data kutoka kwa huduma yetu, kwa kupiga simu mbinu inayofaa:

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

Sasa hebu tuonyeshe data iliyopatikana kwenye muundo wa kipengele:

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

Pata bidhaa kutoka kwa huduma yako kwenye kipengele na uzionyeshe kwenye muundo wa kipengele.

Fanya kwenye huduma yako mbinu ya kuongeza bidhaa mpya. Kwenye kipengele fanya kitufe, kubofya kwenye ambacho kitaongeza bidhaa mpya.

Fanya fomu na viingilio viwili na kitufe, kubofya kwenye ambayo kitaongeza bidhaa mpya.