AngularJS - Custom Directives
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ị tùy chỉnh. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ là hướng dẫn viên thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ tạo ra các chỉ thị tùy chỉnh của riêng mình như một chuyên gia!
Hiểu về các Chỉ thị Tùy chỉnh
什么是指令？
Trong thế giới kỳ diệu của AngularJS, một chỉ thị là như một pháp thuật đặc biệt mà chỉ định HTML của chúng ta phải hành động như thế nào. Đây là cách để mở rộng HTML với các thuộc tính và phần tử mới, mang lại cho nó sức mạnh超能力!
Hãy tưởng tượng bạn đang xây dựng một ngôi nhà (ứng dụng web của bạn). Các phần tử HTML tiêu chuẩn giống như các khối xây dựng cơ bản - gạch, cửa sổ, cửa. Nhưng nếu bạn muốn điều gì đó đặc biệt, như một cửa trapdoor bí mật hoặc một kệ sách quay? Đó là lúc các chỉ thị tùy chỉnh xuất hiện!
Tại sao sử dụng các Chỉ thị Tùy chỉnh?
- Tính tái sử dụng: Tạo một lần, sử dụng mọi nơi!
- Tính bao gói: Giữ các chức năng liên quan cùng nhau.
- Tính dễ đọc: Làm cho mã của bạn dễ hiểu hơn.
- Tính modulization: Chia ứng dụng của bạn thành các phần nhỏ hơn, dễ quản lý hơn.
Bây giờ, hãy cởi bỏ áo khoác và bắt đầu tạo chỉ thị tùy chỉnh đầu tiên của chúng ta!
Ví dụ: Tạo một Chỉ thị Tùy chỉnh Đơn giản
Bước 1: Thiết lập Ứng dụng AngularJS của Chúng ta
Trước hết, hãy tạo một ứng dụng AngularJS cơ bản. Đừng lo lắng, nó dễ hơn bạn nghĩ!
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First Custom Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<!-- Chúng ta sẽ thêm chỉ thị tùy chỉnh ở đây -->
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
// Chúng ta sẽ thêm logic của controller ở đây
});
</script>
</body>
</html>Điều này thiết lập một ứng dụng AngularJS cơ bản có tên 'myApp' với một controller có tên 'MyController'. Hãy tưởng tượng controller là não của ứng dụng chúng ta.
Bước 2: Tạo Chỉ thị Tùy chỉnh của Chúng Ta
Bây giờ, hãy thêm chỉ thị tùy chỉnh của chúng ta. Chúng ta sẽ tạo một chỉ thị chào mừng đơn giản.
app.directive('myGreeting', function() {
return {
restrict: 'E',
template: '<h1>Hello, {{name}}!</h1>',
scope: {
name: '@'
}
};
});Hãy phân tích điều này:
-
app.directive('myGreeting', function() { ... }): Điều này tạo ra một chỉ thị mới có tên 'myGreeting'. -
restrict: 'E': Điều này告诉 AngularJS rằng chỉ thị của chúng ta sẽ được sử dụng như một phần tử HTML mới. -
template: '<h1>Hello, {{name}}!</h1>': Đây là mẫu HTML cho chỉ thị của chúng ta. -
scope: { name: '@' }: Điều này tạo ra một phạm vi cách ly cho chỉ thị của chúng ta, với một thuộc tính 'name' mà chúng ta có thể truyền vào.
Bước 3: Sử dụng Chỉ thị Tùy chỉnh của Chúng Ta
Bây giờ, hãy sử dụng chỉ thị mới sáng bóng của chúng ta trong HTML:
<div ng-controller="MyController">
<my-greeting name="World"></my-greeting>
</div>Output
Khi bạn chạy mã này, bạn sẽ thấy:
Hello, World!Chúc mừng! Bạn vừa tạo ra và sử dụng chỉ thị tùy chỉnh đầu tiên của mình!
Tính năng C고级的 của Chỉ thị Tùy chỉnh
Bây giờ chúng ta đã có nền tảng cơ bản, hãy khám phá một số tính năng cao cấp hơn của các chỉ thị tùy chỉnh.
Chỉ thị với Controller
Chúng ta có thể thêm một controller vào chỉ thị để có hành vi phức tạp hơn:
app.directive('myAdvancedGreeting', function() {
return {
restrict: 'E',
template: '<h2>{{greeting}}, {{name}}!</h2>',
scope: {
name: '@'
},
controller: function($scope) {
var greetings = ['Hello', 'Hi', 'Hey', 'Howdy'];
$scope.greeting = greetings[Math.floor(Math.random() * greetings.length)];
}
};
});Chỉ thị này sẽ chọn ngẫu nhiên một lời chào mỗi khi nó được sử dụng:
<my-advanced-greeting name="AngularJS Learner"></my-advanced-greeting>Bạn có thể thấy:
Howdy, AngularJS Learner!Hoặc:
Hi, AngularJS Learner!Chỉ thị với Chức năng Link
Chức năng link là nơi bạn có thể manipulates DOM:
app.directive('myColorfulGreeting', function() {
return {
restrict: 'E',
template: '<h3>Hello, {{name}}!</h3>',
scope: {
name: '@'
},
link: function(scope, element, attrs) {
var colors = ['red', 'blue', 'green', 'purple', 'orange'];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
element.css('color', randomColor);
}
};
});Chỉ thị này sẽ hiển thị lời chào trong một màu ngẫu nhiên:
<my-colorful-greeting name="Colorful World"></my-colorful-greeting>Bảng Phương thức
Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã sử dụng trong các chỉ thị tùy chỉnh:
| Phương thức | Mô tả |
|---|---|
restrict |
Chỉ định cách chỉ thị có thể được sử dụng (E: Phần tử, A: Thuộc tính, C: Lớp, M: Ghi chú) |
template |
Định nghĩa mẫu HTML cho chỉ thị |
scope |
Tạo một phạm vi cách ly cho chỉ thị |
controller |
Định nghĩa một controller cho chỉ thị |
link |
Cho phép manipulates DOM và thêm hành vi cho chỉ thị |
Kết luận
Chúc mừng! Bạn vừa bước những bước đầu tiên vào thế giới kỳ diệu của các chỉ thị tùy chỉnh AngularJS. Chúng ta đã bao gồm các bước cơ bản để tạo một chỉ thị đơn giản và thậm chí đã lấn bước vào các khái niệm cao cấp hơn như controllers và các chức năng link.
Nhớ rằng, tạo ra các chỉ thị tùy chỉnh là như học một siêu năng lực - nó đòi hỏi sự thực hành, nhưng một khi bạn đã thành thạo, bạn sẽ có thể tạo ra các thành phần động và tái sử dụng cho các ứng dụng web của mình.
Tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Thế giới của AngularJS là rộng lớn và đầy thú vị, và bạn đã được trang bị để khám phá nó sâu hơn. Chúc mừng编码, các大师 AngularJS tương lai!
Credits: Image by storyset