frontendBeginner

Angular 101 - Nền tảng SPA hiện đại

Angular nền tảng: modules/components/services, DI, binding, routing, forms và HTTP. Nhấn mạnh best practices để xây SPA rõ ràng, dễ mở rộng và sẵn sàng production.

⭐ 4.7 (30 đánh giá)⏱ 18h👥 160 học viên📚 14 bài học📎 18 tài liệu🌐 Vietnamese

10.000.000 ₫

Tạo bởi ITSS Training

🌐 VietnameseBeginner

Lộ trình học

Buổi 1

Ngày 1-2

Mục tiêu

Hiểu rõ Angular architecture
Setup Angular project
Tạo component đầu tiên

Nội dung

Giới thiệu tổng quan về Angular và TypeScript, lý do Angular phù hợp cho các ứng dụng doanh nghiệp, so sánh nhanh với React/Vue để định vị tư duy kiến trúc khi bắt đầu dự án.
Cài đặt Angular CLI, cấu hình Node/NPM tương thích; kiểm tra phiên bản và thiết lập workspace giúp tạo, chạy, build dự án thuận tiện trên nhiều máy khác nhau.
Tạo project với ng new, giải thích chi tiết cấu trúc thư mục, ý nghĩa các file cấu hình và cách tinh chỉnh cài đặt để phù hợp tiêu chuẩn code của nhóm.
Trình bày kiến trúc Modules–Components–Services của Angular, cách tách nhỏ theo feature và lợi ích của việc đóng gói chức năng thành module độc lập dễ tái sử dụng.
Tạo component bằng ng generate, quy ước selector/template/style, đặt tên và vị trí lưu trữ; demo binding dữ liệu đơn giản để hình dung vòng đời rendering.

Buổi 2

Ngày 3-4

Mục tiêu

Data binding và directives
Component communication
Services và dependency injection

Nội dung

Áp dụng property binding và event binding để kết nối dữ liệu hai chiều, giải thích quy tắc template expression và lưu ý hiệu năng khi binding nhiều phần tử.
Sử dụng structural directives như *ngIf, *ngFor để điều khiển hiển thị; trình bày trackBy trong *ngFor nhằm giảm re-render không cần thiết khi danh sách lớn.
Truyền dữ liệu giữa components bằng @Input/@Output, mô tả kịch bản bố–con và pattern chia tách presentational/container để tăng khả năng tái sử dụng.
Tạo service cung cấp logic nghiệp vụ, tiêm phụ thuộc qua Dependency Injection; tổ chức provider theo scope module/component nhằm quản lý vòng đời hợp lý.
Bài tập tổng hợp: xây dựng luồng giao tiếp nhiều component, xử lý sự kiện, validate dữ liệu và hiển thị thông báo thân thiện người dùng.

Buổi 3

Ngày 5-6

Mục tiêu

Routing và navigation
HTTP Client và API calls
Forms và validation

Nội dung

Thiết lập Angular Router cho điều hướng trang, khởi tạo routes con, lazy loading module để giảm kích thước bundle ban đầu khi ứng dụng lớn.
Thực hành navigation, đọc/ghi route parameters và query params; sử dụng guards để bảo vệ tuyến đường yêu cầu quyền truy cập nhất định.
Gọi API với HttpClient, interceptor cho header chung, bắt lỗi và retry; nêu rõ quy ước đặt service truy cập dữ liệu theo domain.
So sánh reactive forms với template-driven forms, ưu nhược điểm và cách lựa chọn; cấu trúc form phức tạp bằng FormGroup/FormArray.
Triển khai form validation đồng bộ/bất đồng bộ, hiển thị lỗi thân thiện; tổng hợp chiến lược xử lý lỗi tập trung để nâng cao UX.

Buổi 4

Ngày 7-8

Mục tiêu

Advanced features
Project thực tế
Deployment

Nội dung

Sử dụng pipes sẵn có và viết custom pipes để chuyển đổi dữ liệu trên template đúng chuẩn i18n, định dạng số, ngày và chuỗi an toàn.
Áp dụng guards để kiểm soát truy cập, interceptors cho logging/auth; thiết kế middleware frontend nhất quán với backend.
Giới thiệu state management cơ bản với BehaviorSubject/Service; nguyên tắc bất biến và tách pure logic để dễ test.
Bài tập dự án: xây dựng ứng dụng CRUD hoàn chỉnh với phân trang, tìm kiếm, lọc; tổ chức API layer rõ ràng và testable.
Build production, phân tích bundle, tối ưu lazy load và prefetch; triển khai demo lên hosting và cấu hình môi trường an toàn.

Buổi 5

Ngày 9-10

Mục tiêu

RxJS nâng cao
Tối ưu hiệu năng

Nội dung

Làm việc với Subject, BehaviorSubject, ReplaySubject và multicasting; lựa chọn phù hợp theo kịch bản đẩy dữ liệu thời gian thực trong app.
Xử lý lỗi RxJS bằng catchError/retry/backoff; đóng stream đúng cách để tránh memory leak và zombie subscriptions.
Tối ưu Change Detection với OnPush, pure pipe và trackBy; đo đạc tác động lên hiệu năng khi render danh sách lớn.
Thiết kế lazy loading modules theo feature, chia nhỏ route hợp lý; kết hợp preloading strategy để cân bằng thời gian tải.

Buổi 6

Ngày 11-12

Mục tiêu

Forms nâng cao
Best practices

Nội dung

Reactive Forms nâng cao: FormArray động, nested group, kỹ thuật patchValue/setValue; đồng bộ dữ liệu server với UI mượt mà.
Viết custom validators đồng bộ/bất đồng bộ, tái sử dụng nhiều form; hiển thị lỗi theo chuẩn UX và hỗ trợ i18n.
Tối ưu hiệu năng form bằng debounce, distinctUntilChanged và detach/reattach change detector ở trường hợp phức tạp.
Chuẩn hóa cấu trúc thư mục theo feature/domain; quy ước đặt tên file, barrel export giúp import rõ ràng và gọn nhẹ.

Buổi 7

Ngày 13-14

Mục tiêu

Testing
CI/CD

Nội dung

Viết unit test với Jasmine/Karma cho services và pure functions; dùng spies/mocks để cô lập phụ thuộc và tăng tốc test.
Component testing: TestBed, fakeAsync và harness; kiểm tra input/output, async pipe và tương tác DOM phức tạp.
Thiết lập CI chạy lint/test/build trên pull request; cache node_modules hợp lý để rút ngắn thời gian pipeline.
Đặt ngưỡng coverage, báo cáo chất lượng tự động; thống nhất quy tắc review nhằm duy trì codebase bền vững lâu dài.

Buổi 8

Ngày 15-16

Mục tiêu

Dự án tổng kết
Triển khai

Nội dung

Hoàn thiện tính năng còn lại, rà soát UX copy và trạng thái lỗi; đảm bảo truy cập được với bàn phím và trình đọc màn hình.
Tối ưu build bằng budgets, source-map-explorer và cấu hình Terser; kiểm tra kích thước bundle trước khi phát hành.
Triển khai bản demo lên dịch vụ hosting, cấu hình môi trường và hậu kiểm nhật ký lỗi để cải thiện vòng lặp phản hồi.
Đánh giá kết quả học tập, lập roadmap học tiếp theo (NgRx/SSR/Module Federation) và định hướng nâng cấp dự án nhóm.