Angular

Nhà phát triển	Google và Cộng đồng nguồn mở
Phát hành lần đầu	2.0 / 14 tháng 9 năm 2016; 9 năm trước (2016-09-14)[1]
Phiên bản ổn định	19.0.0 / 19 tháng 11 năm 2024; 20 tháng trước (2024-11-19)[2]
Kho mã nguồn	GitHub Repository
Viết bằng	TypeScript
Nền tảng	Nền tảng Web (Web platform)
Thể loại	Web framework
Giấy phép	Giấy phép MIT
Website	angular.dev

Angular (thường được gọi là Angular 2+ hoặc Angular hiện đại) là một khung ứng dụng web nguồn mở dựa trên TypeScript, do Google dẫn dắt phát triển cùng cộng đồng cá nhân và doanh nghiệp. Angular là bản viết lại hoàn toàn từ AngularJS (phiên bản 1.x) nhằm giải quyết các giới hạn về hiệu năng, kiến trúc và khả năng tương thích với tiêu chuẩn web hiện đại.^[3]

Angular là một giải pháp khung làm việc toàn diện cung cấp sẵn các công cụ tích hợp như cơ chế quản lý trạng thái, dependency injection, định tuyến, xử lý biểu mẫu và truyền thông HTTP. Kiến trúc hiện đại của Angular dựa trên nền tảng lập trình phản ứng kết hợp với mô hình thành phần và trình biên dịch AOT (Ahead-Of-Time).^[4]

Tháng 1 năm 2014, tại hội nghị NG-Conf, đội ngũ phát triển Google chính thức công bố dự án Angular 2.0.^[5] Nhận thấy các hạn chế cố hữu của AngularJS 1.x trong việc xử lý luồng dữ liệu hai chiều (two-way data binding) gây tắc nghẽn hiệu năng trên các ứng dụng quy mô lớn, đội ngũ đã quyết định đập đi xây lại toàn bộ thay vì nâng cấp cuốn chiếu.

Phiên bản Angular 2.0 chính thức phát hành vào ngày 14 tháng 9 năm 2016.^[6] Để tránh xung đột khái niệm, Google quy định tên gọi AngularJS dành riêng cho các phiên bản 1.x, và Angular (không kèm "JS") dành cho các phiên bản từ 2.0 trở về sau.^[7]

Sự ra đời của bộ công cụ biên dịch và render mới mang tên Ivy ở phiên bản Angular 8 (xác lập mặc định từ Angular 9) đánh dấu bước ngoặt lớn về hiệu năng.^[8] Ivy chuyển đổi mã nguồn template HTML thành các câu lệnh JavaScript đơn giản, giúp tối ưu hóa thuật toán loại bỏ mã thừa (tree-shaking), giảm đáng kể dung lượng tệp đóng gói (bundle size) và tăng tốc độ biên dịch AOT. Đến phiên bản Angular 13, trình biên dịch cũ (View Engine) hoàn toàn bị loại bỏ.^[9]

• Standalone Components (Angular 14–17): Loại bỏ sự phụ thuộc bắt buộc vào `NgModule`, cho phép các thành phần (component), chỉ thị (directive) và ống dẫn (pipe) tự quản lý các phụ thuộc của chính mình, đơn giản hóa đáng kể cấu trúc dự án.^[10]
• Control Flow Syntax (Angular 17): Thay thế các chỉ thị cấu trúc truyền thống (`*ngIf`, `*ngFor`, `*ngSwitch`) bằng cú pháp điều khiển dòng chảy tích hợp sẵn (`@if`, `@for`, `@switch`), giúp tăng tốc độ biên dịch lên đến 30% và cải thiện khả năng đọc mã.
• Angular Signals (Angular 16–19): Giới thiệu mô hình phản ứng hạt mịn (fine-grained reactivity). Signals cho phép hệ thống theo dõi sự thay đổi của trạng thái dữ liệu ở cấp độ chính xác từng biến, thay vì phải quét toàn bộ cây thành phần như cơ chế cũ.
• Zoneless Change Detection: Từng bước loại bỏ sự phụ thuộc vào thư viện `zone.js`, giảm chi phí runtime overhead và tối ưu hóa tốc độ tải trang phản hồi.

Kiến trúc của Angular xây dựng quanh mô hình hướng đối tượng kết hợp lập trình hàm, chặt chẽ về mặt kiểu dữ liệu nhờ TypeScript.

Mỗi ứng dụng Angular là một cây chứa các thành phần (tiếng Anh: component tree). Một thành phần trong Angular được định nghĩa bằng một lớp TypeScript kèm theo decorator `@Component()`, bao gồm ba phần cốt lõi:

• HTML Template: Định nghĩa giao diện người dùng.
• TypeScript Class: Chứa mã logic xử lý dữ liệu và hành vi.
• CSS/SCSS Styles: Định nghĩa phong cách giao diện được đóng gói (encapsulated) cục bộ thông qua cơ chế Shadow DOM mô phỏng.

Angular tích hợp sâu thư viện RxJS (Reactive Extensions for JavaScript) để quản lý các dòng dữ liệu bất đồng bộ. Mọi thao tác như yêu cầu HTTP Client, sự kiện người dùng hay chuyển đổi tuyến đường (Router events) đều trả về một `Observable`.

• Lập trình Phản ứng với RxJS: Cho phép xử lý, biến đổi và kết hợp các chuỗi sự kiện bất đồng bộ phức tạp thông qua các toán tử như `map`, `filter`, `switchMap`, và `debounceTime`.
• Sự kết hợp giữa RxJS và Angular Signals: Từ Angular 16+, hệ thống giới thiệu Signals để đơn giản hóa quản lý trạng thái đồng bộ, kết hợp cùng các hàm chuyển đổi như `toSignal()` và `toObservable()` giúp lập trình viên linh hoạt chuyển đổi giữa hai mô hình lập trình phản ứng.

Angular sở hữu một trong những hệ thống Dependency Injection (DI) mạnh mẽ nhất trong các framework Web frontend. DI cho phép phân tách hoàn toàn mã logic dịch vụ (Services) khỏi các thành phần giao diện.

• Hierarchical Injector: Hệ thống DI của Angular phân cấp theo cây thành phần. Một phụ thuộc có thể được cung cấp ở cấp Root (toàn ứng dụng), cấp Route, hoặc cấp Component cục bộ.
• Injection Tokens & `inject()` Function: Angular hỗ trợ khởi tạo phụ thuộc linh hoạt thông qua hàm `inject()` hiện đại thay vì bắt buộc khai báo trong `constructor`.

Trình biên dịch AOT (Ahead-Of-Time) biên dịch mã HTML và TypeScript của Angular thành mã JavaScript tối ưu ngay trong quá trình build (thay vì biên dịch JIT - Just-In-Time tại trình duyệt của người dùng).

• Ivy tối ưu hóa mã bằng cách chuyển đổi template thành các tập lệnh Incremental DOM. Khi dữ liệu thay đổi, Incremental DOM không tạo ra các cây DOM ảo mới (như React) mà duyệt trực tiếp qua các lệnh tạo DOM để sửa đổi các phần tử tương ứng, giúp tiết kiệm bộ nhớ RAM đáng kể.

Đối với các ứng dụng Angular quy mô doanh nghiệp (Enterprise Apps) có cấu trúc dữ liệu phức tạp, NgRx là bộ thư viện quản lý trạng thái chuẩn mực được sử dụng rộng rãi nhất, dựa trên mô hình Redux và lập trình phản ứng của RxJS.

• Store: Cơ sở dữ liệu tập trung duy nhất (Single source of truth) lưu trữ toàn bộ trạng thái của ứng dụng theo dạng bất biến (immutable state).
• Actions: Các sự kiện mô tả hành động xảy ra trong ứng dụng (như thao tác người dùng hay kết quả trả về từ API).
• Reducers: Các hàm thuần túy (pure functions) nhận Action và State hiện tại để tính toán và trả về một State mới.
• Selectors: Các hàm chọn lọc dữ liệu từ Store, hỗ trợ ghi nhớ (memoization) giúp tối ưu hóa hiệu năng render giao diện.
• Effects: Thành phần xử lý các tác vụ lề (side-effects) bất đồng bộ như truy vấn API HTTP, sau đó phát ra Action mới để cập nhật Store.
• NgRx SignalStore: Kiến trúc mới gọn nhẹ được giới thiệu gần đây, tận dụng sức mạnh của Angular Signals để đơn giản hóa khai báo trạng thái mà không cần nhiều mã chuẩn bị (boilerplate code).

• Định tuyến (Angular Router): Hỗ trợ định tuyến phức tạp bao gồm định tuyến con (child routes), nạp chậm khối mã (Lazy Loading), canh giữ tuyến đường (Route Guards/Resolvers) và xử lý chuyển cảnh bất đồng bộ.
• Xử lý Biểu mẫu (Forms System):
  • Template-driven Forms: Phù hợp cho biểu mẫu đơn giản, dựa trên ràng buộc dữ liệu HTML.
  • Reactive Forms: Dựa trên luồng dữ liệu phản ứng kiểu `Observable`, cung cấp khả năng kiểm soát dữ liệu, validation đồng bộ/bất đồng bộ và kiểm thử dễ dàng.
• Server-Side Rendering (SSR) & Hydration: Tích hợp giải pháp render phía máy chủ (kế thừa từ Angular Universal), hỗ trợ Non-destructive Hydration (khôi phục giao diện trên trình duyệt mà không cần phá hủy và vẽ lại DOM từ server), giúp tối ưu hóa SEO và chỉ số First Contentful Paint (FCP).

Angular CLI (`@angular/cli`) là công cụ giao diện dòng lệnh chính thức để khởi tạo, phát triển, kiểm thử và đóng gói ứng dụng Angular.

• `ng new`: Khởi tạo cấu trúc dự án chuẩn.
• `ng generate` (`ng g`): Tự động tạo các thành phần, dịch vụ, chỉ thị, pipe.
• `ng serve`: Chạy máy chủ phát triển cục bộ với tính năng Hot Module Replacement (HMR).
• `ng build`: Đóng gói ứng dụng để triển khai môi trường sản xuất.

Bộ thư viện thành phần giao diện người dùng chính thức do Google phát triển, tuân thủ chặt chẽ quy chuẩn thiết kế Material Design. Thư viện này cung cấp sẵn các component phức tạp như Data Tables, Dialogs, Autocomplete, Navbars, và hệ thống phân giải chủ đề (theming).

AnalogJS là một meta-framework full-stack dành cho Angular (tương tự như Next.js cho React hay Nuxt.js cho Vue). AnalogJS sử dụng công cụ đóng gói Vite và máy chủ Nitro, hỗ trợ File-based Routing, Server-Side Rendering (SSR), Static Site Generation (SSG), và tích hợp API Routes.

Angular áp dụng chu kỳ phát hành ngữ nghĩa (Semantic Versioning) với một phiên bản lớn (major version) mỗi 6 tháng. Mỗi phiên bản major được hỗ trợ trong 18 tháng (6 tháng Active Support + 12 tháng Long-Term Support - LTS).^[11]

Phiên bản	Ngày phát hành	Các tính năng trọng tâm
Angular 2.0	14/09/2016	Bản viết lại hoàn toàn dựa trên TypeScript, kiến trúc Component.
Angular 4.0	23/03/2017	Bỏ qua v3 để đồng bộ phiên bản Router. Cải thiện cú pháp `*ngIf` / `*ngFor`.
Angular 5.0	01/11/2017	Tích hợp Build Optimizer, hỗ trợ PWA.
Angular 6.0	04/05/2018	Giới thiệu Angular Elements, lệnh `ng update` và `ng add`.
Angular 7.0	18/10/2018	Thêm Virtual Scrolling và Drag & Drop vào Angular CDK.
Angular 8.0	28/05/2019	Hỗ trợ xem trước trình biên dịch Ivy, Differential Loading.
Angular 9.0	06/02/2020	Trình biên dịch Ivy trở thành mặc định, tối ưu kích thước bundle.
Angular 10.0–12.0	2020–2021	Loại bỏ dần Internet Explorer 11, chuyển đổi gói APF sang ES2015+.
Angular 13.0	04/11/2021	Loại bỏ hoàn toàn View Engine cũ, tối ưu hóa xây dựng ứng dụng với RxJS 7.
Angular 14.0	02/06/2022	Ra mắt Standalone Components (xem trước) và Typed Forms.
Angular 15.0	18/11/2022	Standalone Components đạt trạng thái ổn định (Stable API).
Angular 16.0	03/05/2023	Ra mắt hệ thống Angular Signals (xem trước), Hydration cho SSR.
Angular 17.0	08/11/2023	Cú pháp Control Flow mới (`@if`, `@for`), Standalone làm mặc định, trang chủ mới angular.dev.
Angular 18.0	22/05/2024	Hỗ trợ Zoneless Change Detection (xem trước), cải tiến SSR debugging.
Angular 19.0	19/11/2024	Standalone làm mặc định tuyệt đối cho mọi thành phần, tối ưu hóa cơ chế Signals.

• RxJS
• NgRx
• React (phần mềm)
• Vue.js
• Svelte
• TypeScript
• Khung ứng dụng web
• Trang web đơn trang (Single-page Application)

1. ^ "Angular, version 2: proprioception-reinforcement". blogspot.com. ngày 14 tháng 9 năm 2016. Bản gốc lưu trữ ngày 12 tháng 3 năm 2017. Truy cập ngày 18 tháng 3 năm 2017.
2. ^ Gechev, Minko (ngày 19 tháng 11 năm 2024). "Meet Angular v19". Medium. Truy cập ngày 19 tháng 11 năm 2024.
3. ^ "AngularJS and Angular 2+: a Detailed Comparison". SitePoint. ngày 6 tháng 4 năm 2018.
4. ^ "Angular Docs - Architecture Overview". angular.dev. Truy cập ngày 2 tháng 6 năm 2024.
5. ^ "NG-Conf 2014 keynote". YouTube. ngày 16 tháng 1 năm 2014. Truy cập ngày 10 tháng 6 năm 2025.
6. ^ "Angular, version 2: proprioception-reinforcement". blogspot.com. ngày 14 tháng 9 năm 2016.
7. ^ "Branding Guidelines for AngularJS and Angular". blogspot.com. ngày 4 tháng 1 năm 2017.
8. ^ Fluin, Stephen (ngày 6 tháng 2 năm 2020). "Version 9 of Angular Now Available — Project Ivy has arrived!". blog.angular.io.
9. ^ Thompson, Mark (ngày 4 tháng 11 năm 2021). "Angular v13 is now Available". Angular Blog.
10. ^ Gechev, Minko (ngày 8 tháng 11 năm 2023). "Introducing Angular v17". Angular Blog.
11. ^ "Angular Release Schedule". angular.dev. Truy cập ngày 7 tháng 6 năm 2024.

• Website chính thức - Trang chủ chính thức mới của Angular
• Trang chủ chính thức NgRx
• Mã nguồn Angular trên GitHub