angularjs-itnavi3

Angular là gì?

1. Angular là gì? Angular JS là gì?

Angular là một open source (mã nguồn mở) hay frameworks miễn phí dành cho thiết kế web. Được phát triển từ năm 2009, được duy trì bởi Google. Là một trong những frameworks front end mạnh mẽ nhất thường được dùng bởi các lập trình viên cắt HTML cao cấp

Angular thường được sử dụng để xây dựng project Single Page Application (SPA).

Version stable hiện tại của Angular là Angular 9 (released on February 7, 2020) với TypeScript 3.6 và 3.7

Trang web chính thức của Angular: https://angular.io/

angularjs-itnavi2

Thực tế là Angular có 2 phiên bản hoàn toàn khác nhau, phiên bản 1 và phiên bản khác 1.

  • Phiên bản 1 có tên chính thức là AngularJS, hiện tại nó vẫn đang được phát triển. Ngày 9 tháng 8 năm 2018 phiên bản 1.7.3 được phát hành. Phiên bản Angular1 thực sự dựa trên Javascript, các lập trình viên sẽ viết mã theo ngôn ngữ Javascript, vì vậy có vẻ là dễ học dễ làm và các nhà tuyển dụng dễ tìm được ứng viên. Nhưng về mặt hiệu năng nó đang bị cộng đồng lập trình viên mang ra so sánh với ReactJS. Nhiều công ty phát triển phần mềm muốn xây dựng một sản phẩm mới thường cân nhắc sử dụng Angular phiên bản khác 1.
  • Bắt đầu từ phiên bản 2 nó có tên chính thức là Angular. Angular phiên bản 2 trở lên có tư duy thay đổi hoàn toàn so với Angular 1. Sự thay đổi này được tạo ra với tham vọng sẽ giúp Angular đánh bại ReactJS.

AngularJS là một framework có cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding và Dependency injection của AngularJS loại bỏ phần lớn code mà bạn thường phải viết. Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý tưởng của bất kỳ công nghệ Server nào.

2. Lịch sử phát triển của Angular.

AngularJS được phát triển từ năm 2009 bởi Misko Hevery và một người bạn của anh là Adam Abrons. Nó chỉ được coi là một dự án riêng (Side project) nằm ngoài các công việc chính của họ.

Thời gian sau đó Misko Hevery tham gia vào một dự án có tên Google Feedback (Phản hồi Google) với tư cách một lập trình viên làm việc bán thời gian. Misko Hevery và 2 lập trình viên khác đã viết 17.000 dòng mã cho dự án Google Feedback trong vòng 6 tháng. Số lượng mã ngày càng lớn và Misko Hevery nhận thấy rằng nó ngày càng khó để sửa đổi và kiểm soát các lỗi phát sinh.

Vì vậy Misko Hevery đã đánh cược với người quản lý của mình rằng anh có thể viết lại toàn bộ mã cho Google Feedback bằng cách sử dụng dự án GetAngular của mình trong 2 tuần. Hevery đã thua cuộc, thay vì 2 tuần anh đã mất 3 tuần để hoàn thành công việc, tuy nhiên mã của dự án đã giảm từ 17.000 dòng xuống còn 1.500 dòng.

Nhờ sự thành công của Hevery, người quản lý của anh ấy Brad Green đã chú ý và phát triển AngularJS. AngularJS đã thực sự tăng tốc trong thời gian đó.

3. AngularJS làm được những gì?

AngularJS làm được những gì?

Dưới đây là những thứ “hay ho” mà chúng ta có thể làm với Angular:

  • Mobile Apps: bạn có thể tạo một Mobile Web App với Angular và Phonegap.
  • CRUD Web Apps: đây có lẽ là tính năng mà người dùng Angular sử dụng nhiều nhất.
  • Chrome Extensions: cách đơn giản nhất để tạo một Chrome Extension là sử dụng Yeoman – một Chrome Extension Generator.
  • CSS3 Animations.
  • Firebase Powered Apps.
  • Testable JS Apps.

4. Đặc trưng, cách thức hoạt động, các tính năng cơ bản của AngularJS.

Đặc trưng cơ bản của AngularJS:

  • Phát triển dựa trên Javascript.
  • Tạo các ứng dụng client-side theo mô hình MVC.
  • Khả năng tương thích cao, tự động xử lý mã Javascript để phù hợp với mỗi trình duyệt.
  • Mã nguồn mở, miễn phí hoàn toàn và được sử dụng rộng rãi.

Kiến trúc của một ứng dụng Angular là dựa trên ý tưởng về Components. Một ứng dụng Angular bắt đầu với level trên cùng gọi là Root Component. Chúng ta thêm các component con theo một cây dạng liên kết lỏng lẻo.

Các thức hoạt động:

Sau khi AngularJS được nhúng vào trang nó sẽ phân tích mã lệnh HTML. Trong mã lệnh HTML này thẻ với thuộc tính ng-app=”” sẽ được sử dụng để bắt đầu khởi tạo một ứng dụng AngularJS. Tiếp theo thẻ <input> với thuộc tính ng-model=”name” sẽ tạo ra biến name trong ứng dụng AngularJS trên và giá trị của biến này luôn bằng với giá trị của trường <input>. cuối cùng thẻ <p> thứ 2 với thuộc tính <ng-bind=”name”> được dùng mỗi khi ứng dụng phát hiện ra có sự thay đổi trong giá trị của biến name và nó sẽ gắn giá trị này trở thành nội dung HTML đặt bên trong thẻ <p> thứ 2 này.

Các tính năng cơ bản của AngularJS:

  • Scope : là đối tượng có nhiệm vụ giao tiếp giữa controller và view của ứng dụng.
  • Controller : xử lí dữ liệu cho đối tượng $scope, từ đây bên views sẽ sử dụng các dữ liệu trong scope để hiển thị ra tương ứng.
  • Data-binding : tự động đồng bộ dữ liệu giữa model và view
  • Service : là singleton object được khởi tạo 1 lần duy nhất cho mỗi ứng dụng, cung cấp các phương thức lưu trữ dữ liệu có sẵn. ($http, $httpBackend, $sce, $controller, $document, $compile, $parse, $rootElement, $rootScope …..)
  • Filter : Lọc các tập con từ tập item trong các mảng và trả về các mảng mới.
  • Directive : dùng để tạo các thẻ HTML riêng phục vụ những mục đích riêng. AngularJS có những directive có sẵn như ngBind, ngModel…
  • Temple : một thành phần của view, hiển thị thông tin từ controller
  • Routing : chuyển đổi giữa các action trong controller, qua lại giữa các view.
  • MVC & MVVM : mô hình thiết kế để phân chia các ứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller) mỗi phần có một nhiệm vụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liền hơn với Model-View-ViewModel.
  • Deep link : Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể bookmark với công cụ tìm kiếm. Các ứng dụng có thể được phục hồi lại từ các địa chỉ URL với cùng một trạng thái.
  • Dependency Injection: AngularJS có sẵn một hệ thống con dependency injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra.

5. Component trong AngularJS.

Angular Component là một class nó được bổ trợ bởi @Component decorator. Component điều khiển một phần của UI. 

RootComponent là component cha của các component này chỉ hiển thị tên của ứng dụng. Component được tạo ra trong ứng dụng mới nhìn sẽ như sau:

angularjs-itnavi

Component sẽ gồm 4 thành phần chính:

Import statement.

Class.

Template: định nghĩa view. Template chỉ là một tập con của HTML, nó chỉ cho Angular biết làm sao để hiển thị view. Nó là một trang HTML chuẩn sử dụng các thẻ H1, H2…

Metadata: metadata chỉ cho Angular làm sao để xử lý class. Chúng ta thêm Metadata vào class sử dụng class decorator. Khi chúng ta thêm @Component decorator vào class nó sẽ trở thành component. Class decorator sử dụng đối tượng cấu hình, cung cấp thông tin Angular cần để tạo component. Ví dụ @Component directive đi với cấu hình như selector, templateURL, directive…

Lệnh import các thành phần liên quan được yêu cầu bởi Component này. Class chứa các logic của ứng dụng. Nó được bổ sung thông tin bởi @Component decorator.

6. Ưu, nhược điểm của AngularJS.

Ưu điểm:

  • Giải pháp cho các Single Page Application dễ dàng.
  • Code Front end rất thân thiện nhờ khả năng Binding data lên nền tảng HTML, thao tác rất thích.
  • Dễ dàng Unit test
  • Dễ dàng tái sử dụng component
  • Giúp lập trình viên viết code ít hơn với nhiều chức năng hơn.
  • Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile.

Nhược điểm

  • Không an toàn : bản chất của AngularJS là Front End, mà frontend thì vốn không được bảo mật bằng Back End. Cho nên khi sử dụng API bạn nên xây dựng một hệ thống kiểm tra dữ liệu trả về tốt nhất.
  • Một số trình duyệt có tính năng Disable Javascript nghĩa là website của bạn sẽ hoàn toàn không sử dụng được trên các trình duyệt đó.

Tham khảo Top Hot Jobs Frond-end tại đây

7. Angular với những framework frontend phổ biến hiện nay(ReactJS, Vuejs).

Dưới đây là những so sánh cơ bản giữ Angular với 2 framework frontend rất nổi tiếng hiện lại: Reactjs, Vuejs.

# Angular React Vue
Nhà phát triển Google Facebook Even You – cựu kỹ sư của Google.
Ví dụ sử dụng Google AdwWords, The Guarian, Weather.com Facebook, Twitter, Whatsapp, Instagram Gitlab, 9Gag
Performance Cao Cao Cao
Framework size Thích hợp cho heavyweight application Thích hợp cho lightweight application Thích hợp cho lightweight application

Ngoài ra, sử dụng thực tế, cộng đồng hỗ trợ, các khóa học hiện hành, … thì Angular, React, Vue vẫn luôn giữ vị trí thuộc top đầu.

Tổng kết

Angular nói chung và AngularJS nói riêng đang rất được ưa chuộng để phát triển những systems từ cơ bản đến phức tạp. Vì lý do đó, nhu cầu tuyển dụng về Angular cũng rất cao.

Ngoài ra, khi tìm hiểu Angular, chúng ta sẽ tìm hiểu được những kiến thức cơ bản mà một Frontend Developer cần. Từ đó bạn sẽ dễ dàng tiếp cận hơn với những Framework frontend hiện hành khác như React, Vue,… Ở những bài viết sau, chúng ta sẽ cùng nhau tìm hiểu những chi tiết về syntax, cấu trúc project, những trick khi sử dụng Angular. Trong phạm vi bài viết này, mong rằng các bạn sẽ nắm được: Angular là gì?

Tags: , , ,

codenobug

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *