Web Development · WDC-60

Basic Angular 18 พื้นฐาน

12 hours 2 days

Last updated 25 Sep 2026

Basic Angular 18 พื้นฐาน is a 12-hour training course by IT Genius Institute. Angular JS เป็นหนึ่งใน Front end framework ที่กำลังมาแรงและได้รับความนิยมเป็นอย่างสูงตัวหนึ่ง ถูกพัฒนาขึ้นโดย Google เพื่อนำมาประยุกต์สร้างโปรเจกต์ในรูปแบบ…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

Basic Angular 18 พื้นฐาน Angular JS เป็นหนึ่งใน Front end framework ที่กำลังมาแรงและได้รับความนิยมเป็นอย่างสูงตัวหนึ่ง ถูกพัฒนาขึ้นโดย Google เพื่อนำมาประยุกต์สร้างโปรเจกต์ในรูปแบบ Single Page Application (SPA) หรือแอพพลิเคชั่นที่มีเพียงหน้าเดียว ไม่ต้องรีโหลดหรือส่งข้อมูลไปมาหลายหน้า โดยที่ Client จะติดต่อกบทาง Server ด้วยการเรียกผ่านเทคนิค AJAX ไปยัง Restful API (REST) ของ Server ทำให้ประสบการณ์การใช้งานของผู้ใช้ดีขึ้นมาก

หลักสูตรนี้เป็นจุดเริ่มต้นสำหรับผู้สนใจศึกษา Framework Angular เหมาะสำหรับผู้เริ่มต้นไปต่อยอดศึกษาการใช้งานใน Angular ในขั้นสูงต่อไป โดยเน้นเรื่องพื้นฐานตั้งแต่การเตรียมความพร้อม การติดตั้ง เรียนรู้ concept ของ framework ตัวนี้ การทำ binding การส่งข้อมูลระหว่าง Controller กับ View การสร้าง Template ไปจนถึงการติดต่อกับ Web Service พื้นฐาน บน Server ที่ประยุกต์ทำ API ในโปรเจกต์ต่างๆ ของผู้อบรมได้ในอนาคตต่อไป

ดังนั้นผู้เรียนมั่นใจได้ว่าจะได้เรียนรู้เทคโนโลยีและความสามารถล่าสุดของ framework ตัวนี้อย่างครบถ้วนสมบูรณ์

Objectives

เข้าใจความแตกต่าง Angular Version ต่างๆ
เข้าใจการทำงานและจัดการ Form & Validation
เข้าใจการใช้งาน Pipes
เข้าใจการใช้ Angular ติดต่อกับส่วน Backend
สามารถนำ Angular Framework ไปใช้สร้างโปรเจกต์ต่างๆ ในองค์กรได้

Who this course is for

ผู้ที่ต้องการพัฒนา Web Application ด้วยภาษา Angular JS ขั้นพื้นฐาน
IT Managers
Developers
กลุ่มผู้สนใจทั่วไป

Prerequisites

เข้าใจพื้นฐานภาษา Javascript บ้าง
เข้าใจหลักการทำงานเบื้องต้นของ Web Service
มีพื้นฐานการเขียนโปรแกรมมิ่ง เช่น PHP, ASP อยู่บ้าง

Curriculum

Module 1: แนะนำภาพรวมและแนวคิดของ Angular

แนะนำภาพรวมของ Angular
ความแตกต่างระหว่าง Angular JS เวอร์ชั่นล่าสุด กับ เวอร์ชั่นก่อนหน้า
มีอะไรใหม่ใน Angular 18
ติดตั้งเครื่องมือและสภาพแวดล้อมที่จำเป็น
ลงส่วนเสริมและตั้งค่าเครื่องมือให้เหมาะสมสำหรับการเริ่มต้น

Module 2: เริ่มสร้างโปรเจกต์ Angular

เริ่มติดตั้งโปรเจกต์แรกกับ Angular 18
การตั้งค่าโปรเจกต์ที่สร้างขึ้นมา
เรียนรู้โครงสร้างโปรเจกต์ Angular 18 พื้นฐาน
รู้จักภาษา TypeScript และการทำงานร่วมกับโปรเจกต์ Angular
ทดสอบ Run และปรับแต่งโปรเจกต์ที่สร้างขึ้นมา

Module 3: พื้นฐานการทำงานกับ Component

รู้จัก Component และความสำคัญใน Angular
ฝึกสร้าง Component ใหม่
การปรับแต่ง Component ในโปรเจกต์
การทำงานกับ Component Templates
การทำงานกับ Component Style
เรียนรู้การทำงานกับ Component Selector

Module 4: การทำ Data binding

รู้จัก Databinding
การทำงานกับ String Interpolation
เรียนรู้ Property Binding
เรียนรู้ Property Binding vs String Interpolation
เรียนรู้และทำงานกับ Event Binding
การส่งข้อมูลระหว่าง Component ด้วย Event Binding
รู้จักการทำงานแบบ Two-Way-Databinding
ทำงานกับฟอร์มร่วมกับ Databinding

Module 5: การทำงานกับ Directives

ทำความเข้าใจกับ Directive ต่างๆ ใน Angular
เรียนรู้ directive แบบต่างๆ เช่น ngIf, ngStyle, ngFor เป็นต้น
workshop ตัวอย่างการทำงานกับ directive

Module 6: การทำงานกับ Modules

แนะนำทำความรู้จัก Module ใน Angular
Analyzing the AppModule
Getting Started with Feature Modules
Splitting Modules Correctly
Adding Routes to Feature Modules
Component Declarations
Understanding Lazy Loading
Implementing Lazy Loading
Modules & Services

Module 7: การทำงานกับ Routing

ทำไมต้องใช้ Router
ทำความเข้าใจการทำงานของ Router จากโปรเจกต์ตัวอย่าง
Setting up and Loading Routes
Navigating with Router Links
Understanding Navigation Paths
Styling Active Router Links
Navigating Programmatically
Using Relative Paths in Programmatic Navigation
Passing Parameters to Routes
Fetching Route Parameters
Fetching Route Parameters Reactively

Module 8: การทำงานและจัดการ Form & Validation

Creating the Form and Registering the Controls
Submitting and Using the Form
Understanding Form State
Accessing the Form with @ViewChild
Adding Validation to check User Input
Built-in Validators & Using HTML5 Validation
Using the Form State
Outputting Validation Error Messages
Set Default Values with ngModel Property Binding
Using ngModel with Two-Way-Binding
Grouping Form Controls
Handling Radio Buttons
Using Form Data
Resetting Forms

Module 9: การใช้งาน Pipes

Introduction & Why Pipes are useful
Using Pipes
Parametrizing Pipes
Chaining Multiple Pipes
Creating a Custom Pipe
Parametrizing a Custom Pipe
Understanding the "async" Pipe

Module 10: การเขียนเชื่อมต่อกับ Http Client Service

เรียนรู้การใช้ Angular ติดต่อกับส่วน Backend

The Anatomy of a Http Request
Backend (Firebase) Setup
Sending a POST Request
GETting Data
Using RxJS Operators to Transform Response Data
Using Types with the HttpClient
Outputting Posts
Showing a Loading Indicator
Using a Service for Http Requests
Services & Components Working Together
Sending a DELETE Request
Handling Errors

Frequently asked questions

Who is Basic Angular 18 พื้นฐาน for, and what background is needed?

Built for ผู้ที่ต้องการพัฒนา Web Application ด้วยภาษา Angular JS ขั้นพื้นฐาน · IT Managers · Developers Background you should have: เข้าใจพื้นฐานภาษา Javascript บ้าง · เข้าใจหลักการทำงานเบื้องต้นของ Web Service Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does Basic Angular 18 พื้นฐาน cost and how long does it run?

THB 6,500 (currently THB 5,850 on promotion). The course runs 12 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.