Lập trình viên là công cụ để chuyển chất gây nghiện vào mã. Mitch Ratcliffe
STDIO Nhằm đổi mới công nghệ, bắt kịp theo xu hướng cũng như giảm thiểu tối đa thời gian trong việc làm web. AngularJS là một lựa chọn khá phù hợp cho những yêu cầu trên. Angularjs là bộ thư viện javascipt do Google phát triển và hoàn toàn miễn phí
Nội dung bài viết

Giới thiệu

Khi nhắc tới lập trình web đa phần các bạn thường hay nhắc tới 2 ngôn ngữ lập trình thông dụng đó là PHP và ASP.NET. Tuỳ vào khả năng hoặc nhu cầu của công việc thì chúng ta sẽ lựa chọn ngôn ngữ sao cho phù hợp. Trong bài này tôi giới thiệu đến các bạn một lựa chọn mới và nó cũng là xu hướng mới trong công nghệ làm web. Lập trình web bằng AngularJS.

Tiền đề bài viết

Nhằm đổi mới công nghệ, bắt kịp theo xu hướng cũng như giảm thiểu tối đa thời gian trong việc làm web. AngularJS là một lựa chọn khá phù hợp cho những yêu cầu trên.

Đối tượng hướng đến

Các bạn lập trinh viên web chưa được tiếp cận với AngularJS hoặc chưa hiểu rõ về nó.

Những lập trình viên bước đầu học lập trình web nên có kiến thức nền tảng về HTML, CSS và Javascript để có thể dễ dàng tiếp cận AngularJS hơn.

AngularJS là gì?

AngularJS là bộ thư viện javascipt do Google phát triển và hoàn toàn miễn phí. Thường được sử dụng trong việc xây dựng Single Page Application (SPA). AngularJS cho phép xây dựng ngay trong trình duyệt mà không cần phải thông qua server.

Với khả năng mở rộng rất cao AngularJS cho phép xây dựng các directive riêng do mỗi lập trình viên tạo ra để thêm hoặc bổ sung các tính năng. Điều này giúp dễ dàng sử dụng lại mã và tất cả các tính năng của nó chỉ mới một thẻ tags được khai báo như một thẻ HTML.

Một tính năng vượt trội nữa của AngularJS là khả năng cho phép người dùng xây dựng một app mobile với đầy đủ tính năng và có thẻ chạy trên nhiều hệ đề hành mobile.

Cài đặt và sử dụng AngularJS

Bước 1: Vào trang chủ https://angularjs.org/ chọn download để tải file angular.min.js. Đây chỉ là một file nhỏ trong nhiều file của bộ thư viện này.

Bước 2: Tạo một project mới có tên HelloStdio. Các ứng dụng xây dựng bằng AngularJS thường mang mô hình MVVM (Model-View-ViewModel) tương tự như MVC nên project có cấu trúc khá giống MVC.

ss_1

Trong project có folder app và file index.html. Folder app này sẽ chứa các file javascript quan trọng có nhiêm phụ chi phối toàn project như app.js, controller.js, service.js. Và file index.html là file hiển thị chính. Tuy project có thể có rất nhiều trang nhưng thực chất chỉ thể hiện duy nhất trên 1 trang index.html này. Đó là lý do AngularJS còn gọi là Single Page Application.
Như vậy ta đã tạo được project đây cũng là project cơ bản nhất của một ứng dụng AngularJS.

Ứng dụng

Trong file index.html import 2 file javascript là app.js và angular.min.js như hình sau:

ss_2

Tại thẻ body tôi thêm vào ng-app=”” để đánh dấu rằng angularjs được sử dụng trong phạm vi của thẻ body. Và trong phạm vi này các kí tự trong cặp dấu {{ }} đều được xem như một biểu thức. Ở ví dụ trên phép tính 5 + 5 được thực hiện và hiển thị lên trang web.
Đây  là trường hợp thẻ body không có ng-app=””

ss_3

 AngularJS làm cho trang web HTML từ tĩnh trở thành động là nhờ cơ chế binding. Ví dụ sau sẽ giúp bạn hiểu rõ hơn về cơ chế này.

ss_4

Đoạn ng-model là một directive và sayhello trong nó được xem như một biến và có phạm vi sử dụng là toàn thẻ body (lưu ý: chỉ trong trường hợp ở trên). 
Khi điền kí tự vào trong input thì ngay lập tức biến sayhello sẽ được in ra màn hình mà không cần phải refresh.

Lời kết

Bài này giúp các bạn có cái nhìn tổng quát và năm được khái nhiệm cơ bản về AngularJS. Còn rất nhiều các feature tôi sẽ giới thiệu đến các bạn trong các bài sau.

Bạn cần hỗ trợ các dự án kết nối không dây?

Quí doanh nghiệp, cá nhân cần hỗ trợ, hợp tác các dự án IoT, kết nối không dây. Vui lòng liên hệ, hoặc gọi trực tiếp 0942.111912.

  • TỪ KHÓA
  • Arduino
  • ESP32
  • ESP8266
  • Wifi
  • Bluetooth
  • Zigbee
  • Raspberry Pi
THẢO LUẬN
ĐÓNG