AngularJS

**AngularJS** (còn được gọi là **Angular 1**) là một framework web miễn phí và mã nguồn mở dựa trên JavaScript, được sử dụng để phát triển các ứng dụng đơn trang (SPA). Framework này đã ngừng phát triển và từng được duy trì chủ yếu bởi Google cùng với một cộng đồng cá nhân và doanh nghiệp. Mục tiêu của AngularJS là đơn giản hóa cả quá trình phát triển và kiểm thử ứng dụng bằng cách cung cấp một framework hỗ trợ kiến trúc Model - View - Controller (MVC) và Model – View – ViewModel (MVVM), cùng với các thành phần thường được sử dụng trong ứng dụng web và ứng dụng web tiến bộ (PWA).

AngularJS được sử dụng làm frontend trong MEAN stack, một kiến trúc bao gồm cơ sở dữ liệu MongoDB, framework máy chủ ứng dụng web Express.js, AngularJS (hoặc Angular) và môi trường runtime máy chủ Node.js.

Kể từ ngày 01 tháng 01 năm 2022, Google không còn cập nhật AngularJS để khắc phục các vấn đề về bảo mật, tương thích trình duyệt hoặc jQuery nữa. Đội ngũ Angular khuyến nghị nâng cấp lên Angular (phiên bản v2 trở lên) như là giải pháp tốt nhất, nhưng họ cũng cung cấp một số lựa chọn khác.

## Tổng quan
Framework AngularJS hoạt động bằng cách đầu tiên đọc trang HTML (HyperText Markup Language), trong đó có các thuộc tính HTML tùy chỉnh được nhúng vào. AngularJS diễn giải những thuộc tính này như các directive để liên kết các phần đầu vào hoặc đầu ra của trang với một mô hình (model) được biểu diễn bằng các biến JavaScript tiêu chuẩn. Giá trị của các biến JavaScript này có thể được đặt thủ công trong mã hoặc lấy từ các nguồn JSON tĩnh hoặc động.

AngularJS được xây dựng dựa trên quan điểm rằng lập trình khai báo nên được sử dụng để tạo giao diện người dùng và kết nối các thành phần phần mềm, trong khi lập trình mệnh lệnh phù hợp hơn để định nghĩa logic nghiệp vụ của ứng dụng. Framework này đã điều chỉnh và mở rộng HTML truyền thống để hiển thị nội dung động thông qua *two-way data binding* (ràng buộc dữ liệu hai chiều), cho phép đồng bộ hóa tự động giữa mô hình (model) và giao diện (view). Nhờ đó, AngularJS giảm thiểu sự thao tác trực tiếp với **DOM** (Document Object Model) nhằm cải thiện khả năng kiểm thử và hiệu suất.

Các mục tiêu thiết kế của AngularJS bao gồm:

*Tách biệt thao tác DOM khỏi logic ứng dụng. Độ phức tạp của việc này bị ảnh hưởng đáng kể bởi cách tổ chức mã nguồn.
*Tách biệt phần client của ứng dụng khỏi phần server. Điều này cho phép quá trình phát triển diễn ra song song và giúp tái sử dụng cả hai phía.
*Cung cấp cấu trúc cho quá trình xây dựng ứng dụng: Từ thiết kế giao diện người dùng, viết logic nghiệp vụ cho đến kiểm thử.

AngularJS triển khai mô hình MVC để tách biệt các thành phần hiển thị, dữ liệu và logic. Bằng cách sử dụng *dependency injection*, Angular đưa các dịch vụ vốn thường thuộc về phía server, như controller phụ thuộc vào view, vào các ứng dụng web phía client. Nhờ đó, tải trọng trên server có thể được giảm đáng kể.

## Phạm vi (Scope)
AngularJS sử dụng thuật ngữ "scope" theo cách tương tự như các nguyên tắc cơ bản trong khoa học máy tính.

Trong khoa học máy tính, *scope* mô tả thời điểm một ràng buộc (binding) cụ thể có hiệu lực trong chương trình. Đặc tả ECMA-262 định nghĩa scope là một môi trường từ vựng (lexical environment), trong đó một đối tượng Function được thực thi trong các script web phía client; điều này tương tự như cách scope được định nghĩa trong lambda calculus.

Là một phần của kiến trúc "MVC", scope đóng vai trò như "Model", và tất cả các biến được định nghĩa trong scope có thể được truy cập bởi cả "View" và "Controller". Scope hoạt động như một cầu nối, liên kết "View" và "Controller" với nhau.

## Các thư viện
### Angular Material

Angular Material là một thư viện UI thành phần triển khai các Material Design trong AngularJS.

## Chrome extension
Tháng 7/2012, nhóm Angular built một extension cho trình duyệt Google Chrome được gọi là Batarang, cải thiện trải nghiệm debugging cho các ứng dụng web được built bằng Angular. Extension nhằm mục đích cho phép dễ dàng phát hiện các tắc nghẽn hiệu suất và cung cấp GUI để gỡ lỗi các ứng dụng. Trong khoảng thời gian vào cuối năm 2014 và đầu năm 2015, extension không tương thích với các bản phát hành gần đây (sau v1.2.x) của Angular. Bản cập nhật cuối cùng được triển khai cho extension này là vào ngày 4 tháng 4 năm 2017.

## Hiệu năng
AngularJS đưa ra mô hình của một *digest cycle*. Chu trình này có thể được coi là một vòng lặp, trong đó AngularJS kiểm tra xem có bất kỳ thay đổi nào đối với tất cả các biến được theo dõi bởi tất cả các`$scopes` hay không. Nếu `$scope.myVar` được xác định trong bộ điều khiển và biến này được đánh dấu để xem xét, Angular sẽ theo dõi các thay đổi trên myVar trong mỗi lần lặp lại.

Cách tiếp cận này có khả năng dẫn đến kết xuất chậm khi AngularJS kiểm tra quá nhiều biến trong mỗi vòng `$scope`. Miško Hevery đề nghị giữ ít hơn 2000 theo dõi trên bất kỳ trang nào.

## Xem thêm

* React
* Vue.js

## Chú thích

## Liên kết ngoài

*