AngularJS Là Gì? Khác Biệt Nào Giữa Angular Và Frontend Framework Khác

AngularJS từ lâu đã là một web application framework phổ biến, nhưng AngularJS là gì? Hiện tại Angular còn đang phổ biến hay không?. Có nên tiếp tục học Angular hay không? Tất cả những câu hỏi này sẽ được giải đáp tường tận trong bài viết dưới đây.

Mong là thông qua bài viết này, sẽ nhiều hơn anh em định dấn thân vào frontend sẽ lựa chọn Angular là ngôn ngữ chiến đấu của mình.

AngularJS là gì?

Đầu tiên, Angularjs là open source web application framework, kiến trúc dựa trên mô hình MVC (Model-View-Controller), dựa trên nền Javascript như những frontend framework khác. Lần đầu tiên được phát triển bởi hai ông thần là Misko Hevery và Adam Abrons năm 2009.

Hiện tại vẫn đang được mantain, nâng cấp và fixbug bởi Google nha anh em.

Về độ phổ biến thì ông này cũng nằm top phổ biến, tuy mức tăng từ năm 2014 đến 2022 không gì nổi bật, cũng không tăng trưởng đột biến như Vuejs nhưng Angularjs vẫn là một trong những framework có độ phủ sóng cao.

Một số lượng lớn các single page (chỉ một page) được xây dựng dựa trên Angularjs.

AngularJS là gì

Mà cũng ghé qua tí định nghĩa chính thức không có nhớ không nổi:

AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology. AngularJS là một framework có cấu trúc cho web application động. Nó cho phép sử dụng HTML như là một template (mẫu sẵn) và cho phép mở rộng các cú pháp của HTML, cũng cho phép nhanh chóng triển khai các component của ứng dụng rõ ràng và ngắn gọn. Với cơ chế binding dữ liệu và loại bỏ phụ thuộc giúp số lượng code viết ra ngắn gọn hơn. Tất cả đều diễn ra trên browser khiến AngularJS trở thành ngôn ngữ phù hợp cho bất cứ công nghệ máy chủ nào.

Khái niệm lèo nghèo nhưng chỉ xin anh em nhớ 2 keywords chính là “Data binding” và “Dependency injection”. Cộng thêm với AngularJS thì code viết ngắn đi, binding này kia cũng khoẻ hơn.

Ứng tuyển ngay các vị trí tuyển dụng Frontend trên TopDev

Tính năng tổng quát của AngularJS

Sau khi đã nắm định nghĩa về AngularJS thì giờ là lúc xem qua tính năng tổng quát của AngularJS. AngularJS là gì thì đã rõ, giờ tới lúc AngularJS có thể làm được gì?

Nói về tính năng tổng quát thì AngularJS có 5 tính năng (feature) chính:

  • AngularJS là framework giúp anh em có thể build ra được RIA (Rich Internet Applications), Rich ở đây là giàu, không phải giàu tiền giàu bạc mà giàu tính năng, giàu công dụng. =))
  • AngularJS cung cấp cho anh em lập trình viên các lựa chọn để viết ứng dụng thuần phía client (frontend) sử dụng Javascript và dựa trên mô hình MVC
  • Ứng dụng được viết bởi Angular có thể chạy trên nhiều loại browser khác nhau. Anh em chỉ việc code, còn mã nguồn JS đưa ra chạy được trên các browser thì AngularJS lo.
  • AngularJS là opensource, miễn phí hoàn toàn, cộng đồng hỗ trợ lớn, nên là library thoải mái cho anh em xài.

Rồi, 5 nhóm tính năng chính đã nêu tường tận ở phía trên. Giờ lướt qua luôn các tính năng chính (core feature) của Angular.

Tính năng chính (core feature) của AngularJS

Mỗi một khi anh em đem ra so sánh giữa các web application framework như Vuejs, Reactjs và AngularJs. Y như rằng là một cuộc thư hùng giữa các cao thủ võ lâm. Thường anh em sẽ nói tới cái ngôn ngữ này, framework này có gì hay, có gì mạnh. Ồ tao xử cái vụ binding data bên Vue dễ hiểu lắm. Ôi cái component base approach bên React có gì khó hiểu đâu, Vue template-based syntax mới loằng ngoằng.

Ông angular bay vào, tụi bay tránh ra, cái data binding bên Angular mới là chúa. Tụi bay có biết AngularJS là gì không?. Những tranh luận đó là tranh thuận về core feature, cái hay cái dở của từng framework cũng bắt nguồn từ đống core feature đó. Vậy cùng xem Angular có core feature gì?

Nhóm tính năng chính

  • Data-binding − Tự động đồng bộ data giữa model và view components, trong cấu trúc MVP
  • Scope − Danh sách các đối tượng tham chiếu tới model. Kết nối giữa controller và view
  • Controller – Là các function Javascript được ràng buộc phạm vi cụ thể (xử cái gì)
  • Services − Xử lý logic của applications, ví dụ như $http để tạo XMLHttpRequests, ông này base trên Singleton Pattern. Anh em chưa biết có thể tham khảo bài này.
  • Filters − Lọc array, từ nguồn array ban đầu filter tạo ra array mới
  • Directives − Là các đối tượng trên cây DOM (elements, attributes, css), dùng để tạo các thẻ HTML tuỳ chỉnh. Angular thì dùng ngBind, ngModel, …
  • Templates − Ông này render ra cái view, thường là một tệp duy nhất kiểu như index.html hoặc nhiều views kết hợp với nhau.
  • Routing − Cái này chắc nhiều anh em nghe quen, chuyển đổi giữa các views
  • Model View Whatever − MVW chia ứng dụng thành các phần như Model, View và Controller, mỗi ông có một trách nhiệm riêng.
  • Deep Linking − Deep linking cho phép mã hoá trạng thái hiện tại của ứng dụng. Sau này từ URL, ứng dụng có thể khôi phục lại trạng thái.

AngularJS là gì

Anh em nhớ là mặc dù base trên MVC nhưng angular lại không triển theo MVC toàn bộ mà sử dụng MVVM (Model View ViewModel). Gần gũi và dễ hiểu hơn, cái tên MVW với W là Whatever là do đội lập ra Angular gọi vui. Gì cũng được =)).

Ưu điểm của AngularJs

Nằm trong nhóm bộ ba frontend framework, AngularJS bao gồm một số ưu điểm không thể chối cãi dưới đây. Chối cãi viết cho nó nghe căng căng vậy thôi chứ không có ý gì nha anh em.

  • Cung cấp khả năng tạo ra các Single Page Application gọn gàng, dễ bảo trì.
  • Cung cấp khả năng binding dữ liệu với HTML. Đem lại trải nghiệm cho người dùng tốt hơn.
  • AngularJS code có thể unit test được.
  • AngularJS sử dụng dependency injection.
  • AngularJS cung cấp các component có thể tái sử dụng được.
  • Với AngularJS, anh em có nhiều tính năng hơn nhưng code ít hơn. Nghe đã ghê
  • Trong AngularJS, view là các page html thuần, còn controllers viết bằng JavaScript để thực thi các logic về business.

AngularJS Directives?

Angular Directives là các điểm đánh dấu (markers) được đánh dấu trên DOM. Nó giúp cho HTML compiler gắn một hành vi cụ thể vào element trên DOM. Bản thân AngularJS đã build sẵn một số directives. Tuy nhiên trong dự án làm, anh em có thể tự xây dựng directives riêng cho mình.

Cụ thể Angular hỗ trợ 3 directives sau:

  • ng-app : Cái này định nghĩa và link giữa Angular app với HTML
  • ng-model : Cái này link giữa HTML với data từ AngularJS App
  • ng-bind : Sử dụng để bind giữa data từ AngularJS application đến các HTML tags

Tương lai AngularJS sẽ đi về đâu?

Trong đống website được xây dựng ơ rao dờ gua (around the world) thì angularjs chiếm khoảng 0.5%. Về cách nghành nghề, Angular chiếm một số lượng kha khá các nghành nghề chủ yếu trên thế giới.

Mức độ phổ biến Nghành nghề
Nghành máy tính (Computer Electronics) 4.06%
Tài chính (Finance) 1.93%
Tin tức (News and Media) 2.22%
Nghệ thuật và giải trí (Arts and Entertainment) 2.57%
Khác 89.22%

Hiện tại Angular vẫn là Javascript Framework phổ biến, học xong vẫn giúp anh em tìm được việc làm ngon lành. Các tổ chức lớn như IBM, Wipro, Capgemini, Elance, Tech Mahindra, vẫn đang săn đón các chuyên gia về Angular, thế nên anh em cứ tự tin mà học nhé. Xong framework này nhảy qua học framework khác.

AngularJS là gì

Mời anh em tham khảo các tin tuyển dụng AngularJS với mọi cấp độ tại đây nhé!

Cảm ơn anh em đã dành thời gian đọc bài – Thank you for your effort to read – Happy coding!

Tác giả: Kiên Nguyễn

Xem thêm:

Xem ngay những tin đăng tuyển dụng IT mới nhất trên TopDev