Khóa học Phát triển Front-end Angular

Bài học 1 • Mô-đun Angular và Khởi động Ứng dụng

Giải thích về NgModules, AppModule gốc và cách Angular khởi động ứng dụng. Cung cấp bối cảnh cấu trúc cần thiết trước khi xây dựng các component.

Bài học 2 • Kiến thức cơ bản về TypeScript cho Angular

Giới thiệu các kiểu, interface và decorator trong TypeScript cần thiết để viết mã Angular một cách tự tin. Kết nối kiến thức JavaScript với hệ sinh thái kiểu của Angular.

Bài học 3 • Giới thiệu về Framework Angular

Bao quát vai trò của Angular trong phát triển front-end hiện đại và kiến trúc lấy cảm hứng từ MVC. Thiết lập nền tảng khái niệm cho tất cả các chủ đề framework tiếp theo.

Bài học 4 • Thiết lập Môi trường Phát triển

Cài đặt và cấu hình Node.js, npm và Angular CLI. Đảm bảo mỗi học viên có một không gian làm việc cục bộ nhất quán và có thể tái tạo.

Bài học 1 • Structural Directive Tích hợp Sẵn

Áp dụng *ngIf, *ngFor và *ngSwitch để kiểm soát cấu trúc DOM một cách động. Minh họa cách các directive mở rộng khả năng biểu đạt của template.

Bài học 2 • Property Binding và Event Binding

Dạy về luồng dữ liệu một chiều thông qua property binding và xử lý sự kiện người dùng thông qua event binding. Kết nối logic component với các phần tử DOM và tương tác của người dùng.

Bài học 3 • Cú pháp Template và Biểu thức

Bao quát ngôn ngữ biểu thức template, điều hướng an toàn và biến tham chiếu template của Angular. Cho phép kết xuất nội dung động trong các khung nhìn component.

Bài học 4 • Vòng đời Component (Lifecycle Hooks)

Khám phá toàn bộ chuỗi lifecycle hook từ ngOnInit đến ngOnDestroy. Dạy khi nào và tại sao sử dụng mỗi hook để khởi tạo và dọn dẹp.

Bài học 1 • ViewChild và ContentChild Queries

Truy cập các thể hiện component con và nội dung được chiếu theo phương thức lập trình thông qua queries. Cho phép phối hợp component nâng cao ngoài template binding.

Bài học 2 • Giao tiếp Cha-sang-Con với @Input

Sử dụng @Input để truyền dữ liệu xuống cây component và xác thực input với setter. Thiết lập mẫu luồng dữ liệu đi xuống chính trong Angular.

Bài học 3 • Xây dựng Structural Directive Tùy chỉnh

Triển khai các structural directive bằng cách sử dụng TemplateRef và ViewContainerRef để thao tác DOM. Mở rộng khả năng của học viên trong việc tạo logic bố cục có thể tái sử dụng.

Bài học 4 • Xây dựng Attribute Directive Tùy chỉnh

Tạo các directive sửa đổi giao diện hoặc hành vi của phần tử chủ mà không thay đổi cấu trúc DOM. Củng cố mẫu directive đã được giới thiệu trong Chương 2.

Bài học 1 • Tạo và Cung cấp các Dịch vụ Angular

Tạo các dịch vụ bằng CLI và đăng ký chúng ở phạm vi mô-đun, component hoặc gốc. Thiết lập lớp dịch vụ như là nơi chứa logic dùng chung.

Bài học 2 • HTTP Client và Tích hợp REST API

Cấu hình HttpClientModule và thực hiện các yêu cầu GET, POST, PUT và DELETE. Kết nối lớp dịch vụ với các nguồn dữ liệu back-end thực tế.

Bài học 3 • Xử lý Lỗi và HTTP Interceptor

Triển khai xử lý lỗi toàn cục với catchError và chuyển đổi yêu cầu/phản hồi với interceptor. Tạo ra các mẫu giao tiếp HTTP sẵn sàng cho môi trường production.

Bài học 4 • Đi sâu vào Dependency Injection

Khám phá hệ thống phân cấp DI, injection token và các loại provider. Cho phép kiểm soát chi tiết cách các phụ thuộc được giải quyết trong toàn bộ ứng dụng.

Bài học 1 • Route Guard và Kiểm soát Truy cập

Triển khai guard CanActivate, CanDeactivate và CanLoad để bảo vệ các route. Tích hợp xác thực và phân quyền vào lớp điều hướng.

Bài học 2 • Lazy Loading và Route Resolver

Chia ứng dụng thành các mô-đun tính năng được tải theo yêu cầu và tìm nạp trước dữ liệu bằng resolver. Cải thiện hiệu suất tải ban đầu và trải nghiệm người dùng.

Bài học 3 • Route Lồng nhau và Named Outlet

Cấu trúc các route con dưới route cha và sử dụng named outlet cho các khung nhìn phụ. Hỗ trợ các yêu cầu bố cục phức tạp trong các ứng dụng lớn.

Bài học 4 • Thiết lập Router và Điều hướng Cơ bản

Cấu hình RouterModule với các định nghĩa route và thêm router-outlet và routerLink. Thiết lập nền tảng cho tất cả các tính năng điều hướng.

Bài học 1 • Form Động với FormArray

Sử dụng FormArray để thêm và xóa các điều khiển form lúc chạy cho dữ liệu có độ dài thay đổi. Xử lý các tình huống thực tế như các mục dòng lặp lại.

Bài học 2 • Validator và Xác thực Tùy chỉnh

Áp dụng validator đồng bộ và bất đồng bộ, tạo các hàm validator tùy chỉnh có thể tái sử dụng. Đảm bảo tính toàn vẹn dữ liệu trước khi gửi.

Bài học 3 • Gửi Form và Quản lý Trạng thái

Xử lý việc gửi form, đặt lại và trạng thái dirty/touched để mang lại trải nghiệm người dùng hoàn thiện. Kết nối dữ liệu form với các lệnh gọi dịch vụ được giới thiệu trong Chương 4.

Bài học 4 • Biểu mẫu Dựa trên Mẫu

Sử dụng ngForm, ngModel và các validator tích hợp để xây dựng form khai báo trong template. Giới thiệu các khái niệm form với lượng mã TypeScript tối thiểu.

Bài học 1 • NgRx Entity và DevTools

Đơn giản hóa việc quản lý bộ sưu tập với NgRx Entity và kiểm tra trạng thái với Redux DevTools. Tăng tốc phát triển và gỡ lỗi các tính năng sử dụng nhiều store.

Bài học 2 • Giới thiệu về NgRx Store

Cài đặt NgRx và định nghĩa action, reducer và store cho một lát cắt tính năng. Thiết lập mẫu Redux trong hệ sinh thái Angular.

Bài học 3 • Trạng thái Dựa trên Dịch vụ với BehaviorSubject

Lưu trữ và chia sẻ trạng thái trên các component bằng BehaviorSubject trong một dịch vụ. Cung cấp giải pháp trạng thái nhẹ trước khi giới thiệu NgRx.

Bài học 4 • NgRx Effects cho Tác động Phụ

Xử lý các thao tác bất đồng bộ như gọi HTTP bên ngoài reducer bằng NgRx Effects. Giữ cho reducer thuần túy và tập trung logic tác động phụ.

Bài học 1 • Chiến lược Triển khai và Tích hợp CI/CD

Triển khai bản dựng Angular lên hosting tĩnh và tích hợp pipeline tự động để phân phối liên tục. Khép kín vòng đời phát triển từ mã nguồn đến production.

Bài học 2 • Kiểm thử Đơn vị cho Component và Dịch vụ

Viết kiểm thử đơn vị với Jasmine và TestBed cho component, dịch vụ và pipe. Xác thực các đơn vị riêng lẻ trong sự cô lập trước khi tích hợp.

Bài học 3 • Tối ưu hóa Gói và Cấu hình Bản dựng

Cấu hình bản dựng production, tree shaking và differential loading để có kích thước gói tối ưu. Chuẩn bị ứng dụng cho các ràng buộc triển khai thực tế.

Bài học 4 • Kiểm thử Đầu cuối với Cypress

Tự động hóa kiểm thử luồng người dùng với Cypress để xác thực hành vi ứng dụng đầy đủ. Bổ sung cho kiểm thử đơn vị với các tình huống thực tế dựa trên trình duyệt.