Basic Angular พื้นฐาน

Basic Angular พื้นฐาน

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

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

เนื้อหาครอบคลุมตั้งแต่ Angular 5 ถึงเวอร์ชั่นปัจจุบัน (V.8) และมีการอัพเดทเนื้อหาอย่างต่อเนื่องสม่ำเสมอทุกรอบการอบรม ดังนั้นผู้เรียนมั่นใจได้ว่าจะได้เรียนรู้เทคโนโลยีและความสามารถล่าสุดของ framework ตัวนี้อย่างครบถ้วนสมบูรณ์

สาขากรุงเทพฯ (ลาดพร้าว)
  • 9 - 10 เมษายน 2020 (ว่าง 15)
  • เพื่อเข้าใจพื้นฐาน Angular สำหรับผู้เริ่มต้น
  • เรียนรู้คำสั่งและฟังก์ชันพื้นฐานใน Angular Version 5 ถึง Version 8 ขึ้นไป
  • เข้าใจรูปแบบการทำงานและสร้าง Template ในภาษา Angular ได้
  • เข้าใจการสร้าง API แบบ REST ด้วย Angular ได้
  • นำความรู้และเทคนิคทั้งหมดในหลักสูตรนี้ไปใช้งานร่วมกับโปรเจ็กต์ของคุณได้จริง
  • ผู้ที่ต้องการพัฒนา Web Application ด้วยภาษา Angular ขั้นพื้นฐาน
  • IT Managers
  • Developers
  • กลุ่มผู้สนใจทั่วไป
  • มีพื้นฐานการเขียนเว็บไซต์ html & css มาบ้าง
  • เข้าใจพื้นฐานภาษา Javascript บ้าง
  • เข้าใจหลักการทำงานเบื้องต้นของ Web Service
  • 12 ชั่วโมง
  • ราคาปกติ 4,500 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 4,050 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

Day 1:

Module 1: Framework concept and basic feature

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

Module 2: Project Setup

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

Module 3: Basic Core Components

  • รู้จัก 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 

Day 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 

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: Working with 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
06/02/2020 17:59:47