Giới Thiệu Về AngularJS

Viết bởi: Trung Quân , 1 năm trước

Hai năm trước khi AngularJS mới ra đười người ta còn hoài nghi về việc nó có thể cạnh tranh được các Javascript Framework khác như Backbone.js hay Knockout hay không. Tuy nhiên với sự hỗ trợ đến từ Google và nhiều cải tiến đáng kể thì hiện nay AngularJS không những được nhiều người sử dụng mà còn đang trở thành một hiện tượng mới trong làng Javascript. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về AngularJS.

Lịch Sử Của AngularJS

AngularJS là một dự án mã nguồn mở được phát triển đầu tiên bởi Miško Hevery một nhân viên của Google. Hevery bắt đầu nghiên cứu và phát triển dự án vào năm 2009 và phiên bản 1.0 được cho ra mắt vào năm 2012. Do sự hữu ích của dự án này nên Google quyết định là công ty chính thức đứng đằng sau hỗ trợ sự phát triển của AngularJS. Phiên bản hiện tại của AngularJS vào thời điểm của bài viết này được công bố trên trang www.hoclaptrinh.org là phiên bản v.1.4.9.

AngularJS Là Gì

AngularJS là một khung làm việc được viết bằng Javascript (hay còn được gọi là Javascript Framework). AngularJS không chỉ đơn giản là một thư viện mà nó còn là một framework. Khác với các thư viện Javascript như jQuery, AngularJS đưa ra hướng dẫn cụ thể hơn cách cấu trúc mã lệnh HTML và Javascript. Ví dụ bạn sẽ thấy khi sử dụng AngularJS, mã lệnh HTML thường được viết theo cấu trúc như sau:

<div ng-app="">
  <p><input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

Ở ví dụ trên chúng ta thấy trong một số thẻ HTML có các thuộc tính lạ với tiền tố ng- như ng-app, ng-modelng-name. Trong AngularJS chugns được gọi là các chỉ dẫn hay directives. Các chỉ dẫn này có ý nghĩa như sau:

  • Chỉ dẫn ng-app="" được dùng để giúp AngularJS đánh dấu ứng dụng sẽ được bắt đầu từ bằng nào trong HTML.
  • Chỉ dẫn ng-model="name" được dùng để kết nối giá trị của trường <input> với giá trị của biến name trong ứng dụng AngularJS
  • Chỉ dẫn ng-bind="name" dùng để gắn giá trị của biến name ở trên trở thành giá trị innerHTML của thẻ <p>

Nhúng AngularJS

Để chạy ứng dụng AngularJS chúng ta cần nhúng AngularJS Framework vào trang HTML phía trên. Bạn có thể sử dụng đường dẫn CDN của Google để tham chiếu tới khung làm việc này:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

Đây là mã lệnh đầy đủ khi đã nhúng AngularJS lên trang:

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS trên hoclaptrinh.org</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
      <p><input type="text" ng-model="name"></p>
      <p ng-bind="name"></p>
    </div>
</body>
</html>

Khi mở tập tin HTML trên trên trình duyệt bạn sẽ thấy kết quả tương tự như sau:

Để hiểu được AgnularJS hoạt động như thế nào thì bạn cần nhập văn bản vào ô <input>. Khi nhập văn bản bạn sẽ thấy rằng nội dung bên trong thẻ <p> thứ 2 cũng sẽ thay đổi theo.

AngularJS Hoạt Động Như Thế Nào

Bây giờ chúng ta hãy cùng xem AngularJS hoạt động như thế nào.

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ẻ <div> 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 AnglarJS. 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.

Như vậy tới đây bạn đã bước đầu được làm quen với khung làm việc AngluarJS và có cái nhìn đầu tiên về framework này. Trong các bài tiếp theo chúng tôi sẽ đi sâu hơn vào chi tiết cách sử dụng các tính năng phức tạp hơn của AngularJS.

AngularJS JavaScript Framework Frontend
Thêm Bình Luận: