Tìm hiểu AngularJS - Expressions, Directives (P2)

Bài đăng này đã không được cập nhật trong 9 năm

Ở bài lần trước mình đã giới thiệu với các bạn Tổng Quan về AngularJS. Bài này chúng ta sẽ tiếp tục cùng nhau tìm hiều về Expressions và Directives trong AngularJS, xen kẽ giữa bài viết mình sẽ đưa ra một vài ví dụ nhỏ để các bạn nắm rõ hơn.

I. AngularJS Expressions (biểu thức)

1. Khái niệm

Biểu thức trong AngularJS cũng giống như biểu thức trong JavaScript nhưng nó được đặt trong cặp giấu ngoặc {{ }}. Kết quả của biểu thức sẽ được hiển thị ra ngay chỗ biểu thức được viết ra giống với cơ chế binding của ng-bind directive (cái này sẽ được đề cấp ở phần dưới).

2. Ví dụ

Một biểu thức AngularJS hợp lệ có thể chứa các chuỗi string, các toán tử và các biến, chẳng hạn như:

{{ 5 + 5 }}

{{ firstName + ' ' + lastName }}

{{ user.name }}

{{ items[index] }}

3. So sánh với Javascript Expressions

Biểu thức trong AngularJS cơ bản là giống với biểu thức trong Javascript nhưng cũng có những điểm khác nhau dưới đây:

Nếu các biến được sử dụng là rỗng hoặc chưa được định nghĩa thì trong Javascript sẽ phát sinh lỗi còn trong AngularJS thì bỏ qua.

Bạn không thể sử dụng biểu thức điều kiện, vòng lặp hay exception trong biểu thức AngularJS.

Không khai báo function trong biểu thức AngularJS ngay cả bên trong ng-init directive.

Không thể tạo biểu thức regular trong biểu thức AngularJS.

Bạn có thể dùng các filter trong các biểu thức để định dạng dữ liệu trước khi hiển thị chúng.

II. AngularJS Directives

1. Khái niệm

Directives là một thành phần mở rộng của HTML, mà bạn có thể custom lại các thuộc tính, các phần tử (element) do AngularJS nó định nghĩa thêm. Mỗi directive được bắt đầu bằng tiền tố ng-, chẳng hạn một directive có dạng ng-xxx trong đó xxx là tên của directive mà chúng ta sử dụng.
AngularJS cung cấp sẵn cho chúng ta một bộ gồm rất nhiều các directives, các bạn co thể tham khảo tại Angular API. Trong bài này mình chỉ giới thiệu một vài directive chính hay được sử dụng, chẳng hạn như:
ng-app: Directive khởi tạo ứng dụng AngularJS, khi ng-app được khai báo AngularJS sẽ hiểu là bắt đầu một ứng dụng Angular, nó sẽ xác định đây là thẻ gốc (element root). Ngoài ra ng-app còn được sử dụng để mô tả các module khác nhau trong ứng dụng.
ng-init: Directive dùng để khai báo dữ liệu khởi tạo khi ứng dụng vừa chạy, các dự liệu này sẽ được dùng cho toàn bộ phạm vi của controller mà nó thuộc về. Nói cách khác nó tương đương với hàm khởi tạo constructor trong lập trình hướng đối tượng.
ng-model: Directtive dùng để liên kết giá trị từ Form HTML (input, select, textarea) vào dữ liệu ứng dụng.
ng-bind: Directive dùng để liên kết dữ liệu với ng-model và hiện thị ra view.
. . .

2. Ví dụ

Ví dụ 1:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf8">
        <title>AngularJS Directives</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="name='Framgia'">
            <p>Input something in the input box:</p>
            <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></input></p>
            <h1>Hello <span ng-bind="name"></span></h1>
        </div>
    </body>
</html>

Xem demo ví dụ này.

Như các bạn thấy ở ví dụ này ng-app để khai báo cho Angular biết bắt đầu ứng dụng, ng-init="name='Framgia'" khởi tạo giá trị name ban đầu là Framgia. Kết quả khi chạy lần đầu tiên bạn sẽ nhận được là: Hello Framgia, khi bạn thay đổi giá trong ô input ng-model="name" sẽ lấy giá trị nhập vào gán cho biết name. Và cuối cùng ng-bind="name" sẽ lấy giá trị từ ng-model hiển thị ra view.
Ví dụ 2:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf8">
        <title>AngularJS Directives</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="quantity=1;price=5">

            Quantity: <input type="number" ng-model="quantity"></input>
            Costs:    <input type="number" ng-model="price"></input>

            Total in dollar: {{ quantity * price }}

        </div>
    </body>
</html>

Xem demo ví dụ này.

Khác với ở ví dụ 1, ví dụ này ta khởi tạo 2 biến quantity, price trong ng-model và ta không còn thấy directive ng-bind nhưng kết quả ta thu được vẫn tương tự với AngularJS Expression {{ quantity * price }} (xem lại phần Khái niện của AngularJS Expression ở trên).
Ví dụ 3:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf8">
        <title>AngularJS Directives</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="names=[
        {name:'Lien',address:'Ha Noi'},
        {name:'Linh',address:'HCM'},
        {name:'Thu',address:'Da Nang'}]">

        <p>Looping with objects:</p>
        <ul>
          <li ng-repeat="x in names">
          {{ x.name + ', ' + x.address }}</li>
        </ul>

        </div>
    </body>
</html>

Xem demo ví dụ này.

Ở ví dụ này ta directive ng-init khởi tạo một mảng names và ta dùng directive ng-repeat để vẽ lại các phẩn tử HTML. Kết quả hiển thị ra ta dùng biểu thức trong Angular.

III. Kết luận và tham khảo

Sườn bài của loạt seri tìm hiểu AngularJS này mình sẽ đựa vào sườn bài của AngularJS Tutorial trên trang w3schools.com. Như vậy nội dung lần này là Expressions và Directives thì lần tới sẽ là Controllers có thể cả Filters. Tất nhiên mình cũng sẽ kết hợp documment trên trang chủ AngularJS và một số nguồn khác trên mạng như:

code.freetuls.net

API AngularJS

Nếu các bạn có ý kiến đóng góp xin vui lòng để lại comment bên dưới, chúng ta sẽ cùng nhau mổ xẻ vấn đề. Thank you!

I. AngularJS Expressions (biểu thức)

1. Khái niệm

2. Ví dụ

3. So sánh với Javascript Expressions

II. AngularJS Directives

1. Khái niệm

2. Ví dụ

III. Kết luận và tham khảo

Mục lục