Chỉ thị AngularJS là gì?
Một chỉ thị trong AngularJS là một lệnh cung cấp chức năng mới cho HTML. Khi góc nhìn qua mã HTML, đầu tiên nó sẽ tìm các chỉ thị trong trang và sau đó phân tích cú pháp trang HTML cho phù hợp.
Một ví dụ đơn giản về chỉ thị AngularJS mà chúng ta đã thấy trong các chương trước là "chỉ thị ng-model". Chỉ thị này được sử dụng để liên kết mô hình dữ liệu của chúng tôi với chế độ xem của chúng tôi.
Lưu ý: Bạn có thể có mã góc cơ bản trong trang HTML với các lệnh ng-init, ng-repeat và ng-model mà không cần phải có Bộ điều khiển. Logic cho các lệnh này nằm trong tệp Angular.js do Google cung cấp. Bộ điều khiển là cấu trúc lập trình góc cạnh cấp độ tiếp theo cho phép logic nghiệp vụ, nhưng như đã đề cập đối với một ứng dụng là một ứng dụng góc thì không bắt buộc phải có bộ điều khiển.
Trong hướng dẫn này, bạn sẽ học-
- Cách tạo Chỉ thị
- ng-app
- ng-init
- ng-model
- ng-lặp lại
Cách tạo Chỉ thị
Như chúng tôi đã định nghĩa trong phần giới thiệu, các chỉ thị AngularJS là một cách để mở rộng chức năng của HTML.
Có 4 chỉ thị được định nghĩa trong AngularJS.
Dưới đây là danh sách các lệnh AngularJS cùng với các ví dụ được cung cấp để giải thích từng lệnh.
1) ng-app
Điều này được sử dụng để khởi tạo một ứng dụng Angular.JS. Khi chỉ thị này được áp dụng trong một trang HTML, về cơ bản nó sẽ cho Angular biết rằng trang HTML này là một ứng dụng angle.js.
Ví dụ dưới đây cho thấy cách sử dụng chỉ thị ng-app. Trong ví dụ này, chúng tôi sẽ chỉ đơn giản là chỉ cách biến một ứng dụng HTML bình thường trở thành một ứng dụng angleJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Giải thích mã:
- Lệnh "ng-app" được thêm vào thẻ div của chúng tôi để chỉ ra rằng ứng dụng này là một ứng dụng angle.js. Lưu ý rằng lệnh ng-app có thể được áp dụng cho bất kỳ thẻ nào, vì vậy nó cũng có thể được đặt trong thẻ body.
- Bởi vì chúng tôi đã định nghĩa ứng dụng này là một ứng dụng angle.js, nên bây giờ chúng tôi có thể sử dụng chức năng angle.js. Trong trường hợp của chúng tôi, chúng tôi đang sử dụng các biểu thức để nối 2 chuỗi một cách đơn giản.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Kết quả hiển thị rõ ràng kết quả đầu ra của biểu thức chỉ được thực hiện bởi vì chúng tôi đã định nghĩa ứng dụng này là một ứng dụng anglejs.
2) ng-init
Điều này được sử dụng để khởi tạo dữ liệu ứng dụng. Đôi khi bạn có thể yêu cầu một số dữ liệu cục bộ cho ứng dụng của mình, điều này có thể được thực hiện với chỉ thị ng-init.
Ví dụ dưới đây cho thấy cách sử dụng chỉ thị ng-init.
Trong ví dụ này, chúng ta sẽ tạo một biến có tên "TutorialName" bằng cách sử dụng chỉ thị ng-init và hiển thị giá trị của biến đó trên trang.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Giải thích mã:
- Chỉ thị ng-init được thêm vào thẻ div của chúng tôi để xác định một biến cục bộ được gọi là "TutorialName" và giá trị được cấp cho điều này là "AngularJS".
- Chúng tôi đang sử dụng các biểu thức trong AngularJs để hiển thị đầu ra của tên biến "TutorialName" đã được định nghĩa trong chỉ thị ng-init của chúng tôi.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Trong đầu ra,
- Kết quả hiển thị rõ ràng đầu ra của biểu thức có chứa chuỗi "AngularJS". Điều này là do chuỗi "AngularJS" được gán cho biến 'TutorialName' trong phần ng-init.
3) ng-model
Và cuối cùng, chúng ta có chỉ thị ng-model, được sử dụng để ràng buộc giá trị của một điều khiển HTML với dữ liệu ứng dụng. Ví dụ dưới đây cho thấy cách sử dụng chỉ thị ng-model.
Trong ví dụ này,
- Chúng ta sẽ tạo 2 biến gọi là "số lượng" và "giá cả". Các biến này sẽ bị ràng buộc với 2 điều khiển nhập văn bản.
- Sau đó, chúng tôi sẽ hiển thị tổng số tiền dựa trên phép nhân của cả giá trị giá và số lượng.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Giải thích mã:
- Chỉ thị ng-init được thêm vào thẻ div của chúng tôi để xác định 2 biến cục bộ; một cái được gọi là "số lượng" và cái kia là "giá cả".
- Bây giờ chúng tôi đang sử dụng chỉ thị ng-model để liên kết các hộp văn bản "Mọi người" và "Giá đăng ký" với các biến địa phương của chúng tôi tương ứng là "số lượng" và "giá".
- Cuối cùng, chúng tôi đang hiển thị Tổng thông qua một biểu thức, đó là phép nhân của các biến số lượng và giá cả.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
- Đầu ra cho thấy rõ sự nhân lên của các giá trị về Con người và Giá đăng ký.
Bây giờ, nếu bạn đi đến các hộp văn bản và thay đổi giá trị của Số người và Giá đăng ký, Tổng sẽ tự động thay đổi.
- Kết quả đầu ra ở trên chỉ cho thấy sức mạnh của liên kết dữ liệu trong angleJ, điều này đạt được khi sử dụng chỉ thị ng-model.
4) ng-lặp lại
Điều này được sử dụng để lặp lại một phần tử HTML. Ví dụ dưới đây cho thấy cách sử dụng chỉ thị ng-repeat.
Trong ví dụ này,
- Chúng ta sẽ có một mảng tên chương trong một biến mảng và
- sau đó sử dụng chỉ thị ng-repeat để hiển thị từng phần tử của mảng dưới dạng một mục danh sách
Event Registration Guru99 Global Event
- {{names}}
Giải thích mã:
- Chỉ thị ng-init được thêm vào thẻ div của chúng tôi để xác định một biến được gọi là "các chương", là một biến mảng có chứa 3 chuỗi.
- Phần tử ng-repeat được sử dụng bằng cách khai báo một biến nội tuyến được gọi là "tên" và đi qua từng phần tử trong mảng chương.
- Cuối cùng, chúng tôi đang hiển thị giá trị của các 'tên' biến nội tuyến cục bộ.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
- Kết quả ở trên chỉ cho thấy rằng lệnh ng-repeat lấy từng giá trị trong mảng được gọi là "các chương" và tạo các mục danh sách HTML cho từng mục trong mảng.
Tóm lược
- Các chỉ thị được sử dụng để mở rộng chức năng của HTML. Angular cung cấp các chỉ thị sẵn có như
- ng-app - Điều này được sử dụng để khởi tạo một ứng dụng góc cạnh.
- ng-init - Điều này được sử dụng để tạo các biến ứng dụng
- ng-model - Điều này được sử dụng để liên kết các điều khiển HTML với dữ liệu ứng dụng
- ng-repeat - Được sử dụng để lặp lại các phần tử sử dụng angle.