Service сохта дар Angular

Биёед омӯзиши service-ҳоро бо сохтани service-и фардии худ оғоз кунем. Барои ин дар пӯшаи test/src/app файли data.service.ts месозем. Бигзор service-и мо барои чоп кардани баъзе маълумот ба экран масъул бошад.

Классро барои service-и мо созем:

export class DataService {
	
}

Ҳоло ба декоратори Injectable ниёз дорем. Истифодаи он имкон медиҳад, ки класси service-ро ба синфи componentворид кардан мумкин бошад. Мо дар бораи воридкунӣ дар дарси оянда сӯҳбат хоҳем кард. Ва ҳоло аз кофии зарурӣ ворид мекунем:

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

export class DataService {
	
}

Онро ба синфи мо истифода барем:

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

@Injectable()
export class DataService {
	
}

Ҳоло чунон мекунем, ки дар синфи мо баъзе маълумот бошад. Одатан дар барномаҳои Angular бор кардани маълумот аз сервер сурат мегирад, аммо мо барои мақсадҳои таълимӣ массив истифода мебарем. Онро дар хосияти хусусӣ месозем:

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

Ҳоло методро барои гирифтани маълулот менависем:

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

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

Service-и мо омода аст. Дар дарси оянда мо онро ба синфи component пайваст хоҳем кард.

Service-и худро созед, ки массив аз объектҳои боварӣ медиҳад:

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