เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน
ดูว่าคอมโพเนนต์แบบสแตนด์อโลนทำให้ Angular ง่ายขึ้นอย่างไร
เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงใช้ Standalone Components
Standalone components ช่วยให้คุณสร้างแอป Angular ได้ โดยไม่ต้องใช้ NgModules คอมโพเนนต์จะประกาศสิ่งที่ต้องใช้ด้วยตนเอง ทำให้ส่วนประกอบต่าง ๆ แยกเป็นอิสระและทำความเข้าใจได้ง่ายขึ้น
ยุคของ NgModule
ตามแนวทางเดิม คอมโพเนนต์ ไดเรกทีฟ และไปป์ทุกอย่างต้องประกาศไว้ภายใน @NgModule โมดูลใช้จัดกลุ่มการประกาศและจัดการการนำเข้า/ส่งออก
สิ่งนี้ทำให้มีโค้ดประกอบมากขึ้นและมีชั้นการอ้างอิงทางอ้อมเพิ่มขึ้น
ปัญหาที่ NgModules ก่อให้เกิด
NgModules ทำให้เกิดความยุ่งยากที่พบบ่อย เช่น ลืมประกาศคอมโพเนนต์ ประกาศคอมโพเนนต์เดียวกันในสองโมดูล สับสนระหว่างการนำเข้ากับการประกาศ และมีโมดูลที่ใช้ร่วมกันขนาดใหญ่ซึ่งดึงโค้ดเข้ามามากเกินไป
แนวคิด Standalone
เมื่อใช้ standalone components แต่ละคอมโพเนนต์จะแสดงรายการสิ่งที่ต้องใช้อย่างชัดเจนผ่านอาร์เรย์ imports ของตนเอง จึงไม่มีโมดูลส่วนกลางที่ต้องรับรู้คอมโพเนนต์นั้น
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: '<p>Hello</p>'
})
export class HelloComponent {}การประกาศสิ่งที่ต้องใช้ด้วยตนเอง
เนื่องจาก standalone component ประกาศสิ่งที่ต้องใช้ด้วยตนเอง คุณจึงอ่านไฟล์เดียวและทราบได้ทุกอย่างที่คอมโพเนนต์นั้นพึ่งพา วิธีนี้ช่วยให้โค้ดชัดเจนและเครื่องมือทำงานได้ดีขึ้น
โค้ดประกอบน้อยลง
ไม่ต้องจับคู่การประกาศและการส่งออกข้ามโมดูลอีกต่อไป คุณนำเข้าคอมโพเนนต์โดยตรงตรงจุดที่ใช้งาน คล้ายกับการทำงานของ ES modules
การตัดโค้ดที่ไม่ใช้ออกได้ดียิ่งขึ้น
Standalone components ทำให้กราฟการพึ่งพาปรากฏอย่างชัดเจน ซึ่งช่วยให้เครื่องมือรวมโค้ดลบโค้ดที่ไม่ได้ใช้ออก และอาจทำให้ชุดโค้ดมีขนาดเล็กลง
การโหลดแบบขี้เกียจที่ง่ายขึ้น
เส้นทางสามารถโหลด standalone component แบบขี้เกียจได้โดยตรงด้วยการนำเข้าแบบไดนามิก โดยไม่ต้องมีตัวห่อหุ้ม feature module
// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)ค่าเริ่มต้นแบบใหม่
ใน Angular รุ่นล่าสุด standalone เป็นค่าเริ่มต้นสำหรับคอมโพเนนต์ที่สร้างใหม่ NgModules ยังคงใช้งานได้ แต่ standalone เป็นแนวทางที่แนะนำสำหรับการพัฒนาต่อไป
การทำงานร่วมกับ NgModules
โค้ดแบบ standalone และแบบใช้โมดูลทำงานร่วมกันได้ standalone component สามารถนำเข้าใน NgModule ได้ และคอมโพเนนต์ที่ใช้ NgModule ก็ใช้การนำเข้าแบบ standalone ได้เช่นกัน จึงช่วยให้ย้ายระบบได้ง่ายขึ้น
สิ่งที่ยังต้องกำหนดค่า
การตั้งค่าระดับแอปพลิเคชัน เช่น เราเตอร์หรือไคลเอ็นต์ HTTP จะจัดเตรียมผ่านผู้ให้บริการของ bootstrapApplication แทนโมดูลราก ซึ่งคุณจะได้เห็นในภายหลัง
ตรวจสอบสั้น ๆ: เหตุผลที่ใช้ Standalone
ประโยชน์หลักของ standalone components คืออะไร
สรุป: เหตุผลที่ใช้ Standalone
Standalone components กำจัดโค้ดประกอบของ NgModule โดยให้แต่ละคอมโพเนนต์ประกาศสิ่งที่ต้องใช้ด้วยตนเอง ส่งผลให้โค้ดชัดเจนขึ้น โหลดแบบขี้เกียจได้ง่ายขึ้น และตัดโค้ดที่ไม่ใช้ออกได้ดียิ่งขึ้น ปัจจุบัน standalone เป็นค่าเริ่มต้นแล้ว ต่อไป: การสร้างคอมโพเนนต์
คำถามที่พบบ่อย
บทเรียน “เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน”
ดูว่าคอมโพเนนต์แบบสแตนด์อโลนทำให้ Angular ง่ายขึ้นอย่างไร คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน
- การสร้างคอมโพเนนต์แบบสแตนด์อโลน
- การนำเข้าดีเพนเดนซีโดยตรง
- การเริ่มต้นแอปแบบสแตนด์อโลน