Advanced Angular 16 ขั้นสูง

Day 1:

Module 1: Project Setup

• เริ่มติดตั้งโปรเจ็กต์แรกกับ Angular 16
• การตั้งค่าโปรเจ็กต์ที่สร้างขึ้นมา
• เรียนรู้โครงสร้างโปรเจ็กต์ Angular 16 เจาะลึก
• ทดสอบ Run และปรับแต่งโปรเจ็กต์ที่สร้างขึ้นมา

Module 2: Advanced Components

• Lifecycle Hooks
• ViewChild
• ViewChildren
• Content Projection
• ContentChild
• ContentChildren

Module 3: Dependency Injection

• Creating a Service
• Adding to Module Providers
• Using the NamesService
• Injecting Dependencies into Services

Module 4: การทำ Data binding

• Integrating a pure ES6 JavaScript Library (lodash)
• Integrating JavaScript Widgets (plotly.js)
• Integrating old jQuery Widgets (jquery-datetimepicker)
• Integrating modern jQuery Widgets (Kendo UI for jQuery)
• Improving performance (NgZone)

Day 2:

Module 5: Styling Angular Components

• Separating Structural Styles From Theme Styles

• How To Create An Alternative Component Theme And Ship It With The Library
• Creating an Alternative Component Theme
• Angular Style Isolation - Emulated View Encapsulation
• Learn 2 More Alternative Ways of Handling CSS in Angular Applications
• Setting Up A Library Module, Confirming AOT is Supported
• Angular Component Testing Overview
• The Angular CLI Testing Infrastructure

Module 6: Authentication & Route Protection in Angular

• How Authentication Works
• Adding the Auth Page
• Switching Between Auth Modes
• Handling Form Input
• Preparing the Backend
• Preparing the Signup Request
• Sending the Signup Request
• Adding a Loading Spinner & Error Handling Logic
• Improving Error Handling
• Sending Login Requests
• Login Error Handling
• Creating & Storing the User Data
• Reflecting the Auth State in the UI
• Adding the Token to Outgoing Requests
• Attaching the Token with an Interceptor
• Adding Logout
• Adding Auto-Login
• Adding Auto-Logout
• Adding an Auth Guard

Module 7: Working with NgRx

• What is Application State?
• What is NgRx?
• Getting Started with Reducers
• Adding Logic to the Reducer
• Understanding & Adding Actions
• Setting Up the NgRx Store
• Selecting State
• Dispatching Actions
• Multiple Actions
• Preparing Update & Delete Actions
• Updating & Deleting Ingredients

Module 8: Angular Animations

• Setting up the Starting Project
• Animations Triggers and State
• Switching between States
• Transitions
• Advanced Transitions
• Transition Phases
• The "void" State
• Using Keyframes for Animations
• Grouping Transitions
• Using Animation Callbacks

Day 3:

Module 9: Adding Offline Capabilities with Service Workers

• Adding Service Workers
• Caching Assets for Offline Use
• Caching Dynamic Assets & URLs

Module 10: Angular Material

• Environment Setup
• Autocomplete
• Bottom Sheet
• Cards
• Widgets
• Layouts
• Inputs
• Icons
• Grids
• SideNav
• Fab Speed Dial
• Swipe
• Switches
• Themes
• Toasts

Module 11: Angular Internationalization (i18n) ทำเว็บหลายภาษาด้วย Angular

• Introduction to Angular Internationalization (i18n)
• Understanding Angular i18n Unique Identifiers
• Angular i18n Pluralization Support
• Angular i18n Alternative Expressions Support
• Running a Translated Angular Application using the Angular CLI

Module 12: Workshop Angular CRUD with NodeJS

• Setup Node JS
• Build a Node.JS Backend
• Connect MongoDB Database with Angular 16 MEAN Stack App
• Create Model with Mongoose JS
• Create RESTful APIs using Express JS Routes
• Set up Angular 16 MEAN Stack Project
• Activate Routing Service in MEAN Stack Angular App
• Create Angular 16 Service to Consume RESTful APIs
• Register an Employee by Consuming RESTful API in Angular 16 MEAN Stack App
• Show Employees List and Delete Student Object using RESTful API in MEAN Stack App
• Edit Employees Data in MEAN Stack Angular 16 App