Hướng dẫn入门 AngularJS - Chỉ thị (Directives): Cẩm nang cho người mới bắt đầu

Xin chào các pháp sư AngularJS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các chỉ thị AngularJS. Đừng lo lắng nếu bạn mới làm quen với lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước một. Vậy, hãy lấy một cốc cà phê (hoặc trà, nếu đó là sở thích của bạn), và cùng nhau bắt đầu nhé!

AngularJS - Directives

Chỉ thị là gì?

Trước khi bắt đầu, hãy cùng hiểu về chỉ thị là gì. Hãy tưởng tượng chỉ thị như những hướng dẫn đặc biệt mà chúng ta đưa ra cho HTML. Chúng giống như những lời nguyền神奇 giúp trang web của chúng ta sống động với nội dung và hành vi động. Đúng là rất thú vị phải không?

Bây giờ, hãy cùng khám phá một số chỉ thị thường được sử dụng nhất trong AngularJS.

Chỉ thị `ng-app`

Chỉ thị ng-app giống như nền móng của ngôi nhà AngularJS của chúng ta. Nó告诉 AngularJS, "Hey, đây là nơi ứng dụng của tôi bắt đầu!"

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>Chào mừng đến với ứng dụng AngularJS của tôi!</p>
</body>
</html>

Trong ví dụ này, chúng ta đã thêm ng-app vào thẻ <body>. Điều này告诉 AngularJS rằng mọi thứ bên trong thẻ <body> đều là một phần của ứng dụng AngularJS của chúng ta.

Chỉ thị `ng-init`

Chỉ thị ng-init giống như một chiếc mũ phù thủy - nó cho phép chúng ta khởi tạo các biến ngay trong HTML. Nó rất hữu ích cho các demo đơn giản, nhưng trong các ứng dụng thực tế, chúng ta thường khởi tạo dữ liệu trong một controller.

Ví dụ:

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>Tên là {{ firstName + " " + lastName }}</p>
</div>

Ở đây, chúng ta đang sử dụng ng-init để đặt giá trị cho firstName và lastName. Sau đó, chúng ta hiển thị các giá trị này bằng cách sử dụng các biểu thức AngularJS (những dấu ngoặc kép).

Chỉ thị `ng-model`

Chỉ thị ng-model giống như một con đường hai chiều giữa HTML của bạn và dữ liệu ứng dụng. Nó có thể:

Kết nối một input, select, hoặc textarea với một thuộc tính trên phạm vi (scope)
Cung cấp��증 loại cho dữ liệu ứng dụng
Đặt các lớp CSS cho phần tử
Kết nối các phần tử HTML với��증 form

Ví dụ:

<div ng-app>
<input type="text" ng-model="name">
<p>Xin chào, {{ name }}!</p>
</div>

Trong ví dụ này, bất cứ thứ gì bạn gõ vào hộp input sẽ ngay lập tức xuất hiện sau "Xin chào," trong đoạn văn bên dưới. Đó như phép thuật, nhưng thực ra chỉ là sức mạnh của ng-model!

Chỉ thị `ng-repeat`

Chỉ thị ng-repeat giống như một máy photoocopier cho các phần tử HTML. Nó có thể lặp lại một bộ các phần tử HTML cho mỗi mục trong một mảng. Nó rất hữu ích cho việc tạo danh sách hoặc bảng động.

Ví dụ:

<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

Điều này sẽ tạo ra một danh sách các loại quả. Chỉ thị ng-repeat sẽ lặp lại phần tử <li> cho mỗi loại quả trong mảng của chúng ta.

Một ví dụ tổng quát

Bây giờ, hãy cùng kết hợp tất cả trong một ví dụ phức tạp hơn:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>Tracer Grade Student</h2>
<table border="1">
<tr>
<th>Tên</th>
<th>Điểm</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>Thêm học sinh mới</h3>
<form>
Tên: <input type="text" ng-model="newName"><br>
Điểm: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">Thêm học sinh</button>
</form>
</body>
</html>

Hãy phân tích điều này:

Chúng ta bắt đầu với ng-app trong thẻ <body> để khởi tạo ứng dụng AngularJS của chúng ta.
Chúng ta sử dụng ng-init để tạo một mảng học sinh ban đầu.
Chúng ta sử dụng ng-repeat để tạo các hàng trong bảng cho mỗi học sinh.
Chúng ta sử dụng ng-model để kết nối các trường input với các biến.
Chúng ta sử dụng ng-click (một chỉ thị mới!) để thêm một học sinh mới vào mảng khi nút được nhấp.

Ví dụ này minh họa cách các chỉ thị này làm việc cùng nhau để tạo ra một ứng dụng web động và tương tác. Bạn có thể thêm học sinh mới, và họ sẽ ngay lập tức xuất hiện trong bảng!

Kết luận

Chúc mừng! Bạn đã vừa迈出学习 AngularJS 指令的第一步。我们已经介绍了 ng-app, ng-init, ng-model, và ng-repeat 的基本知识。这些只是 AngularJS 提供的众多指令中的一小部分，但它们是一个很好的起点。

记住，学习编程就像学习一门新语言。它需要时间和练习，但很快，你就会流利地 "说" AngularJS！继续尝试这些指令，尝试以不同的方式组合它们，最重要的是，享受乐趣！

祝编程愉快，未来的 AngularJS 大师们！

Chỉ thị	Mục đích
ng-app	Khởi tạo một ứng dụng AngularJS
ng-init	Khởi tạo dữ liệu ứng dụng
ng-model	Kết nối các控件 HTML với dữ liệu ứng dụng
ng-repeat	Lặp lại các phần tử HTML cho mỗi mục trong một bộ
ng-click	Xác định hành vi tùy chỉnh khi một phần tử bị nhấp