Web Design

AngularJS, Bài 3: Giới thiệu về Directives

Trong bài trước, tức bài Two-way data binding, tôi đã nói ng-model là một directive. Trong bài này, tôi sẽ giới thiệu về directives cũng như một số directives thường dùng.

AngularJS

1. AngularJS Directives là gì?

Nói một cách đơn giản nhất, chúng là những extended attributes được gán vào các HTML elements, giống như ng-model ở bài trước vậy. Chúng được “ngụy trang” dưới dạng một HTML attribute, chẳng hạn <body ng-app=’Application’>. Để phân biệt với các attrs gốc, các Angular Directives đều được bắt đầu với tiền tố ng- như ng-app, ng-model, và bạn sắp sửa gặp những tên ng khác như ng-controller, ng-repeat, ng-show…

Thực tình thì vốn từ của tôi không có từ chính xác để Việt hóa từ “directive” được. Trong các từ điển như La bàn cũng như Google Dịch thì họ đưa ra từ “chỉ thị” nhưng theo tôi là không chính xác cho lắm. Vì vậy, bạn nên tạm thời chấp nhận và sử dụng từ “directive” cho tới lúc chúng ta tìm ra từ chính xác nhất.

Ngoài ra, bạn có thể tạo một directive tùy ý. Về phần directive tự tạo, tôi sẽ nói sau.

2. Một số directives phải có:

Đây là những directives mang tính “then chốt” cần, hoặc chí ít là phải nên có trong ứng dụng AngularJS của bạn. Chúng bao gồm:

  • ng-app: Có tác dụng khởi tạo ứng dụng AngularJS của bạn. Cho dù bạn không gán giá trị cho nó thì cũng phải khai báo nó để AngularJS directives khác hoạt động được. Bạn gắn nó vào đâu, thì AngularJS sẽ kiểm soát phần HTML ở đó. Chẳng hạn, thay vì đặt nó trong <html> như tôi, bạn cho nó vào một <div ng-app>, thì AngularJS chỉ thực hiện việc kiểm soát ở phần <div> đó, từ ngoài vào trong, mà thôi. Các phần khác, bao gồm parent(s) và sibling(s) của phần div đó không được AngularJS kiểm soát. Thông thường, bạn nên đặt nó hoặc ở <html>, hoặc ở <body>. Phần nào bạn không muốn AngularJS kiểm soát thì không dùng ng- attrs và code bằng HTML thuần.
  • ng-model: Bạn đã biết một phần về ng-model thông qua bài trước. Ngoài ra, nó còn có những tác dụng khác, như cung cấp xác nhận về loại của dữ liệu, chẳng hạn như type của các <input> (email, number, password, required…); thể hiện trạng thái của ứng dụng và cuối cùng là quản lí các HTML/CSS class của các elements.
  • ng-init: Đây là một directive khá quan trọng, có tác dụng khởi tạo các AngularJS variables. Nếu đem so với hoạt động lập trình mobile thì ng-init có thể xem là tương đương với onCreate(Bundle) của Android hay viewDidLoad với iOS.
  • ng-controller: Định nghĩa một phần controller. Tôi sẽ tách nó ra làm một bài riêng về Controller nên tạm thời bạn chỉ cần biết tên nó ở thời điểm này.
  • ng-click: Tôi xếp ng-click vào nhóm này, vì đã là ứng dụng web thì bạn hầu như lúc nào cũng phải code một click event. Bạn có thể coi nó như là phiên bản AngularJS của onclick của element vậy. Và chỉ có nó mới có thể truy cập được những dữ liệu của AngularJS models, trong khi onclick thì không.
  • ng-class: Directive này kiểm soát các className của các elements. Tương tự như ng-click, nó là phiên bản AngularJS của class của element. Nó hơn class ở chỗ có thể truy cập các dữ liệu của AngularJS models. Bạn có thể lấy giá trị của một ng-model để làm tên class thông qua directive này.

3. Một số directives phổ biến:

Các directives này được sự dụng rộng rãi trong các ứng dụng viết với AngularJS. Nhưng nhìn chung, mức độ bắt buộc phải có, hoặc nên có, là thấp hơn so với nhóm bên trên. Chúng bao gồm:

  • ng-include: “Nhét” một nội dung HTML nằm rời vào trang HTML hiện tại. Đây là một directive vô cùng hữu hiệu nếu bạn muốn “module” hóa các phần code. Ở đây, nó tương tự như element.innerHTML vậy, nhưng có điều, nội dung HTML nằm riêng ở một trang HTML khác.
  • ng-repeat: Lặp lại một nội dung HTML, thường gặp với các thẻ <li> trong <ul> hoặc <ol> để duyệt và in các phần tử trong một array.
  • ng-focus: Tương tự như ng-click nhưng với event focus đối với các <input>.
  • ng-href: Tương tự như ng-class nhưng lần này là attr href. Để dùng String expression khi gán địa chỉ cho một tag <a>, bạn không thể dùng trực tiếp trong attr href được, mà phải dùng ng-href, vì như tôi đã nói ở bài trước, khi dùng String expression và các biến của AngularJS, bạn phải sử dụng các directive “đóng giả” các attr thay cho các attr thật.
  • ng-show: Hiện (show) hoặc ẩn đi (hide) một element một cách linh động, tùy thuộc vào mục đích đã định trước. Ngược lại với nó là ng-hide. Ví dụ:

4. Sử dụng directives như elements:

Ngoài việc dùng directives như các attributes cho các HTML elements, bạn cũng có thể dùng một số các AngularJS directives như là một HTML element luôn. Chẳng hạn:

Tuy nhiên, không phải directive nào cũng có thể được “nâng tầm” lên để dùng như các HTML elements được. Để biết directive nào có thể được dùng như HTML elements, không có cách nào khác ngoài… thuộc tên. Bạn có thể tham khảo toàn bộ danh sách các directives tại trang API references của angularjs.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.