Angular-da servicedan foydalanish

Oldingi darsda biz o'zimizning DataService servisimizni yaratdik. Keling endi uni komponentga import qilaylik:

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

@Component dekoratoridagi providers xususiyatiga bizning servisimizni ko'rsatish kerak:

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

Endi biz bog'liqlik injektsiyasi (dependency injection) deb ataladigan maxsus yondashuvdan foydalanamiz. Uning mazmuni shundaki, komponent konstruktorida biz servisimizni parametr sifatida uzatishimiz mumkin va u avtomatik ravishda komponentimizning xususiy xususiyatiga aylanadi. Kodda ko'ring:

export class AppComponent {
	constructor(private dataService: DataService) { // bog'liqlikni injektsiya qilamiz
		console.log(this.dataService); // servis xususiy xususiyatda
	}
}

Bizning servisimiz uchun injektsiya ishlaydi, chunki biz oldin unga Injectable dekoratorini qo'llagan edik.

Keling endi komponent klassining konstruktorida servisimizdan ma'lumotlarni olamiz, kerakli metodni chaqirib:

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

Keling olingan ma'lumotlarni komponentning shablonida chiqaramiz:

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

Mahsulotlaringizni servisingizdan komponentda oling va ularni komponent shablonida chiqaring.

Servisingizda yangi mahsulot qo'shish uchun metod yarating. Komponentda tugma yarating, unga bosilganda yangi mahsulot qo'shiladi.

Ikkita input va tugmali forma yarating, unga bosilganda yangi mahsulot qo'shiladi.