การสร้างเซอร์วิสใน Angular

มาเริ่มเรียนเกี่ยวกับเซอร์วิสด้วยการสร้างเซอร์วิสของเราเองกัน สำหรับสิ่งนี้ ในโฟลเดอร์ test/src/app สร้างไฟล์ data.service.ts ให้เซอร์วิสของเรา รับผิดชอบในการแสดงข้อมูลบางส่วนบน หน้าจอ

สร้างคลาสสำหรับเซอร์วิสของเรา:

export class DataService {
	
}

ตอนนี้เราต้องการดีโคเรเตอร์ Injectable การใช้งานมันจะทำให้ คลาสเซอร์วิสสามารถถูก inject เข้าไปในคลาสคอมโพเนนต์ได้ เราจะพูดถึงการ inject ในบทเรียนหน้า ตอนนี้ให้นำเข้า ดีโคเรเตอร์ที่ต้องการ:

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

export class DataService {
	
}

ใช้มันกับคลาสของเรา:

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

@Injectable()
export class DataService {
	
}

ตอนนี้ทำให้ในคลาสของเรา มีข้อมูลบางส่วน โดยปกติแล้วในแอปพลิเคชัน Angular จะมีการโหลดข้อมูลจาก เซิร์ฟเวอร์ แต่เพื่อวัตถุประสงค์ทางการศึกษาเราจะ ใช้อาร์เรย์ สร้างมันในพร็อพเพอร์ตี้แบบ private

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,
	},
]