บทความนี้เป็นส่วนหนึ่งของซีรีส์ Angular + PrimeNG 19 (CSR, non-standalone) เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD. — ตอนที่ 2/10
โครงสร้าง Project Angular 19
ใน Angular 19 แบบ CSR Non-Standalone นั้นจะมีโครงสร้างโปรเจคดังรูป
- โฟลเดอร์ public
ใช้เก็บไฟล์ที่จะใช้ทั่วไปเช่น รูปภาพ หรือ ไฟล์ที่ต้องการให้ผู้ใช้ Download เช่น Template ต่าง ๆ
- โฟลเดอร์ src
ใช้เก็บไฟล์ที่เกี่ยวข้องกับโปรเจค
- ไฟล์ index.html
ใช้คุมส่วนหัวของเว็บไซต์
- ไฟล์ styles.scss
ใช้ตั้งค่า Global CSS ซึ่งหมายถึงทุก ๆ Component สามารถเรียกใช้ได้
- โฟลเดอร์ src/app
จะเป็นที่อยู่แรกสุด (ชั้นบนสุดของโครงสร้าง) ของการเก็บ Component Service Module ต่าง ๆ ที่จะสร้างหลังจากนี้
- ไฟล์ app.module.ts
ใช้เก็บ Import Module , Component , Pipe ต่าง ๆ ที่เรียกใช้งานภายในโปรเจค ทำให้เวลาจะเรียกใช้ให้ประกาศที่ไฟล์นี้ที่เดียว
- ไฟล์ app.routing.module.ts
ใช้เก็บ Route ต่าง ๆ ที่เกิดขึ้นภายในโปรเจค
Global File: index.html และ styles.scss
index.html เป็นไฟล์ที่ใช้กำหนดส่วนหัวของตัวเว็บไซต์ โดยปกติใน Angular จะเอาไว้ใส่ Google Tag กำหนด Icon , Title , OG Meta Tag หรือกำหนด Viewport สำหรับทำ Responsive Website เท่านั้น ส่วนการแสดงผลที่เหลือจะทำผ่าน Component ซึ่งจะถูกแสดงผ่าน <app-root>
styles.scss เป็นไฟล์ที่ใช้กำหนด Style หลักของโปรเจค (Global) โดยจะสามารถเรียกใช้หรือมีผลได้กับทุก ๆ Component ภายในโปรเจค โดยในตัวอย่างจะมีการ Import css ที่จำเป็นของ Prime NG กับ Google Font มา โดย SCSS สามารถใช้ @import เพื่อ Import ไฟล์ และกำหนดค่า Value ที่ใช้ร่วมกัน ผ่านตัวแปรที่สร้างขึ้นเอง ( $ ) ได้
App Module
ไฟล์ app/app.module.ts จะใช้สำหรับประกาศการเรียกใช้ Component , Module ที่อยู่ภายใต้ App โดยเมื่อมีการสร้าง Component หรือต้องการเรียกใช้ Component / Module จากที่อื่นจะต้องประกาศที่ไฟล์นี้ก่อน ไม่อย่างนั้นจะเกิด Error โดยใน VS Code จะบอกเลยว่าหา Component / Module นั้น ๆ ไม่เจอ โดยในตัวอย่างได้เรียกใช้ Prime NG Module เบื้องต้น Form Module และ Component ตัวอย่างไว้แล้ว
declarations: ใช้สำหรับเรียกใช้ Component
imports: ใช้สำหรับเรียกใช้ Module
providers: ใช้สำหรับกำหนด Initial กับ Service บางอย่าง
declarations
imports
providers
🧪 LAB: ทดลองรันเว็บไซต์ขึ้นมา
ให้รันเว็บไซต์โดยใช้คำสั่ง: ng serve
ครั้งแรก ที่รันจะมีการถามว่าแชร์ข้อมูลให้ Google วิเคราะห์ได้ไหม ให้ตอบตามที่เห็นควร y/N
หากรันผ่านก็จะแสดง URL ให้เข้าหน้าเว็บเพื่อดูผลลัพธ์ (Default Port: 4200)
เพิ่มเติม
หากต้องการเข้าผ่านอุปกรณ์อื่น ๆ ในเครือข่าย หรือกำหนด Port สามารถใช้ flag ได้
--port <Port Number>
--host <IP Address>เช่น ng serve –port 4201 –host 0.0.0.0 คือเข้าได้ทุกอุปกรณ์ผ่าน IP ของเครื่องที่รันโปรเจค โดยเข้าใช้งานผ่าน port 4201
