Chỉ thị AngularJS: ng-init, ng-app, ng-model & ng-repeat
James Hartman
Chỉ thị trong AngularJS là gì?
A Chỉ thị trong AngularJS là một lệnh cung cấp chức năng mới cho HTML. Khi Angular duyệt qua mã HTML, trước tiên nó sẽ tìm các lệnh trong trang và sau đó phân tích trang HTML tương ứng. 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”. Lệnh này được sử dụng để liên kết mô hình dữ liệu 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 của 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ấp độ tiếp theo cho phép logic nghiệp vụ, nhưng như đã đề cập để một ứng dụng trở thành một ứng dụng góc, không bắt buộc phải có bộ điều khiển.
Cách tạo chỉ thị trong AngularJS
Như chúng tôi đã định nghĩa trong phần giới thiệu, các chỉ thị của 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 chỉ thị AngularJS cùng với các ví dụ được cung cấp để giải thích từng chỉ thị đó.
ng-app trong AngularJS
Điều này được sử dụng để khởi tạo ứng dụng Angular.JS. Khi lệnh 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 Angular.js.
Ví dụ về ứng dụng np
Ví dụ dưới đây cho thấy cách sử dụng lệnh ng-app. Trong ví dụ này, chúng tôi chỉ trình bày cách biến một ứng dụng HTML bình 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>
Giải thích mã:
- Lệnh “ng-app” được thêm vào thẻ div của chúng tôi để cho biết rằng ứng dụng này là một ứng dụng Angular.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.
- Vì chúng ta đã định nghĩa ứng dụng này là một ứng dụng Angular.js nên giờ đây chúng ta có thể sử dụng chức năng Angular.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, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Đầu ra hiển thị rõ ràng đầu ra của biểu thức chỉ có thể thực hiện được vì chúng tôi đã xác định ứng dụng này là một ứng dụng Angularjs.
ng-init trong AngularJS
Đ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 bằng lệnh ng-init.
Ví dụ về ng-init
Ví dụ dưới đây cho thấy cách sử dụng lệnh 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>
Giải thích mã:
- 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 các biểu thức trong AngularJs để hiển thị đầu ra của tên biến “TutorialName” đã được xác định trong lệnh ng-init của chúng tôi.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầ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.
mô hình ng trong AngularJS
Và cuối cùng, chúng ta có lệnh ng-model, được sử dụng để liên kết giá trị của đ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 lệnh ng-model.
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>
Giải thích mã:
- 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 mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầ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 vào hộp văn bản và thay đổi giá trị của Người và Giá đăng ký, Tổng số sẽ tự động thay đổi.
- Kết quả đầu ra ở trên chỉ cho thấy sức mạnh của việc liên kết dữ liệu trong AngularJs, điều này đạt được khi sử dụng chỉ thị ng-model.
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>
Giải thích mã:
- 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 mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầ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.
Tổng kết
- 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 - Cái này được sử dụng để khởi tạo một ứng dụng góc cạnh.
- ng-init – Cái 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 góc.
