Giới Thiệu

AngularJS là gì

AngularJS là 1 thư viện JavaScript được dùng phổ biến trong các ứng dụng web ngày nay. AngularJS thích hợp với các ứng dụng web 1 trang Single Page Application (SPA). Thư viện AngularJS có thể được thêm vào trang HTML sử dụng thẻ <script>.

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

AngularJS mở rộng thuộc tính HTML

AngularJS mở rộng thuộc tính các thẻ HTML sử dụng chỉ thị directive. Trong AngularJS có 3 loại chỉ thị:

  • ng-app: Chỉ thị này dùng để định nghĩa một ứng dụng AngularJS
  • ng-model: Chỉ thị này dùng để bind (gắn) giá trị của các phần tử HTML có dư liệu như input , textarea, select với dữ liệu của ứng dụng AngularJS.
  • ng-bind: Chỉ thị này dùng để bind (gắn) các giá trị trong ứng dụng AngularJS với giá trị các phần tử HTML.
<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Chạy

Giải thích ví dụ trên:

Thư viện AngularJS được thêm vào sử dụng thẻ <script> và vì được đặt bên trong thẻ <head> nên thư viện này sẽ được tải về đầu tiên. Điều này có nghĩa là bạn có thể sử dụng các chức năng của thư viện ngay sau thẻ <head>.

  • Chỉ thị ng-app đặt trong thuộc tính của thẻ <div> dùng để định nghĩa một ứng dụng AngularJS. Nói cách khác phần tử div này chính là phần tử sở hữu ứng dụng AngularJS.
  • Chỉ thị ng-model bind giá trị của trường input với một biến có tên là name trong ứng dụng AngluarJS vừa mới được định nghĩa ở trên.
  • Chỉ thị ng-bind gắn giá trị của biến name trong ứng dụng AngularJS với giá trị của phần tử p chứa chỉ thị này.

Chỉ Thị Trong AngularJS

Các chỉ thị trong AngularJS chính là các thuộc tính của phần tử HTML với tên được bắt đầu bằng tiếp đầu ngữ ng-.

Chỉ thị ng-init dùng để khởi tạo các biến trong ứng dụng với giá trị nhất định.

<div ng-app="" ng-init="name='Tèo'">

<p>Tên của bạn là <span ng-bind="name"></span></p>

</div>

Chạy

Để mã HTML được coi là hợp với tiêu chuẩn của một tài liệu HTML thì bạn nên dùng thuộc tính với tên được bắt đầu bằng tiếp đầu ngữ data-ng-

<div data-ng-app="" data-ng-init="firstName='Tèo'">

<p>Tên bạn là <span data-ng-bind="firstName"></span></p>

</div>

Chạy

AngularJS Expression

Các biểu thức AngularJS (hay AngularJS Expression) được đặt bên trong cặp dấu ngoặc {{ }} ví dụ {{ expression }}.

AngularJS sẽ hiển thị kết quả của biều thức.

<div ng-app="">
    <p>AngularJS expression: {{ 5 + 5 }}</p>
</div>

Chạy

Bạn cũng có thể sử dụng giá trị của biến được trong biểu thức AngularJS.

<p>Nhập tên bạn vào trường input phía dưới:</p>
<p>Tên bạn là: <input type="text" ng-model="name"></p>
<p>{{name}}</p>

Chạy

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