Basic Angular 9 Framework Online Course

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

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

วันที่ 1:

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

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

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

• เริ่มติดตั้งโปรเจ็กต์แรกกับ Angular 9
• การตั้งค่าโปรเจ็กต์ที่สร้างขึ้นมา
• เรียนรู้โครงสร้างโปรเจ็กต์ Angular 9 พื้นฐาน
• รู้จักภาษา 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 

วันที่ 2:

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 

วันที่ 3:

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