1. 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...
1. 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 này là 1.6.6
2. AngularJS Là Gì ? AngularJS là một Framework được viết bằng Javascript. 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-model và ng-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>
Để 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:
<html>
<head>
<title>AngularJS</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.
COMMENTS