AngularJS

Bài này viết về phiên bản đầu tiên của framework Angular. Đối với các phiên bản từ 2 trở đi, xem Angular (web framework).

AngularJS

Thiết kế bởi	Miško Hevery
Phát triển bởi	Google
Phát hành lần đầu	19 tháng 10 năm 2010; 14 năm trước (2010-10-19)[1]
Phiên bản ổn định	1.8.3 / 7 tháng 4 năm 2022; 3 năm trước (2022-04-07)[2]
Kho mã nguồn	Kho lưu trữ AngularJS
Viết bằng	JavaScript
Nền tảng	JavaScript engine
Kích thước	167 KB (Sản xuất) 1.2 MB (Phát triển)
Thể loại	Web framework
Giấy phép	MIT License
Website	angularjs.org

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.^[3][4][5] Độ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.^[6]

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.^[7] 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.^[8] 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;^[9] điều này tương tự như cách scope được định nghĩa trong lambda calculus.^[10]

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.^[11]

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,^[12] 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.^[13] 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.^[14] 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.^[15]

Xem thêm

• Cổng thông tin Free and open-source software

• React
• Vue.js

Chú thích

1. "Release 0.9.4". GitHub.
2. "Release 1.8.3". GitHub.
3. "AngularJS". docs.angularjs.org. Truy cập ngày 14 tháng 5 năm 2021.
4. "AngularJS". docs.angularjs.org. Truy cập ngày 9 tháng 4 năm 2021.
5. Darwin, Pete Bacon (ngày 27 tháng 7 năm 2020). "Stable AngularJS and Long Term Support". Angular Blog. Truy cập ngày 9 tháng 4 năm 2021.
6. Techson, Mark (ngày 2 tháng 2 năm 2021). "Finding a Path Forward with AngularJs". Medium. Truy cập ngày 9 tháng 4 năm 2021.
7. "What Is Angular?". Truy cập ngày 12 tháng 2 năm 2013.
8. "AngularJS". docs.angularjs.org. Truy cập ngày 9 tháng 4 năm 2021.
9. "Annotated ECMAScript 5.1, Section 10.2 Lexical Environments". Truy cập ngày 3 tháng 1 năm 2015.
10. Barendregt, Henk; Barendsen, Erik (tháng 3 năm 2000), Introduction to Lambda Calculus (PDF)^{[liên kết hỏng]}
11. Kotaru, V. Keerti (ngày 25 tháng 8 năm 2016). Material Design Implementation with AngularJS: UI Component Framework (bằng tiếng Anh). Apress. tr. 4. ISBN 9781484221907.
12. "angular/angularjs-batarang (GitHub)". Truy cập ngày 12 tháng 10 năm 2014.
13. Ford, Brian. "Introducing the AngularJS Batarang". AngularJS Blog. Truy cập ngày 12 tháng 10 năm 2014.
14. "batarang Chrome extension for AngularJS appears broken".
15. Misko Hevery. "Databinding in angularjs". Truy cập ngày 9 tháng 3 năm 2014.

Liên kết ngoài

• Website chính thức