Angularда сервис яратиш

Келгил, сервисларни ўрганишни ўзимизнинг сервисимизни яратишдан бошлаймиз. Бунинг учун test/src/app папкасида data.service.ts файлини яратамиз. Бизнинг сервисимиз экранга баъзи маълумотларни чиқариш учун жавобгар бўлсин.

Бизнинг сервисимиз учун класс яратамиз:

export class DataService {
	
}

Энди бизга Injectable декоратори керак. Уни қўллаш сервис классасини компонент классасига киритиш имконини беради. Киритиш хакида кейинги дарсда сўзлашамиз. Ҳозирча керакли декораторни импорт қиламиз:

import { Injectable } from '@angular/core';

export class DataService {
	
}

Уни бизнинг классга қўллаймиз:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
	
}

Энди бизнинг класса баъзи маълумотлар бўлишини таъминлаймиз. Одатда Angular иловаларида сервердан маълумотлар юкланadi, лекин биз ўқув мақсадида массивдан фойдаланамиз. Уни хусусий хусусият сифатида яратамиз:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];
}

Энди маълумот олиш учун метод ёзамиз:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	getData(): string[] {
		return this.data;
	}
}

Бизнинг сервис тайёр. Кейинги дарсда биз уни компонент классасига улаймиз.

Ўзинггизнинг сервисингизни яратинг, у объектлар массивини товарлар билан қайтарсин:

[
	{
		name: 'prod1',
		cost: 100,
	},
	{
		name: 'prod2',
		cost: 200,
	},
	{
		name: 'prod3',
		cost: 300,
	},
]