สัปดาห์ที่ 13: Angular Universal และ Full-Stack Integration

สัปดาห์นี้เรียนรู้การเชื่อมระบบ Frontend และ Backend ให้พร้อมใช้งานจริงมากขึ้น ตั้งแต่ Angular Universal/SSR, การเชื่อม Angular กับ Node.js/Express, การตั้งค่า Environment, CORS, การ Optimize รูปภาพและ Bundle ไปจนถึง SEO ด้วย Angular Meta Service

ผลลัพธ์การเรียนรู้

  1. อธิบาย Server-Side Rendering (SSR) และ Hydration ได้
  2. เชื่อม Angular Frontend กับ Node.js/Express Backend ได้
  3. แยกค่า config สำหรับ development และ production ได้
  4. ตั้งค่า CORS ระหว่าง Angular และ API Server ได้
  5. ใช้แนวทาง Image Optimization และ Lazy Loading ได้
  6. ปรับปรุง SEO ด้วย Meta, Title, Open Graph และ JSON-LD ได้

บทเรียนย่อย

ลำดับ หัวข้อ ไฟล์บทเรียน สไลด์
1 Angular Universal: Server-Side Rendering (SSR) webprogram-13-fullstack-integration-01-angular-universal-ssr.md webprogram-13-fullstack-integration-01-angular-universal-ssr-slides.mdx
2 การเชื่อมต่อ Angular Frontend กับ Node.js/Express Backend webprogram-13-fullstack-integration-02-angular-express-integration.md webprogram-13-fullstack-integration-02-angular-express-integration-slides.mdx
3 Environment Configuration: environment.ts สำหรับ dev/prod webprogram-13-fullstack-integration-03-environment-configuration.md webprogram-13-fullstack-integration-03-environment-configuration-slides.mdx
4 CORS Configuration ระหว่าง Angular และ API Server webprogram-13-fullstack-integration-04-cors-configuration.md webprogram-13-fullstack-integration-04-cors-configuration-slides.mdx
5 Image Optimization และ Lazy Loading ใน Angular webprogram-13-fullstack-integration-05-image-optimization-lazy-loading.md webprogram-13-fullstack-integration-05-image-optimization-lazy-loading-slides.mdx
6 SEO ด้วย Angular Meta Service webprogram-13-fullstack-integration-06-seo-meta-service.md webprogram-13-fullstack-integration-06-seo-meta-service-slides.mdx

ลำดับการเรียน

  1. เข้าใจปัญหา CSR และแนวคิด SSR
  2. เชื่อม Angular กับ Express API ใน development
  3. แยก config dev/prod ด้วย environment files
  4. ตั้งค่า CORS ให้ถูกต้องตาม origin
  5. Optimize รูปภาพและโหลด feature เท่าที่จำเป็น
  6. ตั้งค่า SEO metadata สำหรับหน้าเว็บ

แบบทดสอบหลังเรียนภาพรวม

  1. CSR และ SSR ต่างกันอย่างไร
  2. Proxy configuration ช่วยแก้ปัญหาใดใน development
  3. fileReplacements ใน angular.json ใช้ทำอะไร
  4. Preflight request เกิดขึ้นเมื่อใด
  5. priority ใน NgOptimizedImage เหมาะกับรูปภาพแบบใด
  6. Open Graph tags ช่วยเรื่องใด

กลับรายวิชา