AngularJS: Chỉ thị trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

AngularJS cho phép bạn mở rộng HTML với các thuộc tính mới gọi là Chỉ thị (Directive).

AngularJS có một bộ các chỉ thị được xây dựng sẵn với các tác dụng tương ứng cho các ứng dụng của bạn.

AngularJS cũng cho phép bạn tự định nghĩa các chỉ thị của riêng bạn.

Chỉ thị trong AngularJS

Các chỉ thị AngularJS được dùng để mở rộng các thuộc tính HTML với tiền tố ng-.

Chỉ thị ng-app khởi tạo một ứng dụng AngularJS.

Chỉ thị ng-init khởi tạo dữ liệu ứng dụng.

Chỉ thị ng-model kết hợp giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.

Thí dụ

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{firstName}}</p>

</div>

Chỉ thị ng-app của AngularJS sẽ thông báo rằng thẻ <div> là chủ sở hữu của ứng dụng AngularJS.

Liên kết dữ liệu

Biểu thức {{firstName}} trong ví dụ ở trên là một biểu thức liên kết dữ liệu của AngularJS.

AngularJS sẽ liên kết các biểu thức AngularJS với dữ liệu AngularJS.

{{firstName}} tương ứng với ng-model="firstName".

Trong ví dụ tiếp theo đây hai trường văn bản cùng được đặt một loại chỉ thị ng-model:

Ví dụ

<div ng-app="" ng-init="quantity=1;price=5">

Số lượng: <input type="number" ng-model="quantity">
<br>
Giá:    <input type="number" ng-model="price">

Thành tiền: {{quantity * price}}

</div>

Việc sử dụng ng-init là không phổ biến, ta nên dùng cách khác để khởi tạo dữ liệu trong bài viết về controller.

Lặp các phần tử HTML

Chỉ thị ng-repeat sẽ lặp một phần tử HTML:

Ví dụ

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{x}}
    </li>
  </ul>
</div>

Chỉ thị ng-repeat thực ra dùng để nhân bản các phần tử HTML một lần cho mỗi mục trong tập hợp.

Chỉ thị ng-repeat được sử dụng trên một mảng các đối tượng:

Ví dụ

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"
>


<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

AngularJS rất tuyệt vời với các ứng dụng cơ sở dữ liệu CRUD (Create Read Update Delete).
Chỉ cần tưởng tượng điều gì sẽ xảy ra nếu những đối tượng này được lưu vào một database.

Chỉ thị ng-app

Chỉ thị ng-app dùng để xác định phần tử gốc của một ứng dụng AngularJS.

Chỉ thị ng-app sẽ auto-bootstrap (tự khởi động) ứng dụng khi trang web được load.

Chỉ thị ng-init

Chỉ thị ng-init dùng để xác định các giá trị khởi tạo cho ứng dụng AngularJS.

Thông thường thì bạn sẽ không sử dụng chỉ thị ng-init, thay vào đó bạn sẽ dùng một controller hoặc một module để thay thế.

Chỉ thị ng-model

Chỉ thị ng-model kết hợp giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.

Chỉ thị ng-model cũng có thể:

  • Cung cấp xác nhận kiểu cho dữ liệu ứng dụng (number, email, required).
  • Cung cấp trạng thái cho dữ liệu ứng dụng (không hợp lệ, lỗi).
  • Cung cấp các lớp CSS cho các phần tử HTML.
  • Liên kết phần tử HTML với các hình thức HTML.

Tạo các chỉ thị mới

Ngoài tất cả các chỉ thị AngularJS có sẵn, bạn có thể tạo các chỉ thị riêng của mình.

Các chỉ thị mới được tạo ra bằng cách sử dụng hàm .directive().

Để gọi ra chỉ thị mới, hãy tạo một phần tử HTML có cùng tên thẻ với chỉ thị mới.

Khi đặt tên cho một chỉ thị, bạn phải sử dụng phương pháp đặt theo kiểu lạc đà (V1Study chẳng hạn), nhưng khi gọi nó, bạn phải sử dụng tên riêng (v1-study chẳng hạn):

Thí dụ

<body ng-app="myApp">

<v1-study></v1-study>

<script>
var app = angular.module("myApp", []);
app.directive("V1Study"function() {
    return {
        template : "<h1>Made by a directive!</h1>"
    };
});

</script>

</body>

Bạn có thể gọi một thư mục bằng cách sử dụng:

  • Tên phần tử
  • Thuộc tính
  • Lớp
  • Chú thích

Các ví dụ dưới đây sẽ tạo ra cùng một kết quả:

Tên phần tử

<v1-study></v1-study>

Thuộc tính

<div v1-study></div>

Lớp

<div class="v1-study"></div>

Chú thích

<!-- directive: v1-study -->

Hạn chế

Bạn có thể hạn chế những chỉ thị của bạn để chỉ có thể được gọi bởi một số phương thức.

Ví dụ

Bằng cách thêm một thuộc tính restrict với giá trị "A", chỉ thị chỉ có thể được gọi bởi những thuộc tính (Atribute):

var app = angular.module("myApp", []);
app.directive("V1Study"function() {
    return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };
});

Những hạn chế phổ biến áp dụng cho chỉ thị:

  • E là tên phần tử (Element)
  • A là thuộc tính (Attribute)
  • C là lớp (Class)
  • M là chú thích (comMent)

Theo mặc định thì giá trị hạn chế là EA, tức là chỉ thị được gọi thông qua tên phần tử và thuộc tính.

» Tiếp: Model trong Angular
« Trước: Module trong Angular
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!