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

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

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

data.service.tsexport class DataService {
  
}

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

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

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

data.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  
}

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

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

เขียนเมธอดสำหรับรับข้อมูล:

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

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

เซอร์วิสของเราพร้อมแล้ว ในบทเรียนถัดไปเรา จะเชื่อมต่อมันกับคลาสคอมโพเนนต์

Задание 1

สร้างเซอร์วิสของคุณเอง ซึ่งจะคืนค่า อาร์เรย์ของอ็อบเจ็กต์สินค้า:

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