Learn To Build An App Though Features Of Angular
  • Framework: Angular
  • Status: OnGoing
  • Github:
# Title Description Link
1 Setup Angular (Module) Bắt đầu với framework Angular và tìm hiểu cách để setup 1 ứng dụng Angular mẫu
<iframe width="400" height="100" src="https://www.youtube.com/embed/xR-3hdqRLLU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
2 Binding Data Hiểu cách truyền dữ liệu giữa Component vs View
<iframe width="400" height="100" src="https://www.youtube.com/embed/c6UuZvTy7f4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
3 Pass Data From Parent To Child Component Hiểu cách để truyền dữ liệu giữa các component với nhau. Từ cha đến con và ngược lại.
<iframe width="400" height="100" src="https://www.youtube.com/embed/88d6hVCauDA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
4 Routing Hiểu cách tạo routting trong ứng dụng Angular để điều hướng
<iframe width="400" height="100" src="https://www.youtube.com/embed/sBpGO_B1BLk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
5 Service Tìm hiểu cách tương tác với WebApi thông qua service
<iframe width="400" height="100" src="https://www.youtube.com/embed/v1wYSFBgINU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
6 Reactive Form Cơ Bản Tạo Form quản lý với Reactive Form
<iframe width="400" height="100" src="https://www.youtube.com/embed/JfiPvhbiRDg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
7 Handle Param On URL Tìm cách xử lý Param từ URL
<iframe width="400" height="100" src="https://www.youtube.com/embed/QaWCzdnKx3g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
8 BehaviorSubject - Commnunicate Together Between Components Hiểu về BehaviorSubject, giao tiếp giữa các component không liên hệ cha con với nhau.
<iframe width="400" height="100" src="https://www.youtube.com/embed/U4PlJIaO_dY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
9 Pipe Hiểu Pipe, cách để biến đổi dữ liệu trực tiếp trên View
<iframe width="400" height="100" src="https://www.youtube.com/embed/t-oe7LzKMTc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
10 CanActivate - Guard To The Routes Hiểu cách bảo mật routing với CanActivate
<iframe width="400" height="100" src="https://www.youtube.com/embed/msC9MPTNrCo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
11 Template Reference Hiểu về templateRef để render những đoạn html động.
<iframe width="400" height="100" src="https://www.youtube.com/embed/gpSje7VITm0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
12 Interceptor Hiểu interceptor như middleware trong Angular để bắt những request/response gửi lên server
<iframe width="400" height="100" src="https://www.youtube.com/embed/i1oG9qf2H0k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
13 Dynamic Component Hiểu cách tạo động component trong Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/km_8Qe9usmw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
14 Observable (Rxjs) Hiểu về cách làm việc của Observable của thư viện Rxjs. Hiểu cách khởi tạo Observable
<iframe width="400" height="100" src="https://www.youtube.com/embed/7jJdAij63no" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
15 Observable - Methods Áp dụng những phương thức của Rxjs vào ứng dụng Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/iS-6aSjwNXk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
16 Resolve into Routing Hiểu đặc tính Resolve trong routing, xử lý như middleware
<iframe width="400" height="100" src="https://www.youtube.com/embed/tjCTGNDZyC8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
17 Change Detection Strategy Hiểu cơ chế track thay đổi của ứng dụng Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/UKvURqqglJc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
18 Multiple Router Outlet Hiểu cách tạo multiple router-outlet để group phân theo từng phân vùng của ứng dụng
<iframe width="400" height="100" src="https://www.youtube.com/embed/We7k_tBiiRA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
19 Dynamic Form Tìm hiểu cách hiện thực control động trong Reactive Form với FormArray
<iframe width="400" height="100" src="https://www.youtube.com/embed/VjxqudKQ3bw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
20 Introduce Typescript In Angular Giới thiệu ngôn ngữ Typescript
<iframe width="400" height="100" src="https://www.youtube.com/embed/MWULF5_kkg8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
21 Typescript - Type, Optional Chaining, Dynamic Type Hiểu type, optional chaining, dynamic type, ... trong ngôn ngữ Typescript
<iframe width="400" height="100" src="https://www.youtube.com/embed/NPl1IAl00ok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
22 Typescript - Interface Hiện thực interface trong typescript để ứng dụng vào Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/OLZ4JzbsjDg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
23 Typescript - Class - Accessor - Getter/Setter - Static Tìm hiểu vài đặc tính khác của ngôn ngữ Typescript như: Class - Accessor - Getter/Setter - Static
<iframe width="400" height="100" src="https://www.youtube.com/embed/B9AzhNY5pvg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
24 Typescript - Abstract Class Hiểu abstract class trong ngôn ngữ Typescript
<iframe width="400" height="100" src="https://www.youtube.com/embed/KZAQ5ap3p2c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
25 Architecture Tìm hiểu cách tạo kiến trúc cơ bản cho ứng dụng Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/Q0DNcXw4vYI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
26 Lazy Loading Hiện thực lazy-loading để cải thiện performance tải package cho ứng dụng Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/6NlzcQPgo4g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
27 Strictly Typed Form Hiểu về Strictly Typed Form, cải thiện code tạo form quản lý
<iframe width="400" height="100" src="https://www.youtube.com/embed/LM2uVCmXnH8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
28 Material Angular UI Tìm hiểu framework Angular Material UI để thiết kế giao diện đồng nhất trong ứng dụng Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/RVAdf5bFuVQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
29 Standalone Component Hiểu về standalone component, cách tiếp cận mới trong Angular. Migrate từ ứng dụng module to Standalone Component
<iframe width="400" height="100" src="https://www.youtube.com/embed/XA8iQwLIM7w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
30 Extensions for VS Code Tìm hiểu vài extension hỗ trợ lặp trình code nhanh hơn trong Visual Studio Code
<iframe width="400" height="100" src="https://www.youtube.com/embed/LFg2QhRj-4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
31 Async Pipe Cách xử lý data bất đồng bộ ở bên ngoài template trong Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/awlHO5HvFYQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
32 Progressing Bar Tạo thanh Progressing bar chờ khi gọi API trong Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/MRSr9Ih8_xc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
33 Loading Spinner Hiện thực Loading Spinner trong ứng dụng Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/vR5BDnd1JcY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
34 Login State Quản lý state login, hiển thị tên trên thanh nav bar khi login thành công
<iframe width="400" height="100" src="https://www.youtube.com/embed/HyIeSA_A7T4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
35 Persitent Login Hiện thực code hiển thị dữ liệu sau khi login thành công
<iframe width="400" height="100" src="https://www.youtube.com/embed/zHndbHYi7dk?si=N6TFrI5agaqCHHvE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
36 Decode Token Cách decode token để bảo mật hơn trong ứng dụng Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/Y7tnGyt6b5U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
37 Check The Remaining Token Expiration Time Kiểm tra thời hạn token gần timeout và hiển popup để thông báo
<iframe width="400" height="100" src="https://www.youtube.com/embed/o6e2NU3cyGM?si=KV9wAkEFj6Y4DDOE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
38 Encrypt Password Mã hóa password để bảo mật trước khi gửi lên server xử lý
<iframe width="400" height="100" src="https://www.youtube.com/embed/NKPlkVrJrGw?si=8vrdi0sjiPq0Gqxp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
39 Multiple Language Hiện thực code xử lý multiple language trong Angular
<iframe width="400" height="100" src="https://www.youtube.com/embed/qGlDYmG-8K0?si=oOsJkBDu_zTedRXq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
40 Signal Tìm hiểu đặc tính Signal
<iframe width="400" height="100" src="https://www.youtube.com/embed/XjyM-WsstK4?si=jwiwmiJhWPXl5W6l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
41 Signal Rxjs Interop Hiểu Signal Rxjs Interop
<iframe width="400" height="100" src="https://www.youtube.com/embed/MsD17dXg3dI?si=vlxyxoM1VWVyJ3UJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Stroke hand