Angular Academy · บทเรียน

การสร้างไลบรารีด้วย ng generate

สร้างโครงร่างโปรเจกต์ไลบรารี

การสร้างไลบรารีด้วย ng generate เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ควรสร้างไลบรารี

เมื่อมีหลายแอปที่ต้องใช้คอมโพเนนต์ บริการ หรือยูทิลิตีเดียวกัน คุณสามารถรวมสิ่งเหล่านั้นเป็น ไลบรารี Angular ได้ ไลบรารีนำกลับมาใช้ใหม่ได้ มีการกำกับรุ่น และเผยแพร่ได้ แทนการคัดลอกโค้ดระหว่างโครงการ

เวิร์กสเปซเก็บไลบรารี

ไลบรารีอยู่ภายใน เวิร์กสเปซ Angular ซึ่งเป็นโฟลเดอร์ที่จัดการด้วย angular.json เพียงไฟล์เดียว และสามารถมีหลายแอปกับหลายไลบรารีได้ คุณสามารถเพิ่มไลบรารีลงในเวิร์กสเปซที่มีอยู่ หรือสร้างเวิร์กสเปซเฉพาะขึ้นมา

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

การสร้างไลบรารี

สคีมา ng generate library (ชื่อย่อ ng g lib) จะสร้างโครงร่างโครงการไลบรารีใหม่ไว้ภายใต้ projects/

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

สิ่งที่ถูกสร้างขึ้น

ไลบรารีมาพร้อมโฟลเดอร์ src/lib ของตัวเอง, บาร์เรล public-api.ts, ไฟล์ ng-package.json (สำหรับการสร้าง) และรายการใน angular.json ไลบรารีนี้เป็นโครงการที่มีองค์ประกอบครบในตัวเองและสร้างได้

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

การเพิ่มคอมโพเนนต์ลงในไลบรารี

สร้างโค้ดลงในไลบรารีโดยระบุเป้าหมายด้วย --project CLI จะวางไฟล์ไว้ในโฟลเดอร์ที่ถูกต้อง

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

คอมโพเนนต์แบบสแตนด์อโลนในไลบรารี

ไลบรารียุคใหม่มักเลือกใช้คอมโพเนนต์แบบสแตนด์อโลน ซึ่งผู้ใช้สามารถนำเข้าได้โดยตรงโดยไม่ต้องใช้ NgModule กำหนดคอมโพเนนต์ด้วย standalone: true เพื่อให้แอปใช้งานได้ด้วยการนำเข้าอย่างง่าย

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

package.json ของไลบรารี

ไลบรารีแต่ละแห่งมี package.json ของตัวเอง ซึ่งกำหนดชื่อ รุ่น และ การพึ่งพาแบบเพียร์ เช่น @angular/core การพึ่งพาแบบเพียร์หมายความว่าแอปที่ใช้ไลบรารีเป็นผู้จัดหา Angular เอง จึงหลีกเลี่ยงการมีสำเนาซ้ำ

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

การพัฒนาร่วมกับแอปภายในเครื่อง

เก็บแอปสาธิตไว้ในเวิร์กสเปซเดียวกันเพื่อทดลองใช้ไลบรารีระหว่างพัฒนา การนำเข้าด้วยชื่อไลบรารีจะชี้ไปยังซอร์สภายในเครื่องผ่านการจับคู่เส้นทางของ TypeScript ใน tsconfig

ไลบรารีกับแอปพลิเคชัน

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

ทำให้ไลบรารีมีขอบเขตชัดเจน

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

ขั้นตอนถัดไป

เมื่อสร้างโครงร่างไลบรารีแล้ว งานที่เหลือคือกำหนด API สาธารณะ สร้าง ไลบรารีให้อยู่ในรูปแบบแพ็กเกจ Angular และ เผยแพร่ ไลบรารี บทเรียนถัดไปจะครอบคลุมแต่ละหัวข้อ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

คุณสร้างไลบรารีได้อย่างไร

สรุปทบทวน

ไลบรารีรวมโค้ดที่นำกลับมาใช้ใหม่ได้สำหรับหลายแอป สร้างไลบรารีด้วย ng generate library ภายในเวิร์กสเปซ ซึ่งจะสร้างโครงร่าง src/lib, public-api.ts, ng-package.json และ package.json ที่มีการพึ่งพาแบบเพียร์ เพิ่มโค้ดด้วย --project เลือกใช้คอมโพเนนต์แบบสแตนด์อโลน และกำหนดขอบเขตของแต่ละไลบรารีให้ชัดเจน

คำถามที่พบบ่อย

บทเรียน “การสร้างไลบรารีด้วย ng generate” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างไลบรารีด้วย ng generate” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างไลบรารีด้วย ng generate”

สร้างโครงร่างโปรเจกต์ไลบรารี คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างไลบรารีด้วย ng generate” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy