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

Bài học 1 • Tạo Khung Dự Án Angular Đầu Tiên

Sử dụng Angular CLI để tạo dự án, khám phá cấu trúc tệp và chạy máy chủ phát triển. Xây dựng sự quen thuộc với bố cục không gian làm việc được sử dụng trong suốt khóa học.

Bài học 2 • Thiết Lập Môi Trường Phát Triển

Cài đặt Node.js, npm và Angular CLI để chuẩn bị không gian làm việc cục bộ. Trực tiếp kích hoạt việc tạo dự án được đề cập trong phần tiếp theo.

Bài học 3 • TypeScript Cần Thiết cho Angular

Giới thiệu các kiểu TypeScript, interface, decorator và mô-đun như được sử dụng trong Angular. Đảm bảo học viên có thể đọc và viết code Angular một cách tự tin từ chương hai trở đi.

Bài học 1 • Cấu Trúc của một Component Angular

Phân tách decorator, lớp, template và style của component thành các vai trò của chúng. Thiết lập mô hình tư duy cho mọi thành phần giao diện người dùng được xây dựng trong khóa học này.

Bài học 2 • Attribute Directive và Pipe

Áp dụng các attribute directive có sẵn như ngClass và ngStyle, và chuyển đổi dữ liệu với các pipe có sẵn. Hoàn thiện khả năng template trước khi chuyển sang service.

Bài học 3 • Structural Directive Có Sẵn

Đề cập ngIf, ngFor và ngSwitch để kết xuất có điều kiện và danh sách trong template. Cho phép hiển thị nội dung động cần thiết cho giao diện người dùng thực tế.

Bài học 4 • Cú Pháp Template và Ràng Buộc Dữ Liệu

Dạy về nội suy, ràng buộc thuộc tính, ràng buộc sự kiện và ràng buộc hai chiều với ngModel. Kết nối logic component với DOM cho giao diện người dùng tương tác.

Bài học 1 • Tìm Hiểu Sâu về Tiêm Phụ Thuộc

Khám phá hệ thống phân cấp injector của Angular, token của provider và phạm vi tiêm. Cho phép kiểm soát chính xác việc khởi tạo và chia sẻ service trên các mô-đun.

Bài học 2 • Tạo và Sử Dụng Service

Tạo service bằng CLI, đóng gói logic nghiệp vụ và tiêm chúng vào component. Minh họa nguyên tắc trách nhiệm duy nhất trong kiến trúc Angular.

Bài học 3 • Hiểu về NgModule

Giải thích declarations, imports, exports và providers trong metadata của NgModule. Thiết lập hệ thống mô-đun tổ chức mọi ứng dụng Angular.

Bài học 1 • Route Guard và Resolver

Bảo vệ route với guard CanActivate và CanDeactivate và tìm nạp trước dữ liệu với Resolve. Đảm bảo điều hướng an toàn và dữ liệu được tải trước khi kết xuất component.

Bài học 2 • Route Con và Outlet Được Đặt Tên

Lồng các route con trong mô-đun tính năng và sử dụng outlet được đặt tên cho các chế độ xem phụ. Hỗ trợ bố cục phức tạp như bảng điều khiển với bảng điều khiển bên.

Bài học 3 • Lazy Loading Mô-Đun Tính Năng

Tách ứng dụng thành các mô-đun tính năng được tải chậm để giảm kích thước gói ban đầu. Trực tiếp cải thiện các số liệu hiệu suất được đề cập trong các chương nâng cao.

Bài học 4 • Tham Số Route và Chuỗi Truy Vấn

Đọc các phân đoạn route động và tham số truy vấn tùy chọn bằng ActivatedRoute. Cho phép chế độ xem chi tiết và danh sách được lọc dựa trên trạng thái URL.

Bài học 1 • Async Pipe và Tích Hợp Template

Đăng ký observable trực tiếp trong template bằng async pipe, loại bỏ việc quản lý subscription thủ công. Giảm mã mẫu và ngăn rò rỉ bộ nhớ trong component.

Bài học 2 • Subject và Phát Đa Hướng

Sử dụng Subject, BehaviorSubject và ReplaySubject để phát đa hướng giá trị đến nhiều subscriber. Kích hoạt các mẫu trạng thái dùng chung được sử dụng trong quản lý trạng thái dựa trên service.

Bài học 3 • Operator RxJS Cốt Lõi

Áp dụng map, filter, switchMap, mergeMap và catchError để chuyển đổi và kết hợp các luồng. Trang bị cho học viên khả năng xử lý các yêu cầu chuyển đổi dữ liệu thực tế.

Bài học 1 • Mô Phỏng HTTP trong Phát Triển

Sử dụng HttpClientTestingModule và web API trong bộ nhớ để mô phỏng phản hồi backend trong quá trình phát triển. Tách tiến độ frontend khỏi sự sẵn sàng của backend.

Bài học 2 • Chiến Lược Xử Lý Lỗi và Thử Lại

Xử lý lỗi HTTP với toán tử catchError, retry và retryWhen cho các lệnh gọi API linh hoạt. Đảm bảo suy giảm nhẹ nhàng và phản hồi lỗi thân thiện với người dùng.

Bài học 3 • HTTP Interceptor

Tạo interceptor để đính kèm token xác thực, ghi nhật ký yêu cầu và chuyển đổi phản hồi toàn cục. Tập trung hóa các mối quan tâm xuyên suốt HTTP mà không cần sửa đổi các lệnh gọi service riêng lẻ.

Bài học 4 • Thiết Lập HttpClient và Yêu Cầu GET

Nhập HttpClientModule, tiêm HttpClient và thực hiện các yêu cầu GET có kiểu. Thiết lập đường cơ sở cho tất cả giao tiếp backend trong ứng dụng.

Bài học 1 • Biểu Mẫu Động với FormArray

Quản lý danh sách điều khiển có độ dài thay đổi bằng FormArray cho các tình huống biểu mẫu động. Hỗ trợ các trường hợp sử dụng như thêm nhiều địa chỉ hoặc mục hàng.

Bài học 2 • Nguyên Tắc Cơ Bản của Reactive Forms

Xây dựng biểu mẫu theo chương trình bằng FormControl, FormGroup và FormBuilder. Cho phép logic biểu mẫu có thể mở rộng, có thể kiểm thử được điều khiển hoàn toàn từ lớp component.

Bài học 3 • Trải Nghiệm Người Dùng và Khả Năng Tiếp Cận của Biểu Mẫu

Áp dụng trạng thái touched, dirty và pristine để kiểm soát khả năng hiển thị lỗi và cải thiện trải nghiệm người dùng biểu mẫu. Đảm bảo biểu mẫu đáp ứng tiêu chuẩn trợ năng với các thuộc tính ARIA phù hợp.

Bài học 4 • Validator Tùy Chỉnh và Xác Thực Bất Đồng Bộ

Viết validator tùy chỉnh đồng bộ và bất đồng bộ cho kiểm tra chéo trường và phía máy chủ. Mở rộng hệ thống xác thực của Angular để đáp ứng các quy tắc nghiệp vụ phức tạp.

Bài học 1 • Nguyên Tắc Cơ Bản về Quản Lý Trạng Thái

Triển khai trạng thái dựa trên service với BehaviorSubject và giới thiệu khái niệm store NgRx cho trạng thái có thể mở rộng. Chuẩn bị cho học viên chọn chiến lược trạng thái phù hợp với độ phức tạp của ứng dụng.

Bài học 2 • Directive và Pipe Tùy Chỉnh

Xây dựng attribute directive có thể tái sử dụng với HostListener và HostBinding, đồng thời tạo pipe tùy chỉnh pure và impure. Mở rộng khả năng template của Angular cho các nhu cầu cụ thể của từng lĩnh vực.

Bài học 3 • Content Projection và Component Động

Sử dụng ng-content cho projection một khe và nhiều khe, đồng thời tạo component động trong thời gian chạy. Cho phép các component thư viện giao diện người dùng có tính tái sử dụng cao và linh hoạt.

Bài học 4 • Chiến Lược Phát Hiện Thay Đổi

So sánh phát hiện thay đổi Default và OnPush, đồng thời áp dụng OnPush với dữ liệu bất biến và observable. Giảm đáng kể việc kết xuất lại không cần thiết trong các cây component lớn.