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

Basic Angular

หลักสูตร Basic Angular เป็นการอบรมเริ่มต้นสร้าง Single Page Application ด้วย Angular 22 ตั้งแต่ Standalone Component, Data Binding และ Signals ไปจนถึง Routing ฟอร์มและ Validation, Pipes, Service และการเชื่อมต่อ Backend ด้วย HttpClient เหมาะกับนักพัฒนา IT Manager และผู้มีพื้นฐาน JavaScript และ Web Service

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

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

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

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

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

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

Angular เป็น Front-end Framework จาก Google สำหรับสร้าง Single Page Application (SPA) ที่ไม่ต้องโหลดหน้าใหม่ทุกครั้ง โดยฝั่งเบราว์เซอร์คุยกับเซิร์ฟเวอร์ผ่าน REST API ทำให้ผู้ใช้ได้ประสบการณ์ที่ลื่นไหล Angular รุ่นปัจจุบันเปลี่ยนไปมากจาก AngularJS และรุ่นแรก ๆ ทั้ง Standalone Component ที่ไม่ต้องพึ่ง NgModule, Signals สำหรับจัดการ State, Control Flow แบบใหม่ในเทมเพลต และทำงานแบบ Zoneless เป็นค่าเริ่มต้น จึงเรียนรู้ได้ง่ายกว่าเดิมและเหมาะกับงานระบบขององค์กร

หลักสูตรนี้เป็นจุดเริ่มต้นสำหรับผู้ที่ต้องการเรียน Angular 22 ตั้งแต่ความต่างของ Angular แต่ละรุ่น การติดตั้งด้วย Angular CLI, TypeScript ที่จำเป็น, Component และ Data Binding, Signals, Routing, ฟอร์มและ Validation, Pipes, Service จนถึงการเชื่อมต่อ Backend ด้วย HttpClient ผ่าน Lab สั้น ๆ และ Workshop ระบบรายชื่อพนักงานแบบ CRUD เพื่อนำไปต่อยอดในงานจริงและหลักสูตรขั้นสูงต่อไป (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

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

เข้าใจความแตกต่างระหว่าง AngularJS, Angular รุ่นเดิม และ Angular รุ่นปัจจุบัน
สร้าง Standalone Component และใช้ Data Binding, Signals และ Control Flow ได้
จัดการ Routing ของแอปแบบ SPA ได้
สร้างฟอร์มพร้อม Validation และใช้ Pipes จัดรูปแบบข้อมูลได้
ใช้ Service และ HttpClient ติดต่อกับ Backend ผ่าน REST API ได้
นำ Angular ไปเริ่มโปรเจกต์ในองค์กรและอ่านโค้ด Angular รุ่นเดิมได้

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

ผู้ที่ต้องการพัฒนา Web Application ด้วย Angular ขั้นพื้นฐาน
Developer ที่เขียนเว็บด้วยภาษาอื่นและต้องการเริ่มใช้ Front-end Framework
IT Manager ที่ต้องการเข้าใจโครงสร้างโปรเจกต์ Angular ของทีม
ผู้ที่ต้องดูแลระบบ Angular รุ่นเดิมและต้องการเข้าใจแนวทางปัจจุบัน

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

เข้าใจพื้นฐานภาษา JavaScript บ้าง
เข้าใจหลักการทำงานเบื้องต้นของ Web Service และ REST API
มีพื้นฐานการเขียนโปรแกรมมาบ้าง เช่น PHP, C# หรือ Java
เข้าใจ HTML และ CSS เบื้องต้น

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic Angular สำหรับผู้เริ่มต้น เนื้อหาเขียนใหม่สำหรับ Angular 22 อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และปิดท้ายด้วย Workshop ระดับ Beginner ผู้เรียนจะได้เข้าใจความต่างของ Angular แต่ละรุ่น ติดตั้งด้วย Angular CLI เขียน TypeScript ที่จำเป็น สร้าง Standalone Component ใช้ Data Binding, Signals และ Control Flow ทำ Routing สร้างฟอร์มพร้อม Validation ใช้ Pipes และ Service แล้วเชื่อมต่อ Backend ด้วย HttpClient ผ่าน Workshop ระบบรายชื่อพนักงาน พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ

Day 1 พื้นฐาน Angular 22 และ Component

Section 1: Lab: รู้จัก Angular และเตรียมเครื่องมือ

SPA คืออะไร และ Angular ทำงานคู่กับ REST API อย่างไร
AngularJS, Angular รุ่นเดิมแบบ NgModule และ Angular รุ่นปัจจุบันต่างกันอย่างไร
รอบการออกรุ่นและช่วง LTS ของ Angular
ติดตั้ง Node.js และ Angular CLI แล้วสร้างโปรเจกต์ด้วย ng new
Lab: รันแอปแรกด้วย ng serve และสำรวจไฟล์ main.ts กับ app.config.ts

Section 2: TypeScript ที่ต้องใช้ใน Angular

Type, Interface และ Union Type
Class, Access Modifier และ Decorator
import และ export ระหว่างไฟล์
Promise, async/await และ Observable เบื้องต้น
Lab: เขียน Model ข้อมูลพนักงานด้วย Interface

Section 3: Lab: Standalone Component และ Data Binding

สร้าง Component ด้วย ng generate และส่วนประกอบของ @Component
Interpolation และ Property Binding
Event Binding และ Two-way Binding
แยกไฟล์ Template และ Style ของ Component
Lab: การ์ดแสดงข้อมูลพนักงาน

Section 4: Lab: Signals และ Control Flow

signal(), set() และ update() สำหรับเก็บ State
computed() สำหรับค่าที่คำนวณจาก State อื่น
แสดงผลตามเงื่อนไขด้วย @if และ @switch
วนแสดงรายการด้วย @for พร้อม track และ @empty
Lab: รายการพนักงานที่ค้นหาและนับจำนวนได้

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

รับค่าจาก Component แม่ด้วย input()
ส่ง Event กลับด้วย output()
Two-way Binding ระหว่าง Component ด้วย model()
วางเนื้อหาจากภายนอกด้วย ng-content
Lab: แยกหน้ารายการเป็น Component แม่และลูก

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

Section 6: Lab: Routing

กำหนด Route ด้วย provideRouter และแสดงผลด้วย RouterOutlet
นำทางด้วย routerLink และ Router.navigate()
รับ Route Parameter ผ่าน Component Input
Lazy Loading รายหน้าด้วย loadComponent และหน้า 404
Lab: หน้ารายการ หน้ารายละเอียด และหน้าแก้ไขพนักงาน

Section 7: Lab: ฟอร์มและ Validation

Template-driven Forms ด้วย ngModel สำหรับฟอร์มง่าย ๆ
Reactive Forms ด้วย FormGroup, FormControl และ Validators
Signal Forms ด้วย form() และ FormField
แสดงข้อความแจ้งเตือนเมื่อกรอกข้อมูลไม่ถูกต้อง
Lab: ฟอร์มเพิ่มพนักงานพร้อม Validation

Section 8: Pipes และ Service

Pipe ในตัว เช่น date, currency, number และ uppercase
สร้าง Custom Pipe สำหรับจัดรูปแบบข้อมูลของงาน
แยกตรรกะไปไว้ใน Service และเรียกใช้ด้วย inject()
เก็บ State ที่ใช้ร่วมกันหลายหน้าไว้ใน Service
Lab: Service จัดการข้อมูลพนักงาน

Section 9: Lab: เชื่อมต่อ Backend ด้วย HttpClient

ตั้งค่า provideHttpClient และ REST API จำลองด้วย json-server
GET, POST, PUT และ DELETE ด้วย HttpClient
ทำงานกับ Observable และแปลงเป็น Signal ด้วย toSignal()
แสดงสถานะกำลังโหลดและจัดการข้อผิดพลาด
Lab: ดึงและบันทึกข้อมูลพนักงานผ่าน API

Section 10: Workshop: ระบบรายชื่อพนักงาน

รวมหน้ารายการ ค้นหา ฟอร์ม และรายละเอียดเป็นระบบเดียว
Build สำหรับ Production ด้วย ng build
อ่านโค้ด Angular รุ่นเดิมที่ใช้ NgModule และ *ngIf
อัปเกรดโปรเจกต์ด้วย ng update และ Migration ของ Angular CLI
นำเสนอผลงานและแนวทางเรียนต่อ

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

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

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

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

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

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

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

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

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

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

Standalone Component ใน Angular คืออะไร

Standalone Component คือคอมโพเนนต์ที่ประกาศสิ่งที่ตัวเองใช้ไว้ใน imports ของคอมโพเนนต์เองโดยไม่ต้องลงทะเบียนใน NgModule และเป็นค่าเริ่มต้นของโปรเจกต์ Angular รุ่นปัจจุบัน แอปเริ่มทำงานด้วย bootstrapApplication และตั้งค่าส่วนกลางอย่าง Router และ HttpClient ในไฟล์ app.config.ts ทำให้โครงสร้างเรียบง่ายขึ้นและทำ Lazy Loading รายหน้าได้ด้วย loadComponent ส่วนโค้ดรุ่นเดิมที่ยังใช้ NgModule ก็ยังทำงานได้และค่อย ๆ ย้ายมาได้ด้วย Migration ของ Angular CLI

Data binding ใน Angular มีกี่แบบ

มีสี่แบบหลัก String Interpolation ใช้วงเล็บปีกกาคู่แสดงค่าจากคอมโพเนนต์ลงในเทมเพลต Property Binding ใช้ [property] ส่งค่าเข้าไปยังคุณสมบัติของ element หรือคอมโพเนนต์ลูก Event Binding ใช้ (event) รับเหตุการณ์ เช่น การคลิก แล้วเรียกเมธอด และ Two-way Binding ใช้ [(ngModel)] ในฟอร์ม หรือ model() ระหว่างคอมโพเนนต์ ให้ค่าตรงกันทั้งสองทาง สามแบบแรกส่งข้อมูลทางเดียว

ดึงข้อมูลจาก Backend ด้วย HttpClient ใน Angular มีขั้นตอนอย่างไร

เริ่มจากเพิ่ม provideHttpClient() ใน providers ของ app.config.ts จากนั้นสร้าง Service ที่เรียก inject(HttpClient) แล้วเขียนเมธอดอย่าง get, post, put หรือ delete โดยระบุชนิดข้อมูลที่จะได้กลับ ใช้ตัวดำเนินการ RxJS เช่น map แปลงข้อมูลและ catchError จัดการข้อผิดพลาด แล้วให้คอมโพเนนต์แปลงผลเป็น Signal ด้วย toSignal() หรือ subscribe เพื่อแสดงผล พร้อมแสดงสถานะกำลังโหลด

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

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

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

สร้างโปรเจกต์ Angular 22 ด้วย Angular CLI สร้าง Standalone Component ใช้ Data Binding, Signals และ Control Flow ทำ Routing หลายหน้า สร้างฟอร์มพร้อม Validation ทั้ง Reactive Forms และ Signal Forms ใช้ Pipes และ Service เชื่อมต่อ Backend ด้วย HttpClient และอ่านโค้ด Angular รุ่นเดิมที่ใช้ NgModule ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

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

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