การสร้างโค้ดด้วย ng generate
สร้างโครงร่างคอมโพเนนต์ บริการ และองค์ประกอบอื่น ๆ
การสร้างโค้ดด้วย ng generate เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้างโค้ดด้วย ng generate
คำสั่ง ng generate (เขียนย่อเป็น ng g) จะสร้างโครงส่วนประกอบพื้นฐานของ Angular พร้อมโค้ดตั้งต้นและแบบแผนการตั้งชื่อที่ถูกต้อง
การสร้างคอมโพเนนต์
สร้างคอมโพเนนต์แบบสแตนด์อโลนด้วยคำสั่งเดียว
ng generate component hello
# short form:
ng g component helloสิ่งที่ถูกสร้างขึ้น
คำสั่งนี้จะสร้าง hello.component.ts, .html, สไตล์ชีต และการทดสอบ .spec.ts พร้อมใช้สแตนด์อโลนเป็นค่าเริ่มต้น
การสร้างลงในโฟลเดอร์
ระบุเส้นทางเพื่อวางคอมโพเนนต์ไว้ในโฟลเดอร์ย่อย
ng g component features/dashboardการสร้างบริการ
สร้างบริการที่สามารถฉีดใช้งานได้ด้วยแบบแผนบริการ
ng g service data
# creates data.service.ts with @Injectableการสร้างคำสั่ง
คำสั่งแบบสแตนด์อโลนจะถูกสร้างด้วยวิธีเดียวกัน
ng g directive highlightการสร้างไพป์
สร้างไพป์แบบกำหนดเองสำหรับแปลงข้อมูลในแม่แบบ
ng g pipe truncateการสร้างตัวป้องกัน
ตัวป้องกันเส้นทางใช้ป้องกันการนำทาง CLI จะสร้างโครงตัวป้องกันแบบฟังก์ชันให้
ng g guard authการแสดงตัวอย่างโดยไม่สร้างจริง
ใช้แฟล็ก dry-run เพื่อดูตัวอย่างสิ่งที่จะถูกสร้างขึ้นโดยไม่เขียนไฟล์
ng g component hello --dry-runการข้ามไฟล์การทดสอบ
เพิ่มแฟล็กเพื่อข้ามการสร้างการทดสอบ .spec.ts หากคุณไม่ต้องการไฟล์ดังกล่าว
ng g component hello --skip-testsแม่แบบและสไตล์แบบฝังในไฟล์
คุณสามารถขอให้ฝังแม่แบบและสไตล์ไว้ภายในไฟล์แทนการแยกเป็นไฟล์ต่างหากได้
ng g component badge --inline-template --inline-styleตรวจสอบอย่างรวดเร็ว: ng generate
การสร้างโครงส่วนประกอบพื้นฐาน
สรุป: การสร้าง
ng generate (ng g) จะสร้างโครงคอมโพเนนต์ บริการ คำสั่ง ไพป์ และตัวป้องกันตามแบบแผนที่ถูกต้อง แฟล็กอย่าง --dry-run, --skip-tests และ --inline-template ช่วยปรับแต่งเอาต์พุต ขั้นถัดไป: การสร้างและให้บริการ
คำถามที่พบบ่อย
บทเรียน “การสร้างโค้ดด้วย 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างโค้ดด้วย ng generate” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้างโปรเจกต์ใหม่
- อธิบายโครงสร้างโปรเจกต์
- การสร้างโค้ดด้วย ng generate
- การสร้างและให้บริการแอป