พัฒนาเว็บไซต์ · WDC-107

Angular with Tailwind CSS

หลักสูตร Angular with Tailwind CSS เป็นการอบรมพื้นฐานการสร้างเว็บแบบ SPA ด้วย Angular ตั้งแต่ Component, Signals และ Routing ไปจนถึงฟอร์มและเชื่อมต่อ Backend พร้อมทำหน้าเว็บ Responsive ด้วย Tailwind CSS เหมาะกับนักพัฒนา IT Manager และผู้มีพื้นฐาน JavaScript จบแล้ว Deploy หน้า Landing Page ของตัวเองได้

อัปเดตล่าสุด 8 ต.ค. 2569

ราคาเริ่มต้น 8,550 บาท / ท่าน 9,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ดูรอบอบรม

PDFดาวน์โหลด Course Outline

ระยะเวลา18 ชั่วโมง · 3 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไป12–14 ม.ค. 70
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

Angular เป็น Framework ที่องค์กรจำนวนมากเลือกใช้สร้างเว็บแอปขนาดกลางถึงใหญ่ เพราะมีโครงสร้างชัดเจนและมีเครื่องมือครบในตัว ในช่วงไม่กี่ปีที่ผ่านมา Angular เปลี่ยนไปมาก ทั้ง Standalone Component ที่มาแทน NgModule, Signals, Built-in Control Flow และ Signal Forms ส่วน Tailwind CSS 4 ก็เปลี่ยนมาตั้งค่าด้วย CSS แทนไฟล์ JavaScript ตัวอย่างโค้ดรุ่นเก่าจำนวนมากจึงใช้ไม่ได้หรือไม่ใช่แนวทางที่ควรเริ่มอีกต่อไป

หลักสูตรนี้ปูพื้นฐานการสร้าง Single Page Application ด้วย Angular 22 ร่วมกับ Tailwind CSS 4 ตามแนวทางปัจจุบัน เริ่มจากสร้างโปรเจกต์ด้วย Angular CLI ติดตั้ง Tailwind CSS ด้วย ng add ออกแบบ UI แบบ Utility-First และ Responsive จากนั้นเรียนรู้ Standalone Component, Signals, Data Binding, Control Flow, การสื่อสารระหว่าง Component, Service และ Routing ต่อด้วยฟอร์มแบบ Signal Forms การเรียก Backend ด้วย HttpClient และ httpResource และการใช้ Pipe แล้วรวมทุกอย่างใน Workshop สร้างหน้า Landing Page กับ Dashboard ที่ทดสอบด้วย Vitest และ Deploy ขึ้นออนไลน์ (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

เข้าใจพัฒนาการของ Angular และความต่างระหว่างแนวทางเดิมกับ Angular รุ่นปัจจุบัน
สร้างและจัดโครงสร้างโปรเจกต์ Angular 22 แบบ Standalone Component ได้
ออกแบบ UI และ Responsive Layout ด้วย Tailwind CSS 4 ได้
จัดการ State ด้วย Signals และใช้ Data Binding กับ Built-in Control Flow ได้
สร้างฟอร์มพร้อม Validation ด้วย Signal Forms ได้
เชื่อมต่อ Backend ด้วย HttpClient และ httpResource ได้
ใช้และสร้าง Pipe รวมถึงทำ Routing แบบ Lazy Loading ได้
ทดสอบ Build และ Deploy เว็บแอป Angular ขึ้นออนไลน์ได้

หลักสูตรนี้เหมาะสำหรับ

นักพัฒนาที่ต้องการเริ่มสร้าง Web Application ด้วย Angular ร่วมกับ Tailwind CSS
นักพัฒนาที่เคยใช้ AngularJS หรือ Angular รุ่นเก่าและต้องการปรับมาใช้แนวทางปัจจุบัน
Frontend Developer ที่ต้องการออกแบบ UI ให้เร็วขึ้นด้วย Tailwind CSS
IT Manager และ Tech Lead ที่ต้องประเมินหรือวางแนวทาง Angular ให้ทีม
ผู้สนใจทั่วไปที่มีพื้นฐาน JavaScript และการเขียนโปรแกรม

พื้นฐานของผู้เข้าอบรม

เข้าใจพื้นฐานภาษา JavaScript เช่น ตัวแปร ฟังก์ชัน Array, Object และ Class
เข้าใจหลักการทำงานเบื้องต้นของ Web Service และ REST API
เคยเขียนโปรแกรมมาบ้าง เช่น PHP, C# หรือ Java
โน้ตบุ๊กที่ติดตั้ง Node.js และ VS Code ได้ พร้อมสิทธิ์ติดตั้งโปรแกรม

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่อัปเดตจาก Angular 19 เป็น Angular 22 และ Tailwind CSS 4 รุ่นปัจจุบัน อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ต่อเนื่องจนได้หน้า Landing Page และ Dashboard ระดับ Beginner เนื้อหาใช้ Standalone Component, Signals, input(), output() และ model(), Signal Forms, httpResource และ Vitest

ตามแนวทางปัจจุบันแทน NgModule, Template-driven Form และ Karma แบบเดิม และใช้ REST API จำลองบนเครื่องแทน Firebase หลักสูตรนี้ต่างจากหลักสูตร Angular พื้นฐานทั่วไปตรงที่ออกแบบหน้าจอด้วย Tailwind CSS ตลอดทุก Lab ทุกเครื่องมือเป็นโอเพนซอร์สหรือมีแบบใช้ฟรี ผู้เรียนจะได้ Lab Guide และซอร์สโค้ดตัวอย่างครบทุก Lab กลับไปใช้งานต่อ

Day 1 Angular CLI, Tailwind CSS และ Component

Section 1: Lab: เริ่มต้น Angular 22

ภาพรวม Angular ความต่างจาก AngularJS และการเปลี่ยนแปลงสำคัญในรุ่นหลัง
ติดตั้ง Node.js และ Angular CLI แล้วสร้างโปรเจกต์ด้วย ng new
โครงสร้างโปรเจกต์: main.ts, app.config.ts และ Standalone Component
Zoneless และ OnPush ที่เป็นค่าเริ่มต้นใน Angular รุ่นปัจจุบัน
Lab: รันโปรเจกต์ด้วย ng serve และติดตั้ง Angular DevTools

Section 2: TypeScript สำหรับ Angular

Type, Interface และ Union Type ที่ใช้บ่อยใน Angular
Class, Access Modifier และ Generic เบื้องต้น
ES Module, import และ export ในโปรเจกต์
async/await, Promise และภาพรวม Observable ของ RxJS
Lab: สร้าง Model ข้อมูลสินค้าด้วย Interface

Section 3: Lab: ติดตั้ง Tailwind CSS 4 ใน Angular

แนวคิด Utility-First และความต่างจาก CSS Framework แบบ Component
ติดตั้งด้วย ng add tailwindcss และ @import "tailwindcss" ใน styles.css
Utility สำหรับ Spacing, Typography, Color, Flexbox และ Grid
กำหนดสี ฟอนต์ และ Design Token ของแบรนด์ด้วย @theme
Lab: วาง Layout หน้าแรกด้วย Utility Class

Section 4: Responsive Design และการปรับแต่ง

Breakpoint แบบ Mobile-First และ Container Query
สถานะ hover, focus และ Dark Mode ด้วย Variant
สร้าง Utility ของตัวเองด้วย @utility และเพิ่ม Plugin ด้วย @plugin
เลือกระหว่าง Utility Class ใน Template กับ Style ของ Component
Lab: Navbar, Card และ Footer ที่รองรับทุกขนาดหน้าจอ

Section 5: Lab: Standalone Component

สร้าง Component ด้วย ng generate และองค์ประกอบของ @Component
Template, Style และ Selector ของ Component
import Component, Directive และ Pipe ที่ใช้ภายใน Component
จัดโครงสร้างโฟลเดอร์ตามฟีเจอร์
Lab: แยกหน้า Landing Page เป็น Component ที่ใช้ซ้ำได้

Day 2 Signals, Data Binding, Service และ Routing

Section 6: Signals และ Reactivity

signal(), set() และ update() สำหรับเก็บ State
computed() สำหรับค่าที่คำนวณต่อ และ linkedSignal()
effect() และข้อควรระวังในการใช้งาน
Signals ทำงานร่วมกับ Change Detection แบบ Zoneless อย่างไร
Lab: ตะกร้าสินค้าที่คำนวณยอดรวมอัตโนมัติ

Section 7: Lab: Data Binding และ Control Flow

Interpolation, Property Binding, Event Binding และ Two-way Binding
Built-in Control Flow: @if, @for พร้อม track และ @switch
ประกาศตัวแปรใน Template ด้วย @let
โหลดส่วนที่ไม่จำเป็นภายหลังด้วย @defer
Lab: รายการสินค้าที่ค้นหาและกรองได้

Section 8: การสื่อสารระหว่าง Component

รับค่าด้วย input() และ input.required()
ส่ง Event ด้วย output() และทำ Two-way Binding ด้วย model()
Content Projection ด้วย ng-content
Attribute Binding, class และ style Binding
Lab: Modal และ Product Card ที่รับค่าและส่ง Event กลับ

Section 9: Service และ Dependency Injection

แยกตรรกะออกจาก Component ไปไว้ใน Service
inject(), providedIn: 'root' และ @Service() ที่มาใหม่ใน Angular 22
เก็บ State ที่ใช้ร่วมกันหลายหน้าใน Service ด้วย Signals
Lab: CartService ที่ใช้ร่วมกันทั้งแอป

Section 10: Lab: Routing

ตั้งค่า Route ด้วย provideRouter และแสดงผลด้วย RouterOutlet
นำทางด้วย routerLink, routerLinkActive และ Router.navigate()
Route Parameter, Query Parameter และรับค่าผ่าน input() ของ Component
Lazy Loading ด้วย loadComponent และ loadChildren
Route Guard แบบฟังก์ชันสำหรับหน้าที่ต้อง Login

Day 3 ฟอร์ม Backend และ Workshop

Section 11: Lab: ฟอร์มด้วย Signal Forms

สร้าง Model ของฟอร์มด้วย signal() และ form()
ผูกช่องกรอกด้วย FormField Directive
Validator ในตัว เช่น required, email และ minLength
แสดงข้อความ Error ตามสถานะ touched และ invalid
ภาพรวม Reactive Forms ที่ยังพบในโปรเจกต์เดิม

Section 12: Lab: เชื่อมต่อ Backend

ตั้งค่า provideHttpClient() และ REST API จำลองบนเครื่อง
GET, POST, PUT และ DELETE ด้วย HttpClient พร้อมกำหนด Type
ดึงข้อมูลแบบ Reactive ด้วย httpResource พร้อมสถานะ Loading และ Error
Interceptor สำหรับแนบ Token และจัดการ Error กลาง
Lab: หน้าจัดการสินค้า เพิ่ม แก้ไข และลบผ่าน API

Section 13: Pipes

Pipe ในตัว: date, currency, number, uppercase และ json
ส่ง Parameter ให้ Pipe และใช้หลาย Pipe ต่อกัน
สร้าง Custom Pipe แบบ Standalone
async Pipe กับ Observable และเมื่อไรควรใช้ Signal แทน
Lab: Pipe แสดงราคาและสถานะคำสั่งซื้อเป็นภาษาไทย

Section 14: Workshop: Landing Page และ Dashboard

วางโครงสร้างหน้า Landing Page และ Dashboard
ออกแบบ UI ด้วย Tailwind CSS พร้อม Dark Mode
เพิ่มฟอร์มติดต่อด้วย Signal Forms และดึงข้อมูลจาก API
ตรวจ Responsive และการเข้าถึงด้วยคีย์บอร์ด

Section 15: Workshop: ทดสอบ Build และ Deploy

ทดสอบ Component และ Service เบื้องต้นด้วย Vitest
ใช้ AI Assistant ช่วยเขียนและอธิบายโค้ด พร้อมตรวจผลก่อนใช้งาน
Build สำหรับ Production และตรวจขนาด Bundle
Deploy ขึ้น Static Hosting แบบใช้ฟรี เช่น Netlify, Vercel หรือ Render
Workshop: Deploy หน้า Landing Page และ Dashboard จริง

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

12–14มกราคม

ในคลาสเรียน12–14 ม.ค. 70

เหลือ 20 ที่นั่ง

16–18มีนาคม

ในคลาสเรียน16–18 มี.ค. 70

เหลือ 20 ที่นั่ง

25–27พฤษภาคม

ในคลาสเรียน25–27 พ.ค. 70

เหลือ 20 ที่นั่ง

13–15กรกฎาคม

ในคลาสเรียน13–15 ก.ค. 70

เหลือ 20 ที่นั่ง

7–9กันยายน

ในคลาสเรียน7–9 ก.ย. 70

เหลือ 20 ที่นั่ง

2–4พฤศจิกายน

ในคลาสเรียน2–4 พ.ย. 70

เหลือ 20 ที่นั่ง

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

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

ติดตั้ง Tailwind CSS 4 ในโปรเจกต์ Angular ทำอย่างไร

วิธีที่ง่ายที่สุดคือรันคำสั่ง ng add tailwindcss ในโฟลเดอร์โปรเจกต์ Angular CLI จะติดตั้ง Package ที่จำเป็น ตั้งค่า Build และเพิ่มบรรทัด @import "tailwindcss" ในไฟล์ styles.css ให้ จากนั้นใช้ Utility Class ใน Template ได้ทันที และกำหนดสีหรือฟอนต์ของแบรนด์เพิ่มได้ใน @theme โดยไม่ต้องมีไฟล์ tailwind.config.js แบบรุ่นเก่า

Built-in Control Flow ใน Angular คืออะไร ใช้แทน ngIf และ ngFor อย่างไร

Built-in Control Flow คือไวยากรณ์ในตัวของ Template ได้แก่ @if สำหรับแสดงตามเงื่อนไขพร้อม @else, @for สำหรับวนแสดงรายการ และ @switch สำหรับเลือกหลายกรณี ไม่ต้อง import Directive เพิ่ม อ่านง่ายกว่า *ngIf และ *ngFor แบบเดิม โดย @for บังคับให้ระบุ track เพื่อให้ Angular อัปเดตเฉพาะรายการที่เปลี่ยน และมี @empty แสดงข้อความเมื่อไม่มีข้อมูล

Signals ใน Angular คืออะไร ต่างจากตัวแปรธรรมดาอย่างไร

Signal คือค่าที่ Angular ติดตามการเปลี่ยนแปลงได้ สร้างด้วย signal() อ่านค่าด้วยการเรียกเป็นฟังก์ชัน และเปลี่ยนค่าด้วย set() หรือ update() เมื่อค่าเปลี่ยน Angular จะอัปเดตเฉพาะส่วนของหน้าจอที่ใช้ค่านั้น และ computed() จะคำนวณค่าที่ขึ้นกับ Signal อื่นให้ใหม่อัตโนมัติ Signals เป็นพื้นฐานของ Angular รุ่นปัจจุบันทั้ง input(), model(), Signal Forms และ httpResource

หลักสูตร Angular with Tailwind CSS เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักพัฒนา Frontend Developer, IT Manager และผู้ที่ต้องการเริ่มพัฒนา Web Application ด้วย Angular ร่วมกับ Tailwind CSS รวมถึงผู้ที่เคยใช้ Angular รุ่นเก่าและอยากปรับมาใช้แนวทางปัจจุบัน ควรเข้าใจพื้นฐานภาษา JavaScript หลักการทำงานของ Web Service และเคยเขียนโปรแกรม เช่น PHP, C# หรือ Java มาบ้าง

เรียนจบหลักสูตร Angular with Tailwind CSS แล้วทำอะไรได้บ้าง

สร้างโปรเจกต์ Angular แบบ Standalone Component จัดการ State ด้วย Signals ใช้ Data Binding, Control Flow และ Routing สร้างฟอร์มพร้อม Validation ด้วย Signal Forms ใช้และสร้าง Pipe เรียก Backend ด้วย HttpClient และ httpResource ออกแบบหน้าเว็บ Responsive ด้วย Tailwind CSS 4 ทดสอบด้วย Vitest และ Deploy หน้า Landing Page ขึ้นออนไลน์ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Angular with Tailwind CSS ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกสร้างหน้าจอและฟอร์มที่ใกล้เคียงกับระบบภายในขององค์กร ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449