Web Design

AngularJS, Bài 1: Giới thiệu sơ lược về AngularJS

Có lẽ bạn đã nghe nhiều về Angular, React, Ember và mới nhất là Vue khi làm ứng dụng Web. Và hiện tại, khi học về Angular thì các giáo viên thường hướng dẫn các bạn học vào ngay Angular2 (hoặc mới hơn là Angular4 và sắp tới là Angular5) vì tất cả các phiên bản Angular sau này đều có xuất phát điểm từ Angular2, trong khi Angular1 – tức AngularJS – đã được xây dựng theo hướng hoàn toàn khác. Dù vậy, AngularJS vẫn còn “ngon chán” trong thời điểm hiện tại và cả về sau này, bởi nó có những ưu điểm riêng của nó mà bạn có thể cảm thấy thích hơn so với Angular2+. Hơn nữa, trái với những suy nghĩ có phần chủ quan của nhiều người là AngularJS “đã chết”, nhưng thực chất nó vẫn còn sống khá khỏe và vẫn được duy trì và bảo trì bình thường theo dạng Long Term Support.

AngularJS

1. AngularJS là gì?

AngularJS (commonly referred to as “Angular.js” or “AngularJS 1.X”) is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. (Wikipedia)

AngularJS chỉ được coi xếp vào framework, chứ không phải là một platform như Angular2+ (và sau này, tôi sẽ gọi Angular2+ là Angular). AngularJS cũng như Angular được phát triển bởi Google và cộng đồng vì mã nguồn của chúng mở.

2. Ưu điểm của AngularJS:

Phần trên thì tôi đã nói AngularJS “cũ mà hay”. Hiện tại, nó vẫn có một số ưu điểm nhất định mà bạn nhiều khả năng sẽ cảm thấy nó thích hợp hơn so với Angular. Dưới đây là các ưu điểm dưới góc nhìn cá nhân của tôi, và bạn có thể bổ sung hay tranh cãi nếu thấy không hợp lí:

  • Dễ tích hợp vào project: Chỉ cần vài cặp <script> là xong, vì AngularJS được tích hợp theo dạng CDN, hoàn toàn không cần thiết tới Node như Angular. Tất nhiên, bạn vẫn có thể tích hợp AngularJS thông qua Node hoặc Bower, hoặc cần Node nếu bạn làm thêm phần server. Tuy nhiên, nếu mục đích của bạn là làm một ứng dụng chỉ về phía client, thì bạn nên đi theo cách CDN hoặc tải luôn tập tin angular.min.js rồi gọi trong HTML là được rồi.
  • Nhẹ nhàng, dễ học và nếu bạn học qua AngularJS trước, bạn sẽ dễ học Angular hơn.
  • Việc lập trình web giống như bạn dựng các trang HTML bình thường. Do đó, bạn chỉ cần học xong HTML và JS là có thể “quất luôn”.
  • Bạn có thể dễ dàng biến trang HTML thuần thành AngularJS  bằng cách chỉ thêm và sửa những chỗ cần thiết mà không cần làm lại từ đầu như Angular.
  • AngularJS chỉ dựa trên JavaScript, hoàn toàn không liên quan tới TypeScript.
  • AngularJS đơn giản hơn Angular rất nhiều.
  • AngularJS thích hợp hơn cho các projects có quy mô nhỏ, ít tương tác và hơn nữa là các browser extensions, ví dụ Chrome extensions hay Firefox extensions. Dù vẫn có thể dùng Angular để làm Chrome extensions hay các projects nhỏ, nhưng trong đại đa số trường hợp thì AngularJS cũng có thể cho hiệu quả tương tự mặc dù gọn gàng và dễ dàng hơn.

Vì vậy, EITGUIDE xin trân trọng gửi tới các bạn loạt bài hướng dẫn về AngularJS. Dù AngularJS “cũ” nhưng chưa chắc đã “kĩ” đâu, và tôi nghĩ là bạn sẽ thích nó, nhất là những bạn vừa mới học xong HTML + CSS + JS cơ bản, là có thể vận dụng được ngay. Ở khía cạnh khác, nếu bạn đã nắm rõ được các khái niệm của AngularJS, chẳng hạn ngFor hay ngIf, thì khi bạn học lên Angular sẽ thấy không có gì lạ lùng nữa.

3. Nhược điểm của AngularJS:

Cái gì cũng có hai mặt, và AngularJS cũng không là ngoại lệ. Nhược điểm lớn nhất của AngularJS là việc phát triển nó chỉ dừng ở mức cũng cố các tính năng đã có là chính, tức là mức duy trì và bảo trì. Rất hiếm các tính năng mới sẽ được thêm vào AngularJS vì Google đang dồn sức cho Angular, mặc dù gần đây cũng có vài tính năng của Angular được đưa về AngularJS. Nhược điểm thứ hai là hiệu năng không cao do mỗi ràng buộc kiểm tra giá trị biến tới hai lần trước khi thay đổi giá trị trên UI, vì vậy nếu có nhiều kết nối cùng quan sát một trang static HTML thì có thể bị tình trạng giật. Thứ ba, mặc dù bản chất trang web là một trang web app hơn là static HTML, nhưng việc dựng trang đôi khi mang lại cảm giác như bạn đang làm một static HTML vậy, bạn không cảm thấy “sướng tay” như dùng Angular hay React. Vấn đề xung đột tên trong AngularJS cũng gây một số phiền hà nhất định trong quá trình viết code.

Kể từ AngularJS 1.2 về sau thì chỉ có Internet Explorer 10 về sau mới tương thích. Đối với IE 9 về trước thì… quá nhọ.

4. Tích hợp AngularJS vào web project:

Để tích hợp AngularJS vào web project của bạn, thì bạn có thể lựa chọn một trong số các cách sau:

  • Cho trang load AngularJS script qua CDN: Cách này tôi sẽ sử dụng trong quá trình hướng dẫn các bạn, và tôi sẽ giới thiệu sau.
  • Tải về tập tin script AngularJS và thêm vào trang HTML như một tập tin script của bạn: Cách này thường được dùng để viết extensions cho trình duyệt, chẳng hạn Chrome.
  • Tải về qua Trình quản lí gói, như Bower ($ bower install angular#1.6.7) hay NPM ($ npm install angular@1.6.7): Bạn chỉ nên đi theo hướng này khi bạn còn muốn học về Angular hay các platforms khác như React hay Vue. Nếu bạn chỉ viết ứng dụng web theo kiểu nhanh-gọn-lẹ và chỉ viết một lần, thì dùng cách bên trên “cho khỏe”.

Ngoài ra, AngularJS cũng có hỗ trợ các modules ngoài, bạn có thể xem danh sách chúng ở đây.

5. Tích hợp AngularJS vào web project dưới dạng CDN:

Bạn chỉ việc đặt một thẻ <script> có src trỏ tới CDN mà AngularJS cung cấp mà thôi, không khác gì cách bạn thường dùng với jQuery. Tuy nhiên, có một bắt buộc là bạn phải gọi script phía trên body, bởi trang HTML – như bạn đã biết – được load từ trên xuống dưới, và nếu bạn để AngularJS <script> nằm ở cuối, thì các thẻ <ng-*> cũng như các attributes ng-* của AngularJS sẽ không hoạt động được, vì đơn giản, là trình duyệt chưa biết tới chúng là gì. Dưới đây là một trang mẫu:

Bạn chú ý chỗ ng-app trong HTML, tôi sẽ giải thích trong các bài viết sau. Và một điều nữa, là với AngularJS và Angular, bạn sẽ gặp tiền tố ng- thường xuyên. Vậy, ng có nghĩa là gì? Nó vừa là Angular, vừa có nghĩa là Next Generation – Angular là thế hệ tiếp theo cuả hoạt động lập trình web, render chủ yếu bằng JS chứ không phải trực tiếp trên HTML nữa.

6. Các yêu cầu cơ bản của loạt bài học:

  • Một Text Editor. Để tham khảo về danh sách những Text Editors chuyên dụng cho việc viết code, bạn có thể tham khảo bài viết của tôi tại đây. Trong loạt bài này, tôi khuyến nghị bạn nên dùng Brackets, Atom hay VS Code. Bạn sẽ cần giả lập một server để tiện cho việc viết mã, trên Brackets, bạn sẽ chỉ đơn giản là click vào nút tia sét ở cạnh phải, phía trên là Brackets sẽ tạo một server tạm thời cho bạn, còn với Atom, bạn sẽ cần gói atom-live-server.
  • Trình độ HTML và JavaScript cơ bản chắc chắn, ngoài ra bạn cũng nên có kiến thức tốt về CSS cơ bản.
  • Hiểu biết về callback trong JavaScript. Với AngularJS nói riêng hay các JS frameworks và platforms nói chung, bạn sẽ gặp callback như cơm bữa.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.