Chỉ thị AngularJS: ng-init, ng-app, ng-model & ng-repeat
James Hartman
⚡ Tóm tắt thông minh
Các chỉ thị AngularJS mở rộng HTML thông thường với các hành vi mới. Các dấu hiệu ng-app, ng-init, ng-model và ng-repeat khởi tạo ứng dụng, điền dữ liệu cục bộ, liên kết các điều khiển biểu mẫu với mô hình và sao chép các phần tử một lần cho mỗi mục trong tập hợp.
Chỉ thị trong AngularJS là gì?
A Chỉ thị Trong AngularJS, `<directive>` là một lệnh cung cấp chức năng mới cho HTML. Khi AngularJS xử lý mã HTML, nó sẽ tìm các directive trong trang trước tiên và sau đó phân tích cú pháp trang HTML tương ứng. Một ví dụ đơn giản về directive trong AngularJS, mà chúng ta đã thấy trong các chương trước, là directive `ng-model`. Directive này được sử dụng để liên kết mô hình dữ liệu của chúng ta với view.
Lưu ý: Bạn có thể sử dụng mã AngularJS cơ bản trong trang HTML với các chỉ thị ng-init, ng-repeat và ng-model mà không cần đến Controller. Logic cho các chỉ thị này nằm trong tệp AngularJS được cung cấp bởi GoogleController là cấu trúc lập trình cấp cao hơn trong AngularJS cho phép xử lý logic nghiệp vụ, nhưng như đã đề cập, để một ứng dụng được coi là ứng dụng AngularJS thì không bắt buộc phải có controller.
Nhưng làm thế nào mà một trình duyệt lại chạy được chương trình đó?
Cách thức hoạt động của các chỉ thị AngularJS trong HTML
Như đã định nghĩa trong phần giới thiệu, chỉ thị AngularJS là một cách để mở rộng chức năng của... HTMLKhi trang tải xong, trình biên dịch AngularJS sẽ duyệt qua DOM, so khớp từng phần tử với các chỉ thị đã đăng ký và gắn hành vi mà nó tìm thấy.
AngularJS Nó đi kèm với hàng tá chỉ thị được tích hợp sẵn, cộng thêm bất kỳ chỉ thị nào bạn tự đăng ký. Bốn chỉ thị được giải thích bên dưới với các ví dụ minh họa, ng-app, ng-init, ng-model và ng-repeat, là những chỉ thị mà người mới bắt đầu thường gặp. Trước các ví dụ đó, hãy lưu ý bốn cách để viết một chỉ thị.
Bốn loại chỉ thị (directive) trong AngularJS là gì?
Một chỉ thị không phải lúc nào cũng là một thuộc tính. Trình biên dịch AngularJS có thể khớp một chỉ thị dựa trên tên phần tử, thuộc tính, tên lớp hoặc chú thích, và mỗi chỉ thị khai báo các dạng mà nó chấp nhận thông qua thuộc tính của nó. restrict thuộc tính. Giá trị mặc định là EAVì vậy, cả cú pháp phần tử và thuộc tính đều hoạt động trừ khi bạn chỉ định khác. Giá trị quan trọng nhất khi bạn viết chỉ thị của riêng mình, bởi vì trình biên dịch sẽ bỏ qua bất kỳ dạng nào mà giá trị hạn chế loại trừ.
| giới hạn giá trị | Phù hợp bởi | Ví dụ về mã đánh dấu | Sử dụng điển hình |
|---|---|---|---|
| E | Tên phần tử | Các khối độc lập sở hữu một mẫu. | |
| A | đặc tính | Thêm hành vi vào một phần tử hiện có | |
| C | Tên lớp | Mã đánh dấu cũ không thể thêm thuộc tính mới. | |
| M | Bình luận | Hiếm, được giữ lại để tương thích ngược. |
💡 Mẹo: Ưu tiên cú pháp phần tử và thuộc tính. Tài liệu tham khảo chính thức về chỉ thị AngularJS Coi các dạng lớp và bình luận là các tùy chọn cũ. Tất cả các ví dụ bên dưới đều sử dụng cú pháp thuộc tính.
ng-app trong AngularJS
Chỉ thị này được sử dụng để khởi tạo một ứng dụng AngularJS. Khi chỉ thị này được đặt trong một trang HTML, về cơ bản nó cho AngularJS biết rằng trang HTML này là một ứng dụng AngularJS.
Ví dụ về ng-app
Ví dụ dưới đây minh họa cách biến một ứng dụng HTML thông thường thành một ứng dụng AngularJS.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app=""> Tutorial Name : {{ "Angular" + "JS"}} </div> </body> </html>
⚠️ Cảnh báo: Danh sách này giữ nguyên nội dung ban đầu. chrset="UTF 8", chính xác như đã công bố. Thuộc tính chính xác là charset="UTF-8".
Code Giải thích:
- Chỉ thị “ng-app” được thêm vào thẻ div của chúng ta để chỉ ra rằng ứng dụng này là ứng dụng AngularJS. Lưu ý rằng chỉ thị 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.
- Vì chúng ta đã định nghĩa ứng dụng này là một ứng dụng AngularJS, nên giờ đây chúng ta có thể sử dụng các chức năng của AngularJS. Trong trường hợp này, chúng ta đang sử dụng các biểu thức để đơn giản là nối hai chuỗi lại với nhau.
Nếu đoạn mã được thực thi thành công, kết quả bên dưới sẽ hiển thị.
Đầu ra:
Kết quả hiển thị rõ ràng cho thấy kết quả của biểu thức, điều này chỉ có thể thực hiện được vì chúng ta đã định nghĩa ứng dụng là ứng dụng AngularJS. Chỉ thị tiếp theo cung cấp dữ liệu của nó.
ng-init trong AngularJS
Lệnh này được sử dụng để khởi tạo dữ liệu ứng dụng. Đôi khi bạn có thể cần một số dữ liệu cục bộ cho ứng dụng của mình, và điều này có thể được thực hiện bằng chỉ thị `ng-init`.
Ví dụ về 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 lệnh ng-init và hiển thị giá trị của biến đó trên trang.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="TutorialName='Angular JS'"> Tutorial Name : {{ TutorialName}} </div> </body> </html>
Code Giải thích:
- Lệnh 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ó tên là “TutorialName” và giá trị được cung cấp cho biến này là “AngularJS”.
- Chúng tôi đang sử dụng biểu thức trong AngularJS để hiển thị kết quả của tên biến “TutorialName”, được định nghĩa trong chỉ thị ng-init của chúng tôi.
Nếu đoạn mã được thực thi thành công, kết quả bên dưới sẽ hiển thị.
Đầu ra:
Ở đầu ra,
- Kết quả hiển thị rõ ràng đầu ra của biểu thứ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.
Lệnh tiếp theo sẽ gửi dữ liệu từ màn hình trở lại mô hình.
mô hình ng trong AngularJS
Và cuối cùng, chúng ta có chỉ thị ng-model, được sử dụng để liên kết giá trị của một điều khiển HTML với dữ liệu ứng dụng.
Ví dụ về 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 biến này sẽ được liên kết 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.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="quantity=1;price=5"> People : <input type="number" ng-model="quantity"> Registration Price : <input type="number" ng-model="price"> Total : {{quantity * price}} </div> </body> </html>
Code Giải thích:
- Lệnh 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 còn lại là “giá cả”.
- Bây giờ chúng ta sử dụng chỉ thị ng-model để liên kết các hộp văn bản “People” và “Registration price” với các biến cục bộ “quantity” và “price” tương ứng.
- Cuối cùng, chúng ta thể hiện Tổng thông qua một biểu thức, là phép nhân của biến số lượng và biến giá.
Nếu đoạn mã được thực thi thành công, kết quả bên dưới sẽ hiển thị.
Đầu ra:
- Đầu ra hiển thị rõ ràng phép nhân của các giá trị dành cho Người và Giá đăng ký.
Bây giờ, nếu bạn thay đổi giá trị của Số người và Giá đăng ký trong các ô văn bản, Tổng cộng sẽ tự động thay đổi.
- Kết quả đầu ra ở trên chỉ đơn giản cho thấy sức mạnh của liên kết dữ liệu trong AngularJS, điều này đạt được nhờ việc sử dụng... chỉ thị ng-model.
Phương pháp cuối cùng trong bốn phương pháp này xử lý nhiều giá trị cùng một lúc.
lặp lại trong AngularJS
Đ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.
Ví dụ về 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 lệnh 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
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="chapters=['Controllers','Models','Filters']"> <ul> <li ng-repeat="names in chapters"> {{names}} </li> </ul> </div> </body> </html>
Code Giải thích:
- Lệnh ng-init được thêm vào thẻ div của chúng ta để xác định một biến có tên là “chương”, là một biến mảng 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ó tên là “names” và duyệt qua từng phần tử trong mảng chương.
- Cuối cùng, chúng tôi hiển thị giá trị của biến nội tuyến cục bộ 'names'.
Nếu đoạn mã được thực thi thành công, kết quả bên dưới sẽ hiển thị.
Đầu ra:
- Kết quả đầu ra ở trên chỉ cho thấy lệnh ng-repeat lấy từng giá trị trong mảng được gọi là “chương” và tạo các mục danh sách HTML cho từng mục trong mảng.
Bốn bước đó bao gồm khởi động, dữ liệu, liên kết và lặp lại. Danh sách bên dưới cho thấy những bước tiếp theo.
Các chỉ thị tích hợp sẵn khác thường được sử dụng trong AngularJS
Bốn chỉ thị trên là tập hợp ban đầu, chứ không phải toàn bộ thư viện. Mỗi mục bên dưới là một thuộc tính mà bạn đặt trực tiếp lên phần tử mà nó điều khiển.
- ng-bind: Ghi giá trị phạm vi vào văn bản của một phần tử mà không hiển thị dấu ngoặc nhọn thô trong giây lát khi tải trang.
- ng-if: Xóa phần tử khỏi DOM khi biểu thức của nó là false, và xây dựng lại phần tử đó khi biểu thức là true.
- ng-show và ng-hide: TogglHiển thị bằng CSS. Phần tử vẫn nằm trong DOM, do đó việc bật/tắt nhiều lần sẽ tốn ít tài nguyên hơn.
- ng-class: Thêm hoặc xóa các lớp CSS khỏi một biểu thức, cho phép kiểu dáng tuân theo mô hình.
- ng-click: Thực thi một biểu thức hoặc một hàm phạm vi khi người dùng nhấp vào phần tử.
- ng-controller: Gắn bộ điều khiển vào một khối mã HTML khi trang web vượt quá khả năng của ng-init.
- ng-disabled và ng-readonly: Đặt thuộc tính biểu mẫu phù hợp bất cứ khi nào biểu thức của chúng đúng.
Phần Hỏi đáp bên dưới sẽ giải đáp những câu hỏi thường gặp nhất sau danh sách này.
