Angular တွင် Service ဖန်တီးခြင်း

Services များကို လေ့လာခြင်းကို ကိုယ်ပိုင် service တစ်ခုဖန်တီးခြင်းဖြင့် စတင်ကြပါစို့။ ၎င်းအတွက် test/src/app ဖိုလ်ဒါထဲတွင် data.service.ts ဖိုင်ကို ဖန်တီးပါမည်။ ကျွန်ုပ်တို့၏ service သည် စခရင်ပေါ်သို့ အချို့သော အချက်အလက်များကို ပြသရန် တာဝန်ယူရမည်။

ကျွန်ုပ်တို့၏ service အတွက် class ဖန်တီးကြပါစို့။

export class DataService {
	
}

ယခု ကျွန်ုပ်တို့အတွက် decorator Injectable လိုအပ်ပါသည်။ ၎င်း၏အသုံးပြုခြင်းက service class ကို component class ထဲသို့ ထည့်သွင်း နိုင်စေရန် ခွင့်ပြုပါလိမ့်မည်။ ထည့်သွင်းခြင်းအကြောင်းကို နောက်သင်ခန်းစာတွင် ဆွေးနွေးပါမည်။ ယခုအတွက် လိုအပ်သော decorator ကို import လုပ်ပါမည်။

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

export class DataService {
	
}

၎င်းကို ကျွန်ုပ်တို့၏ class သို့ အသုံးပြုပါမည်။

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

@Injectable()
export class DataService {
	
}

ယခု ကျွန်ုပ်တို့၏ class ထဲတွင် အချို့သော အချက်အလက်များ ရှိစေရန် ပြုလုပ်ပါမည်။ ပုံမှန်အားဖြင့် Angular applications များတွင် ဆာဗာမှ အချက်အလက်များကို လုပ်ဆောင်သော်လည်း သင်ကြားရေးရည်ရွယ်ချက်များအတွက် array တစ်ခုကို အသုံးပြုပါမည်။ ၎င်းကို private property အဖြစ် ဖန်တီးပါမည်။

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

ယခု အချက်အလက်များရယူရန် method ကို ရေးသားပါမည်။

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

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

ကျွန်ုပ်တို့၏ service ပြင်ဆင်ပြီးဖြစ်သည်။ နောက်သင်ခန်းစာတွင် ၎င်းကို component class သို့ ချိတ်ဆက်ပါမည်။

ထုတ်ကုန်များပါဝင်သော object array ကို ပြန်ပေးမည့် ကိုယ်ပိုင် service တစ်ခုဖန်တီးပါ။

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