Angular 17 Khóa Học Đào Tạo

Giới thiệu về Angular 17

• Angular là gì?
• Angular so với React và Vue
• Tổng quan về các tính năng và kiến trúc của Angular 17
• Thiết lập Môi trường Phát triển

Bắt đầu

• Tạo dự án Angular 17 mới bằng Angular CLI
• Khám phá cấu trúc dự án và các tệp tin
• Chạy và phục vụ (serve) ứng dụng
• Hiển thị dữ liệu bằng cách sử dụng chèn văn bản (interpolation) và biểu thức

Components

• Hiểu vai trò của components trong Angular 17
• Tạo và sử dụng components
• Truyền dữ liệu giữa các components bằng cách sử dụng inputs và outputs
• Sử dụng các hook vòng đời của component

Directives

• Hiểu sự khác nhau giữa structural directives và attribute directives
• Tạo và sử dụng các directives tích hợp sẵn như ngIf, ngFor, ngSwitch, v.v.
• Tạo và sử dụng các directives tùy chỉnh

Pipes

• Hiểu mục đích của pipes trong Angular 17
• Tạo và sử dụng các pipes tích hợp sẵn như date, currency, json, v.v.
• Tạo và sử dụng các pipes tùy chỉnh

Services

• Hiểu vai trò của services trong Angular 17
• Tạo và sử dụng services
• Tiêm phụ thuộc (dependency injection) bằng cách sử dụng providers

Modules

• Hiểu vai trò của modules trong Angular 17
• Tạo và sử dụng modules
• Nhập và xuất modules

Data Binding

• Hiểu sự khác nhau giữa data binding một chiều và hai chiều
• Tạo và sử dụng property binding, event binding, và cú pháp banana-in-a-box
• Sử dụng các biến tham chiếu template

Routing

• Hiểu vai trò của routing trong Angular 17
• Tạo và cấu hình các route
• Điều hướng giữa các route bằng cách sử dụng routerLink và router.navigate()
• Sử dụng tham số route, tham số truy vấn và các fragment

Forms

• Hiểu sự khác nhau giữa template-driven forms và reactive forms
• Tạo và xác thực forms bằng cách sử dụng form controls, form groups, form arrays, v.v.
• Sử dụng các validator tích hợp sẵn như required, minLength, maxLength, v.v.
• Tạo và sử dụng các validator tùy chỉnh

HTTP Client

• Hiểu vai trò của HTTP client trong Angular 17
• Tạo và sử dụng các yêu cầu HTTP để giao tiếp với các dịch vụ backend
• Sử dụng observables để xử lý các luồng dữ liệu bất đồng bộ
• Sử dụng interceptors để sửa đổi hoặc xử lý các yêu cầu hoặc phản hồi HTTP

Luồng Điều Khiển Khai Báo Mới

• Giải thích cú pháp khối điều khiển template mới và cách nó đơn giản hóa các tác vụ phổ biến như hiển thị có điều kiện, lặp và xử lý bộ sưu tập rỗng
• Đưa ra ví dụ về việc sử dụng các khối mới, chẳng hạn như @if, @else, @switch, @case, @default, @for và @empty
• So sánh cú pháp mới với cú pháp trước đây, chẳng hạn như *ngIf, *ngSwitch và *ngFor
• Đề cập đến cách các khối điều khiển mới hỗ trợ các ứng dụng không có zone (zoneless) với signals

Khối Nạp Chậm (Deferred Loading Blocks)

• Giải thích khái niệm nạp chậm và cách nó có thể cải thiện hiệu suất và trải nghiệm người dùng của ứng dụng web
• Giới thiệu khối điều khiển @defer mới cho phép nạp chậm nội dung của khối và các phụ thuộc của nó
• Đưa ra ví dụ về việc sử dụng khối @defer cho các kịch bản khác nhau, chẳng hạn như nạp components, directives, pipes, animations và styles
• Đề cập đến cách khối @defer hoạt động với API view transitions mới

API View Transitions

• Giải thích mục đích và lợi ích của API view transitions, cho phép các nhà phát triển tùy chỉnh các hiệu ứng chuyển động và chuyển đổi giữa các view
• Giới thiệu directive withViewTransitions mới cho phép sử dụng API view transitions
• Đưa ra ví dụ về việc sử dụng directive withViewTransitions với các loại chuyển đổi khác nhau, chẳng hạn như fade, slide, zoom và flip
• Đề cập đến cách API view transitions hoạt động với Angular router và lịch sử trình duyệt

Các Tính Năng và Cải Tiến Khác

• Tóm tắt ngắn gọn một số tính năng và cải tiến khác mà Angular 17 cung cấp, chẳng hạn như:
• Hỗ trợ truyền @Component.styles dưới dạng chuỗi (string)
• Mã nguồn animations của Angular có thể được nạp chậm (lazy-loadable)
• Hỗ trợ TypeScript 5.2
• API signal lõi giờ đã ổn định (stable)
• Hỗ trợ Node.js v16 đã bị loại bỏ và phiên bản hỗ trợ tối thiểu là v18.13.0
• Esbuild sẽ là trình build mặc định và trình phát triển máy chủ (dev server) mặc định sẽ sử dụng Vite