การสร้างและให้บริการแอป
เรียกใช้เซิร์ฟเวอร์สำหรับพัฒนาและสร้างบิลด์
การสร้างและให้บริการแอป เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้างและให้บริการ
CLI เรียกใช้แอปของคุณภายในเครื่องระหว่างการพัฒนา และสร้างเอาต์พุตที่ปรับให้เหมาะสมสำหรับใช้งานจริง คำสั่งสำคัญสองคำสั่งคือ ng serve และ ng build
ng serve
ng serve เริ่มเซิร์ฟเวอร์พัฒนาภายในเครื่องพร้อมโหลดใหม่อัตโนมัติ เมื่อแก้ไขไฟล์ เบราว์เซอร์จะรีเฟรชโดยอัตโนมัติ
ng serveที่อยู่เริ่มต้น
โดยค่าเริ่มต้น เซิร์ฟเวอร์พัฒนาจะทำงานที่ http://localhost:4200 เปิด URL นี้เพื่อดูแอปของคุณ
การเปลี่ยนพอร์ตและโฮสต์
ใช้แฟล็กเพื่อเปลี่ยนพอร์ตหรือโฮสต์
ng serve --port 4300 --host 0.0.0.0การเปิดเบราว์เซอร์
แฟล็ก open จะเปิดเบราว์เซอร์เริ่มต้นของคุณโดยอัตโนมัติ
ng serve --open
# or: ng serve -ong build
ng build คอมไพล์แอปเป็นไฟล์แบบสแตติกสำหรับนำไปใช้งาน โดยเขียนไฟล์ไว้ในโฟลเดอร์ dist
ng buildการปรับให้เหมาะสมสำหรับการใช้งานจริง
การสร้างสำหรับใช้งานจริงจะใช้การปรับให้เหมาะสมหลายอย่าง ได้แก่ การคอมไพล์ล่วงหน้า การลดขนาด การตัดต้นไม้ และการรวมชุดไฟล์ ทำให้ได้เอาต์พุตที่มีขนาดเล็กและทำงานเร็วขึ้น
เอาต์พุต dist
เอาต์พุตจากการสร้างจะอยู่ที่ dist/<project-name>/ คุณสามารถนำไฟล์แบบสแตติกเหล่านี้ไปติดตั้งบนโฮสต์เว็บใดก็ได้หรือบน CDN
การกำหนดค่าการสร้าง
angular.json กำหนดการกำหนดค่าต่าง ๆ เช่น production และ development โดยเลือกใช้รายการใดรายการหนึ่งด้วยแฟล็ก configuration
ng build --configuration productionการเฝ้าดูระหว่างการสร้าง
หากต้องการสร้างใหม่อย่างต่อเนื่องโดยไม่เปิดให้บริการ แฟล็ก watch จะสั่งสร้างใหม่เมื่อไฟล์มีการเปลี่ยนแปลง
ng build --watchการเรียกใช้การทดสอบ
คำสั่งที่เกี่ยวข้อง ได้แก่ ng test สำหรับการทดสอบหน่วย และ ng lint (เมื่อกำหนดค่าไว้) สำหรับการวิเคราะห์แบบสแตติก
ng testตรวจสอบอย่างรวดเร็ว: ให้บริการเทียบกับสร้าง
การพัฒนาภายในเครื่องเทียบกับการนำไปใช้งาน
สรุป: การสร้างและให้บริการ
ใช้ ng serve สำหรับการพัฒนาภายในเครื่องพร้อมโหลดใหม่อัตโนมัติที่ localhost:4200 และใช้ ng build เพื่อสร้างไฟล์แบบสแตติกที่ปรับให้เหมาะสมใน dist/ สำหรับนำไปใช้งาน การกำหนดค่าและแฟล็กช่วยปรับโฮสต์ พอร์ต และระดับการปรับให้เหมาะสม คุณเรียนหลักสูตร CLI จบแล้ว
คำถามที่พบบ่อย
บทเรียน “การสร้างและให้บริการแอป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างและให้บริการแอป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างและให้บริการแอป”
เรียกใช้เซิร์ฟเวอร์สำหรับพัฒนาและสร้างบิลด์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างและให้บริการแอป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้างโปรเจกต์ใหม่
- อธิบายโครงสร้างโปรเจกต์
- การสร้างโค้ดด้วย ng generate
- การสร้างและให้บริการแอป