Xem mã nguồn của AngularJS

{{Mô tả ngắn|Framework ứng dụng web mã nguồn mở}}

{{Về|phiên bản đầu tiên của framework Angular|các phiên bản từ 2 trở đi|Angular (web framework)}}

{{Thông tin phần mềm
| name = AngularJS
| logo = AngularJS logo.svg
| logo alt = AngularJS
| author = Miško Hevery
| developer = [[Google]]
| released = {{Start date and age|2010|10|19}}<ref>{{chú thích web|url=https://github.com/angular/angular.js/releases/tag/v0.9.4|website=GitHub|title=Release 0.9.4}}</ref>
| latest release version = 1.8.3
| latest release date = {{Start date and age|2022|4|7}}<ref>{{chú thích web|url=https://github.com/angular/angular.js/releases/tag/v1.8.3|website=GitHub|title=Release 1.8.3}}</ref>
| latest preview version =
| latest preview date =
| repo = {{URL|https://github.com/angular/angular.js|Kho lưu trữ AngularJS}}
| programming language = [[JavaScript]]
| platform = [[JavaScript engine]]
| size = 167 KB (Sản xuất)<br />1.2 MB (Phát triển)
| genre = [[Web framework]]
| license = [[MIT License]]
}}

'''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.<ref>{{Trích dẫn web |title=AngularJS|url=https://docs.angularjs.org/misc/version-support-status|access-date=2021-05-14|website=docs.angularjs.org}}</ref><ref>{{Trích dẫn web |title=AngularJS |url=https://docs.angularjs.org/misc/version-support-status |website=docs.angularjs.org |access-date=April 9, 2021}}</ref><ref>{{Trích dẫn web|last=Darwin|first=Pete Bacon|date=27 July 2020|title=Stable AngularJS and Long Term Support|url=https://blog.angular.dev/stable-angularjs-and-long-term-support-7e077635ee9c|website=Angular Blog|access-date=April 9, 2021}}</ref> Độ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.<ref>{{Trích dẫn web |last=Techson |first=Mark |date=February 2, 2021 |title=Finding a Path Forward with AngularJs |url=https://blog.angular.dev/finding-a-path-forward-with-angularjs-7e186fdd4429 |website=Medium |access-date=April 9, 2021}}</ref>

==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.<ref>{{Trích dẫn web |title=What Is Angular? |url=https://docs.angularjs.org/guide/introduction |access-date=12 February 2013}}</ref> 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.<ref>{{Trích dẫn web |title=AngularJS |url=https://docs.angularjs.org/guide/component |website=docs.angularjs.org |access-date=April 9, 2021}}</ref> 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;<ref name="es5-x10.2">{{Trích dẫn web |title=Annotated ECMAScript 5.1, Section 10.2 Lexical Environments |url=https://es5.github.io/#x10.2 |access-date=2015-01-03}}</ref> điều này tương tự như cách scope được định nghĩa trong [[lambda calculus]].<ref name="BarendregtBarendsen">{{Citation |last1=Barendregt |first1=Henk |title=Introduction to Lambda Calculus |date=March 2000 |url=ftp://ftp.cs.ru.nl/pub/CompMath.Found/lambda.pdf |last2=Barendsen |first2=Erik }}{{Liên kết hỏng|date=2025-02-19 |bot=InternetArchiveBot }}</ref>

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 ===
{{expand section|date=August 2019}}
Angular Material là một thư viện [[Giao diện người dùng|UI]] thành phần triển khai các [[Material Design]] trong AngularJS.<ref>{{chú thích sách|url=https://books.google.co.uk/books?id=3gvpDAAAQBAJ|title=Material Design Implementation with AngularJS: UI Component Framework|last=Kotaru|first=V. Keerti|date = ngày 25 tháng 8 năm 2016 |publisher=Apress|year=|isbn=9781484221907|location=|pages=4|language=en}}</ref>

==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,<ref name=batarang-github>{{chú thích web|title=angular/angularjs-batarang (GitHub)|url=https://github.com/angular/angularjs-batarang|access-date = ngày 12 tháng 10 năm 2014}}</ref> 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.<ref name=introbatarang>{{chú thích web|last1=Ford|first1=Brian|title=Introducing the AngularJS Batarang|url=http://angularjs.blogspot.com/2012/07/introducing-angularjs-batarang.html|website=AngularJS Blog|access-date = ngày 12 tháng 10 năm 2014}}</ref> 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.<ref>{{chú thích web|url = https://stackoverflow.com/questions/23506526/batarang-chrome-extension-for-angularjs-appears-broken|title = batarang Chrome extension for AngularJS appears broken|date = |access-date = |website = |publisher = |last = |first = }}</ref> 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<code>$scopes</code> hay không. Nếu <code>$scope.myVar</code> đượ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 <code>$scope</code>. Miško Hevery đề nghị giữ ít hơn 2000 theo dõi trên bất kỳ trang nào.<ref name="Misko Hevery">{{chú thích web | title = Databinding in angularjs | author = Misko Hevery | url = https://stackoverflow.com/a/9693933/146423 | access-date = ngày 9 tháng 3 năm 2014}}</ref>

==Xem thêm==
{{Portal|Free and open-source software}}
* [[React]]
* [[Vue.js]]

==Chú thích==
{{tham khảo}}

==Liên kết ngoài==
{{Thể loại Commons|AngularJS}}
* {{Official website}}

[[Thể loại:Phần mềm năm 2010]]
[[Thể loại:Phần mềm Google]]