Angular'да сервисти колдонуу

Акыркы сабакта биз өзүбүздүн колдонмо сервисибизди DataService түздүк. Эми аны компонентке импорттолуп көрөлү:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // бул жерде

@Component декораторунда providers касиетине биздин сервисибизди көрсөтүү керек:

@Component({
	.....
	providers: [ DataService ] // бул жерде
})

Эми биз көз карандылыкты киргизүү (dependency injection) деп аталган атайын жолдорду колдонобуз. Анын мисалы компоненттин конструкторуна биз сервисибизди параметр катары өткөрө алабыз жана ал автоматтык түрдө компоненттин жеке касиетине өтөт. Коддо караңыз:

export class AppComponent {
	constructor(private dataService: DataService) { // көз карандылыкты киргизебиз
		console.log(this.dataService); // сервис жеке касиетте
	}
}

Биздин сервиске көз карандылыкты киргизүү иштейт, анткени биз ага мурда Injectable декораторун колдонгонбуз.

Эми компоненттин классынын конструкторунда сервисибизден тиешелүү методду чакырып, маалыматтарды алалы:

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

Алынган маалыматтарды компоненттин темплейтинде чыгаралы:

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

Сервисиңизден товарларды компонентте алып, аларды компоненттин темплейтинде чыгарыңыз.

Сервисиңизде жаңы товар кошуу үчүн метод жасаңыз. Компонентте басканда жаңы товар кошула турган баскыч жасаңыз.

Эки инпуту жана баскычы бар форма жасаңыз, басканда жаңы товар кошулсун.