Ôn tập Angular: Tìm hiểu về Angular - Part 1

Trong series này, mình chủ yếu ôn lại kiến thức Angular để làm bài workshop. Hi vọng với chút kiến thức này sẽ giúp ích mình ôn tập thật nhanh

Angular là gì?

Angular là một framework mã nguồn mở, dựa trên TypeScript, được sử dụng để xây dựng các ứng dụng web một trang (SPA) và đa trang (MPA). Với Angular, bạn có thể:

• Xây dựng các ứng dụng có cấu trúc rõ ràng: Angular tuân theo mô hình MVC (Model-View-Controller), giúp tổ chức code gọn gàng và dễ dàng bảo trì.
• Tạo các thành phần tái sử dụng: Component là khối xây dựng cơ bản của ứng dụng Angular. Bạn có thể tạo các component một lần và sử dụng lại chúng ở nhiều nơi trong dự án.
• Nâng cao hiệu suất: Angular được tối ưu hóa cho tốc độ và hiệu suất. Nó sử dụng kỹ thuật render phía máy chủ và lazy loading để giảm thời gian tải trang.
• Hỗ trợ bởi cộng đồng lớn mạnh: Angular có một cộng đồng lớn mạnh, luôn sẵn sàng hỗ trợ bạn khi gặp khó khăn.

Website chính thức của Angular: https://angular.dev/

Angular hoạt động thế nào?

Components - Khối xây dựng của Angular

Mọi ứng dụng Angular đều được xây dựng từ các components, mỗi component hoạt động như một phần tử độc lập với chức năng riêng biệt. Component bao gồm:

• Template (HTML): Xác định giao diện người dùng của component.
• Class (TypeScript): Chứa logic và dữ liệu của component.
• Styles (CSS): Định dạng giao diện riêng cho component.

Modules - Tổ chức ứng dụng logic

Angular sử dụng modules để tổ chức code thành các khối chức năng riêng biệt. Module chính của ứng dụng là AppModule.

Data Binding - Đồng bộ hóa dữ liệu hai chiều

Angular sử dụng data binding để tự động đồng bộ hóa dữ liệu giữa component class và template.

• Interpolation ({{ }}): Hiển thị dữ liệu từ class lên template.
• Property binding ([ ]): Truyền dữ liệu từ class đến thuộc tính của element trong template.
• Event binding (( )): Lắng nghe sự kiện từ element trong template và gọi hàm xử lý trong class.
• Two-way binding [( )]: Kết hợp property binding và event binding để đồng bộ dữ liệu hai chiều.

Directives - Mở rộng khả năng của HTML

Angular cung cấp các directives để mở rộng cú pháp HTML và thêm các chức năng mới cho element.

• **Structural directives (ngIf, ngFor): Thay đổi cấu trúc của DOM bằng cách thêm, bớt hoặc lặp lại element.
• Attribute directives (ngClass, ngStyle): Thay đổi thuộc tính và kiểu dáng của element.

Services - Cung cấp chức năng dùng chung

Angular khuyến khích sử dụng services để đóng gói logic và dữ liệu cần được sử dụng chung bởi nhiều component.

Dependency Injection

Angular sử dụng dependency injection để cung cấp các dependencies (services) cho component một cách tự động và hiệu quả.

Routing - Điều hướng giữa các views

Angular cung cấp một router để quản lý việc điều hướng giữa các component, tạo ra trải nghiệm SPA mượt mà.

Lifecycle Hooks - Kiểm soát vòng đời của component

Angular cung cấp các lifecycle hooks cho phép bạn can thiệp vào các giai đoạn khác nhau trong vòng đời của một component (khởi tạo, cập nhật, hủy...).