Các Directive trong AngularJS

AngularJS directive được sử dụng để kế thừa HTML. Có những thuộc tính đặc biệt bắt đầu với tiền tố ng-. Chúng ta sẽ thảo luận những directive:

ng-app - Directive để bắt đầu một ứng dụng AngularJS.
ng-init - Directive để khởi tạo dữ liệu cho ứng dụng.
ng-model - Directive định nghĩa model như là một biến có thể sử dụng trong AngularJS.
ng-repeat - Directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp.

Phần tiếp theo, mình sẽ giới thiệu chi tiết các directive trên.

Giới thiệu ng-app directive trong AngularJS

ng-app directive bắt đầu một ứng dụng AngularJS. Nó định nghĩa phần tử root. Nó tự động khởi tạo ứng dụng và khởi tạo ứng dựng web sử dụng AngularJS. Nó cũng được sử dụng để tải các module khác nhau của ứng dụng AngularJS. Ở các ví dụ tiếp theo, chúng ta định nghĩa một ứng dụng AngularJS mặc định sử dụng thuộc tính ng-app của một phần tử div.

...

Giới thiệu ng-init directive

ng-init khởi tạo các dữ liệu cho ứng dụng AngularJS. Nó được sử dụng để khởi tạo các giá trị cho một biến được sử dụng trong ứng dụng. Ở ví dụ dưới đây, chúng ta định nghĩa một mảng các Quốc gia. Chúng ta sử dụng cú pháp JSON để định nghĩa cho mảng các Quốc gia.

...

Giới thiệu ng-model directive trong AngularJS

ng-model directive định nghĩa các model/biến được sử dụng trong ứng dụng AngularJS. Ở trong ví dụ sau, chúng ta sẽ định nghĩa một model dưới tên "ten".


...
Nhap ten cua ban:

Giới thiệu ng-repeat directive trong AngularJS

ng-repeat directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp. Ở ví dụ dưới đây, chúng ta sẽ duyệt qua một mảng các Quốc gia.


...
   Danh sach cac Quoc gia voi Locale tuong ung:
   
      
         {{ 'Quoc Gia: ' + quocgia.ten + ', Locale: ' + quocgia.locale }}

Ví dụ ứng dụng AngularJS

Dưới đây là ví dụ mà bao gồm tất cả các directive mô tả bên trên:

vidudirective.html


   
   
      Directive trong AngularJS
   
   
   
      Tao ung dung AngularJS
      
       
         Nhap ten cua ban: 
         Xin chao !
         Danh sach cac quoc gia va locale tuong ung:
      
         
            
               {{ 'Quoc Gia: ' + quocgia.ten + ', Locale: ' + quocgia.locale }}

Kết quả

Mở trang vidudirective.html trên trình duyệt, nhập tên của bạn và xem kết quả dưới đây.

Bài học Angular phổ biến tại hoconline.club:

Trang trước

Trang sau