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

.NET 10 with Angular

หลักสูตร .NET 10 with Angular เป็นการอบรมสร้างเว็บแอป Full-stack ด้วย Angular 22 และ ASP.NET Core 10 ครอบคลุม Signals, Signal Forms, Web API, EF Core, JWT และ Docker ผ่าน Workshop ระบบขายหน้าร้านและสต็อก เหมาะกับนักพัฒนา C# นักพัฒนา Frontend และนักไอทีในองค์กร จบแล้วได้ระบบ POS ที่ใช้งานได้จริง

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

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

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

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

ระยะเวลา30 ชั่วโมง · 5 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

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

เว็บแอปยุคใหม่นิยมแยก Frontend กับ Backend ออกจากกัน Angular เป็นเฟรมเวิร์กของ Google ที่มีโครงสร้างชัดเจน เหมาะกับระบบงานองค์กรที่ต้องดูแลระยะยาว ส่วน ASP.NET Core บน .NET 10 เป็นแพลตฟอร์ม Backend ที่เร็ว ปลอดภัย และรันได้ทั้ง Windows, macOS และ Linux แต่ทั้งสองฝั่งเปลี่ยนไปมากในช่วงหลัง Angular หันมาใช้ Signals, Standalone Component และ Signal Forms ส่วน .NET ก็ขึ้นรุ่น LTS ใหม่พร้อม OpenAPI ในตัว ตัวอย่างโค้ดรุ่นเก่าจึงใช้ต่อได้ไม่เต็มที่

หลักสูตรนี้พาสร้างเว็บแอปแบบ Full-stack ด้วย Angular 22 และ ASP.NET Core 10 ผ่าน Workshop ระบบขายหน้าร้าน (POS) และระบบสต็อก เริ่มจาก TypeScript, Standalone Component, Signals, Routing, Signal Forms และการเรียก API แล้วสร้าง Web API ที่จัดการข้อมูล SQL Server ด้วย Entity Framework Core 10 ทำระบบสมาชิก อัปโหลดไฟล์ และป้องกัน API ด้วย JWT จากนั้นเชื่อมทั้งสองฝั่งด้วย Interceptor และ Route Guard เขียน Test ทั้ง Frontend และ Backend และ Deploy ทั้งระบบด้วย Docker (อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง ระดับ Intermediate)

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

เข้าใจสถาปัตยกรรม SPA ที่ใช้ Angular คู่กับ ASP.NET Core Web API
สร้าง Standalone Component, ใช้ Signals และ Control Flow ของ Angular 22 ได้
ทำ Routing, ฟอร์มด้วย Signal Forms และ Service ที่ใช้ Dependency Injection ได้
เรียก API ด้วย HttpClient และ httpResource พร้อมจัดการสถานะการโหลดและ Error
สร้าง Web API ด้วย ASP.NET Core 10 พร้อม Validation และเอกสาร OpenAPI
จัดการฐานข้อมูล SQL Server ด้วย EF Core 10 แบบ Code-First และ Migration
ป้องกันระบบด้วย JWT, CORS, Interceptor และ Route Guard
เขียน Test และ Deploy ทั้ง Angular และ ASP.NET Core ด้วย Docker ได้

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

นักพัฒนา C# ที่ต้องการทำเว็บแอปแบบ Full-stack ด้วย Angular
นักพัฒนา Frontend ที่ต้องการต่อยอดไปเขียน Backend ด้วย .NET
นักศึกษา ครูอาจารย์ และวิทยากรที่สนใจการพัฒนาเว็บแบบปัจจุบัน
นักไอทีและผู้ดูแลระบบที่ต้องพัฒนาหรือดูแลระบบงานภายในองค์กร
ผู้ที่เคยใช้ .NET 8 หรือ Angular รุ่นเก่าและต้องการอัปเดต

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

เขียนภาษา C# ได้เบื้องต้น และเข้าใจแนวคิดเชิงวัตถุ
มีพื้นฐาน HTML, CSS และ JavaScript
รู้จักฐานข้อมูลและคำสั่ง SQL พื้นฐาน
โน้ตบุ๊กที่ติดตั้ง Node.js, .NET 10 SDK, Docker Desktop และ VS Code ได้ พร้อมสิทธิ์ติดตั้งโปรแกรม

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่มาแทนหลักสูตร .NET Core 8 with Angular รุ่นเดิม เนื้อหาเขียนใหม่ทั้งหมดสำหรับ .NET 10 (LTS) และ Angular 22 อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ผ่าน Workshop ระบบขายหน้าร้าน (POS) และระบบสต็อกที่ต่อเติมตลอดหลักสูตร ระดับ Intermediate ใช้ Standalone

Component, Signals, Signal Forms, httpResource และ Interceptor กับ Guard แบบฟังก์ชัน ใช้ Tailwind CSS 4 กับ Angular Material แทนธีม AdminLTE ฝั่ง Backend ใช้ ASP.NET Core 10, EF Core 10 กับ SQL Server 2025 และเอกสาร OpenAPI ในตัว เพิ่มการเขียน Test ด้วย Vitest และ xUnit และ Deploy ด้วย Docker ผู้เรียนได้ Lab Guide ซอร์สโค้ดครบทุก Lab และไฟล์ docker-compose กลับไปใช้งานต่อ

Day 1 เริ่มต้น Angular 22 และ Workshop POS

Section 1: Lab: ภาพรวมและติดตั้งเครื่องมือ

SPA คืออะไร และ Angular ทำงานคู่กับ ASP.NET Core อย่างไร
Angular เทียบกับ React และ Vue ในงานระบบองค์กร
ติดตั้ง Node.js, Angular CLI 22, .NET 10 SDK, Git และ VS Code พร้อม Extension
สร้างโปรเจกต์ด้วย ng new สำรวจโครงสร้าง และรันเว็บแอป
Lab: เก็บโปรเจกต์ไว้บน GitHub ตั้งแต่วันแรก

Section 2: TypeScript สำหรับ Angular

Type, Interface, Class และ Generic ที่ใช้บ่อย
Module, import และ export
async/await, Promise และ Observable เบื้องต้น
Lab: เขียน Model ของสินค้าและบิลขายด้วย TypeScript

Section 3: Lab: Component, Template และ Signals

Standalone Component และ Template Syntax
signal(), computed() และ effect() สำหรับ State ของหน้าจอ
Control Flow ด้วย @if, @for และ @switch
Event Binding, Property Binding และ Class Binding
Lifecycle Hook ที่ยังจำเป็น และ Change Detection แบบ OnPush

Section 4: Lab: เริ่ม Workshop ระบบ POS

ติดตั้ง Tailwind CSS 4 และจัดการไฟล์ Asset
สร้าง Layout ส่วน Header, Sidebar, Footer และเมนู
ออกแบบหน้า Login และ Register
แยก Component ที่ใช้ซ้ำ เช่น ปุ่มและการ์ดสินค้า
Lab: หน้าแรกของระบบ POS แบบ Responsive

Day 2 Routing ฟอร์ม Service และ HTTP

Section 5: Lab: Routing

กำหนด Route, Router Outlet และ RouterLink
Route Parameter และรับค่าผ่าน Component Input
Lazy Loading ด้วย loadComponent และ loadChildren
Redirect, หน้า Not Found และย้อนกลับหน้าเดิม
Lab: Routing ของ Workshop POS ทุกหน้า

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

สร้างฟอร์มจาก Signal Model ด้วย form() และ [formField]
Validation ที่มีมาให้และการเขียนกฎตรวจเอง
แสดงข้อความผิดพลาดและสถานะ Dirty และ Touched
เทียบ Signal Forms กับ Reactive Forms และ Template-driven Forms
Lab: ฟอร์มสมัครสมาชิกและเข้าสู่ระบบพร้อม Validation

Section 7: Service และ Dependency Injection

สร้าง Service และใช้ inject() ใน Component
เก็บ State ร่วมกันด้วย Signals ใน Service
Pipe มาตรฐาน และการเขียน Custom Pipe
Lab: Service ตะกร้าสินค้าที่หลายหน้าใช้ร่วมกัน

Section 8: Lab: เรียก API ด้วย HttpClient และ httpResource

ตั้งค่า provideHttpClient และ Environment ของแต่ละสภาพแวดล้อม
สร้าง Model และ Map ข้อมูล JSON เป็น TypeScript
ดึงข้อมูลแบบ Reactive ด้วย httpResource
Observable กับ Signals และการแปลงระหว่างกัน
Lab: แสดงรายการสินค้าจาก API จำลอง พร้อมสถานะโหลดและ Error

Day 3 ASP.NET Core 10 Web API และฐานข้อมูล

Section 9: Lab: เริ่มต้น ASP.NET Core 10 Web API

RESTful API คืออะไร และโครงสร้างโปรเจกต์ ASP.NET Core 10
Controller กับ Minimal API และ Route Group
รับข้อมูลจาก Query String, Path, Form และ JSON พร้อม Validation
Middleware, Logging, Dev Certificate และเอกสาร OpenAPI ในตัว
Lab: API สินค้าแรกและทดสอบด้วยไฟล์ .http

Section 10: Lab: EF Core 10 กับ SQL Server

รัน SQL Server 2025 ด้วย Docker และติดตั้งแพ็กเกจผ่าน NuGet
DbContext, Entity และ Dependency Injection
Code-First กับ Migration และ Database-First ด้วย Scaffold
จัดการ Configuration และ Connection String ตาม Environment
แนวทางเปลี่ยนไปใช้ PostgreSQL ผ่าน Provider ของ EF Core

Section 11: Lab: API ระบบสมาชิก

แยก Service Layer และส่งข้อมูลด้วย DTO
เข้ารหัสรหัสผ่านด้วย PasswordHasher
CRUD ด้วย EF Core แบบ async
ส่ง Error มาตรฐานด้วย ProblemDetails
Lab: API สมัครสมาชิก เข้าสู่ระบบ และจัดการผู้ใช้

Section 12: Lab: API ระบบสต็อก

ความสัมพันธ์ระหว่างสินค้า หมวดหมู่ และรายการเคลื่อนไหวสต็อก
ค้นหา กรอง และแบ่งหน้าข้อมูล
อัปโหลดไฟล์รูปสินค้าและให้บริการ Static Files
Transaction เมื่อขายสินค้าและตัดสต็อก
Lab: API สินค้าและสต็อกครบทุกฟังก์ชัน

Day 4 ความปลอดภัยและเชื่อมต่อ Angular

Section 13: Lab: ป้องกัน API ด้วย JWT

Authentication สำหรับ SPA และ JWT คืออะไร
สร้างและตรวจสอบ JWT ด้วย JWT Bearer Authentication
กำหนดสิทธิ์ด้วย Role และ Policy
ตั้งค่า CORS ให้ Angular เรียก API ได้อย่างปลอดภัย
Lab: ล็อกหน้า API ที่ต้องเข้าสู่ระบบก่อน

Section 14: Lab: เชื่อม Angular กับ API

เก็บ Token และข้อควรระวังด้านความปลอดภัยฝั่งเบราว์เซอร์
Functional Interceptor แนบ Token และจัดการ Error กลาง
Route Guard ด้วย CanActivateFn
แจ้งเตือนผู้ใช้ด้วย Dialog และ SweetAlert2
Lab: Login จริงจาก Angular ไปยัง ASP.NET Core

Section 15: Lab: หน้าระบบสต็อกด้วย Angular Material

ติดตั้ง Angular Material และใช้ร่วมกับ Tailwind CSS
ตารางข้อมูลพร้อมเรียงลำดับ ค้นหา และแบ่งหน้า
ฟอร์มเพิ่มและแก้ไขสินค้าพร้อมแสดงตัวอย่างรูปก่อนอัปโหลด
Lab: หน้าจัดการสินค้าและสต็อกที่เชื่อม API จริง

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

input(), output() และ model() แบบ Signal
ส่งข้อมูลระหว่าง Parent และ Child Component
แชร์ข้อมูลและฟังก์ชันผ่าน Service
จัดการ Stylesheet ของ Component และธีมของระบบ
Lab: แยกหน้าขายเป็น Component ย่อยที่สื่อสารกัน

Day 5 ปิดงาน POS, Test และ Deploy

Section 17: Lab: หน้าขายและรายงาน

หน้าขายหน้าร้าน ค้นหาสินค้า และคำนวณยอดด้วย computed()
บันทึกบิลขายและตัดสต็อกผ่าน API
รายงานยอดขายรายวันและสินค้าขายดี
Lab: ทำ Workshop POS ให้ใช้งานได้ครบวงจร

Section 18: Testing ทั้ง Frontend และ Backend

Unit Test ของ Angular ด้วย Vitest
ทดสอบ Component และ Service ที่ใช้ Signals
Unit Test ของ Service ฝั่ง .NET ด้วย xUnit
Integration Test ของ API ด้วย WebApplicationFactory
Lab: เขียน Test ให้ส่วนคำนวณยอดขายทั้งสองฝั่ง

Section 19: Lab: Deploy ด้วย Docker

Build Angular สำหรับ Production และให้บริการด้วย Nginx
สร้าง Container Image ของ ASP.NET Core
รวม Angular, API และ SQL Server ด้วย Docker Compose
ตั้งค่า Environment และ Secret สำหรับ Production
Lab: รันทั้งระบบด้วยคำสั่งเดียว

Section 20: Workshop: ต่อยอดและนำเสนอผลงาน

เพิ่มฟีเจอร์ตามโจทย์ที่ผู้เรียนเลือก เช่น ส่วนลดหรือระบบสมาชิกสะสมแต้ม
ใช้ AI Assistant ช่วยเขียนโค้ดและ Test พร้อมตรวจทานผล
รีวิวโค้ดร่วมกันและ Checklist ก่อนขึ้นระบบจริง
นำเสนอผลงานและแนวทางต่อยอด

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

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

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

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

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

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

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

สนิทวงศ์ กมลภากรณ์วิทยากรผู้สอน

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

Angular กับ ASP.NET Core ทำงานร่วมกันอย่างไรในเว็บแบบ Full Stack

Angular ทำหน้าที่เป็น Frontend แบบ Single Page Application ที่รันในเบราว์เซอร์ ดูแลหน้าจอ ฟอร์ม และการนำทางทั้งหมด ส่วน ASP.NET Core บน .NET 10 เป็น Backend ที่เปิด Web API ให้ Angular เรียกผ่าน HTTP โดยรับส่งข้อมูลเป็น JSON และจัดการฐานข้อมูลผ่าน EF Core ทั้งสองฝั่งพัฒนาแยกกันได้ เชื่อมกันด้วย JWT และ CORS และนำขึ้นระบบพร้อมกันด้วย Docker Compose

Signal Forms, Reactive Forms และ Template-driven Forms ใน Angular ต่างกันอย่างไร

Template-driven Forms ผูกข้อมูลใน Template ด้วย ngModel เขียนง่ายแต่ควบคุมได้น้อย Reactive Forms สร้างโครงฟอร์มในโค้ดด้วย FormGroup และ FormControl ทำงานกับ Observable และทดสอบง่าย ส่วน Signal Forms ซึ่งเป็น Stable ใน Angular 22 สร้างฟอร์มจาก Signal Model ด้วย form() กำหนด Validation เป็นกฎในโค้ด และผูกกับ Input ด้วย [formField] ทำให้สถานะฟอร์มเป็น Signal ที่เข้ากับ Angular ยุคใหม่ หลักสูตรนี้ใช้ Signal Forms เป็นหลักและเทียบกับอีกสองแบบเพื่อให้ดูแลโค้ดเดิมได้

ทำระบบล็อกอินด้วย JWT ระหว่าง Angular กับ ASP.NET Core มีขั้นตอนอย่างไร

ฝั่ง ASP.NET Core ตรวจชื่อผู้ใช้กับรหัสผ่านที่เข้ารหัสไว้ แล้วสร้าง JWT ที่มีข้อมูลผู้ใช้และสิทธิ์ส่งกลับไป ตั้งค่า JWT Bearer Authentication ให้ตรวจ Token ทุกคำขอ และกำหนดสิทธิ์ด้วย Role หรือ Policy ฝั่ง Angular เก็บ Token อย่างระมัดระวัง ใช้ Functional Interceptor แนบ Token ไปกับทุกคำขอและจัดการกรณี Token หมดอายุ และใช้ Route Guard กันไม่ให้เข้าหน้าที่ต้องล็อกอินก่อน พร้อมตั้งค่า CORS ให้ทั้งสองฝั่งสื่อสารกันได้

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

เหมาะกับนักพัฒนา C# ที่ต้องการทำเว็บแบบ Full-stack นักพัฒนา Frontend ที่จะต่อยอดไปเขียน Backend ด้วย .NET นักศึกษา ครูอาจารย์ วิทยากร และนักไอทีที่ดูแลระบบงานในองค์กร ควรเขียน C# ได้เบื้องต้น มีพื้นฐาน HTML, CSS และ JavaScript และรู้จักคำสั่ง SQL พื้นฐาน

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

สร้าง Frontend ด้วย Angular 22 ทั้ง Component, Signals, Routing และ Signal Forms สร้าง Web API ด้วย ASP.NET Core 10 ที่จัดการ SQL Server ผ่าน EF Core 10 ทำระบบสมาชิกและป้องกันด้วย JWT เชื่อมทั้งสองฝั่งด้วย Interceptor และ Guard เขียน Test และ Deploy ทั้งระบบด้วย Docker ได้ พร้อมผลงานระบบ POS และสต็อกที่ใช้งานได้จริง ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

เรียน .NET 10 with Angular ต้องเตรียมโปรแกรมอะไรบ้าง

เตรียมโน้ตบุ๊ก Windows, macOS หรือ Linux ที่ติดตั้ง Node.js รุ่น LTS, Angular CLI, .NET 10 SDK, Git, Docker Desktop สำหรับรัน SQL Server และ VS Code พร้อม Angular Language Service และ C# Dev Kit หรือจะใช้ Visual Studio 2026 Community ก็ได้ เครื่องมือทั้งหมดใช้ได้ฟรี และควรมีสิทธิ์ติดตั้งโปรแกรมบนเครื่อง