1.Hướng dẫn AngularJS

• AngularJS cho phép bạn mở rộng HTML với các thuộc tính mới được gọi là Directives .
• AngularJS có một tập hợp các chỉ thị tích hợp cung cấp chức năng cho các ứng dụng của bạn.
• AngularJS cũng cho phép bạn xác định các chỉ thị của riêng mình.
• Các chỉ thị AngularJS là các thuộc tính HTML mở rộng 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.
  • Lệnh ng-modelliên kết giá trị của các điều khiển HTML (đầu vào, lựa chọn, vùng văn bản) với dữ liệu ứng dụng.

• Chỉ thị ng-app cũng cho AngularJS biết rằng phần tử <div> là “chủ sở hữu” của ứng dụng AngularJS.

Chỉ thị ng-app

• Chỉ thị ng-app xác định phần tử gốc của một ứng dụng AngularJS.
• Chỉ thị ng-app sẽ tự động khởi động (tự động khởi tạo) ứng dụng khi một trang web được tải.

Chỉ thị ng-init

• Chỉ thị ng-init xác định các giá trị ban đầu cho một ứng dụng AngularJS.
• Thông thường, bạn sẽ không sử dụng ng-init. Thay vào đó, bạn sẽ sử dụng bộ điều khiển hoặc module.
• Bạn sẽ tìm hiểu thêm về bộ điều khiển và module sau.

Chỉ thị ng-model

• Lệnh ng-modelliên kết giá trị của các điều khiển HTML (đầu vào, lựa chọn, vùng văn bản) với dữ liệu ứng dụng.
• Chỉ thị ng-model cũng có thể:
  • Cung cấp xác thực kiểu cho dữ liệu ứng dụng (số, email, bắt buộc)(number, email, required).
  • Cung cấp trạng thái cho dữ liệu ứng dụng (không hợp lệ, bẩn, chạm, lỗi)(invalid, dirty, touched, error).
  • Cung cấp các lớp CSS cho các phần tử HTML.
  • Liên kết các phần tử HTML với các biểu mẫu HTML.

2.Data Binding (Ràng buộc 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 AngularJS.
• Liên kết dữ liệu trong AngularJS liên kết các biểu thức AngularJS với dữ liệu AngularJS.
• {{ firstName }}được ràng buộc với ng-model="firstName".
• Sử dụng ng-initkhông phải là rất phổ biến.
• Trong ví dụ tiếp theo, hai trường văn bản được liên kết với nhau bằng hai lệnh ng-model:

3.Các phần tử HTML lặp lại

• Lệnh ng-repeatlặp lại một phần tử HTML:
• Lệnh ng-repeatthực sự sao chép các phần tử HTML một lần cho mỗi mục trong một bộ sưu tập.
• Lệnh ng-repeatđược sử dụng trên một mảng các đối tượng:

• AngularJS hoàn hảo cho các ứng dụng CRUD (Create Read Update Delete) cơ sở dữ liệu. Chỉ cần tưởng tượng nếu các đối tượng này là bản ghi từ cơ sở dữ liệu.

4.Tạo Chỉ thị Mới

• Ngoài tất cả các chỉ thị AngularJS được tích hợp sẵn, bạn có thể tạo các chỉ thị của riêng mình.
• Các chỉ thị mới được tạo bằng cách sử dụng hàm .directive.
• Để gọi 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 một chỉ thị, bạn phải sử dụng tên trường hợp lạc đà w3TestDirective, nhưng khi gọi nó, bạn phải sử dụng -tên riêng biệt w3-test-directive,:

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

• Tên phần tử (Element name)

• Thuộc tính (Attribute)

• Lớp(Class)

• Bình luận (Comment)

⇒Tất cả các ví dụ trên sẽ tạo ra cùng một kết quả

5.Những hạn chế

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

Ví dụ:

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

Các giá trị hạn chế pháp lý là:

• Echo tên phần tử
• Acho Thuộc tính
• Ccho Lớp học
• Mcho bình luận

Theo mặc định, giá trị là EA, nghĩa là cả tên phần tử và tên thuộc tính đều có thể gọi chỉ thị.

KẾT LUẬN: Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để Ứng dụng free   giải đáp thắc mắc nhé! Cảm ơn các bạn đã theo dõi bài viết.

19/10/2022 Blog Tin Học