บริการและ Injectable
สร้างบริการที่ฉีดเข้าได้สำหรับตรรกะที่ใช้ร่วมกัน
บริการและ Injectable เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
บริการและ Injectable
บริการ คือคลาสที่เก็บตรรกะหรือสถานะซึ่งนำกลับมาใช้ซ้ำได้ เช่น การดึงข้อมูลหรือที่เก็บข้อมูลร่วม Angular จะสร้างและแบ่งปันบริการผ่าน การฉีดการพึ่งพา
เหตุผลที่ควรใช้บริการ
คอมโพเนนต์ควรมุ่งเน้นที่มุมมอง ย้ายตรรกะทางธุรกิจ การเรียก API และสถานะร่วมไปไว้ในบริการ เพื่อให้สามารถนำกลับมาใช้ซ้ำและทดสอบแยกกันได้
ตัวตกแต่ง Injectable
กำกับคลาสบริการด้วย @Injectable เพื่อให้ Angular สร้างคลาสดังกล่าวและฉีดให้ในจุดที่จำเป็นได้
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' จะลงทะเบียนบริการกับตัวฉีดระดับรากของแอปพลิเคชัน Angular จะสร้าง อินสแตนซ์ร่วมเพียงหนึ่งเดียว (ซิงเกิลตัน) สำหรับทั้งแอป
ผู้ให้บริการที่ตัดออกจากทรีได้
เนื่องจากประกาศผู้ให้บริการไว้ในคลาสด้วย providedIn บริการที่ไม่ได้ใช้งานจึงสามารถถูกตัดออกจากชุดรวมโดยอัตโนมัติ
บริการที่มีสถานะ
บริการมักเก็บสถานะไว้ เมื่อใช้สัญญาณ ให้เปิดเผยสถานะแบบตอบสนองจากบริการ
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}บริการที่มีเมธอด
เพิ่มเมธอดที่คอมโพเนนต์สามารถเรียกใช้เพื่อดำเนินการหรือดึงข้อมูลได้
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}การสร้างบริการ
CLI จะสร้างโครงบริการให้ โดยเพิ่มตัวตกแต่ง Injectable ไว้แล้ว
ng g service dataซิงเกิลตันแบ่งปันสถานะ
เนื่องจากบริการระดับรากเป็นซิงเกิลตัน คอมโพเนนต์ทุกตัวที่ฉีดบริการนี้จึงเห็นอินสแตนซ์และสถานะเดียวกัน นี่คือวิธีที่คอมโพเนนต์ใช้แบ่งปันข้อมูล
บริการสามารถฉีดบริการอื่นได้
บริการหนึ่งสามารถพึ่งพาบริการอื่นได้ เช่น บริการข้อมูลสามารถใช้บริการ HttpClient เพื่อส่งคำขอ
กำหนดหน้าที่ของบริการให้ชัดเจน
กำหนดความรับผิดชอบที่ชัดเจนเพียงหนึ่งอย่างให้แต่ละบริการ บริการขนาดเล็กที่มุ่งเน้นหน้าที่เดียวจะทดสอบและนำกลับมาใช้ซ้ำได้ง่ายกว่าบริการขนาดใหญ่ที่ทำหลายอย่าง
ตรวจสอบอย่างรวดเร็ว: Injectable
การลงทะเบียนบริการซิงเกิลตัน
สรุป: บริการ
คุณได้เรียนรู้ว่าบริการเก็บตรรกะและสถานะที่นำกลับมาใช้ซ้ำได้ กำกับด้วย @Injectable และใช้ providedIn: root เพื่อลงทะเบียนซิงเกิลตันสำหรับทั้งแอป บริการสามารถแบ่งปันสถานะระหว่างคอมโพเนนต์และพึ่งพาบริการอื่นได้ ต่อไป: ฟังก์ชัน inject
คำถามที่พบบ่อย
บทเรียน “บริการและ Injectable” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “บริการและ Injectable” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “บริการและ Injectable”
สร้างบริการที่ฉีดเข้าได้สำหรับตรรกะที่ใช้ร่วมกัน คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “บริการและ Injectable” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บริการและ Injectable
- ฟังก์ชัน inject
- ผู้ให้บริการและขอบเขต
- โทเค็นการฉีด