AngularJS cho phép bạn mở rộng HTML với các thuộc tính mới được gọi là Directives .
AngularJS có một tập hợp các chỉ thị tích hợp cung cấp chức năng cho các ứng dụng của bạn.
AngularJS cũng cho phép bạn xác định các chỉ thị của riêng mình.
Hướng dẫn AngularJS
Các chỉ thị AngularJS là các thuộc tính HTML mở rộng với tiền tố ng-.
Các ng-appchỉ thị khởi tạo một ứng dụng AngularJS.
Các ng-initchỉ thị khởi dữ liệu ứng dụng.
Lệnh ng-modelliên kết giá trị của các điều khiển HTML (đầu vào, lựa chọn, vùng văn bản) với dữ liệu ứng dụng.
Đọc về tất cả các chỉ thị AngularJS trong tài liệu tham khảo chỉ thị AngularJS của chúng tôi .
Thí dụ
<div ng-app=”” ng-init=”firstName=’John'”>
<p>Name: <input type=”text” ng-model=”firstName”></p>
<p>You wrote: {{ firstName }}</p>
</div>Hãy tự mình thử »
Các ng-appchỉ thị cũng nói AngularJS rằng <div> yếu tố là “chủ sở hữu” của ứng dụng AngularJS.
Ràng buộc dữ liệu
Các {{ firstName }}biểu hiện, trong ví dụ trên, là một AngularJS dữ liệu ràng buộc biểu.
Liên kết dữ liệu trong AngularJS liên kết các biểu thức AngularJS với dữ liệu AngularJS.
{{ firstName }}được ràng buộc với ng-model="firstName".
Trong ví dụ tiếp theo, hai trường văn bản được liên kết với nhau bằng hai lệnh ng-model:
Thí dụ
<div ng-app=”” ng-init=”quantity=1;price=5″>
Quantity: <input type=”number” ng-model=”quantity”>
Costs: <input type=”number” ng-model=”price”>
Total in dollar: {{ quantity * price }}
</div>Hãy tự mình thử »
Sử dụng ng-initkhông phải là rất phổ biến. Bạn sẽ học cách khởi tạo dữ liệu trong chương về bộ điều khiển.
Các phần tử HTML lặp lại
Lệnh ng-repeatlặp lại một phần tử HTML:
Thí dụ
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Lệnh ng-repeatnày thực sự sao chép các phần tử HTML một lần cho mỗi mục trong một bộ sưu tập.
Lệnh ng-repeatđược sử dụng trên một mảng đối tượng:
Thí dụ
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"><ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul></div>
AngularJS hoàn hảo cho các ứng dụng CRUD (Create Read Update Delete) cơ sở dữ liệu.
Chỉ cần tưởng tượng nếu các đối tượng này là bản ghi từ cơ sở dữ liệu.
Chỉ thị ng-app
Các ng-appchỉ thị xác định các phần tử gốc của một ứng dụng AngularJS.
Các ng-appý chỉ tự động khởi động (tự động khởi tạo) áp dụng khi một trang web được tải.
Chỉ thị ng-init
Các ng-initchỉ thị xác định giá trị ban đầu cho một ứng dụng AngularJS.
Thông thường, bạn sẽ không sử dụng ng-init. Thay vào đó, bạn sẽ sử dụng bộ điều khiển hoặc mô-đun.
Bạn sẽ tìm hiểu thêm về bộ điều khiển và mô-đun sau.
Chỉ thị ng-model
Lệnh ng-modelliên kết giá trị của các điều khiển HTML (đầu vào, lựa chọn, vùng văn bản) với dữ liệu ứng dụng.
Các ng-modelchỉ thị cũng có thể:
- Cung cấp xác thực kiểu cho dữ liệu ứng dụng (số, email, bắt buộc).
- Cung cấp trạng thái cho dữ liệu ứng dụng (không hợp lệ, bẩn, chạm, lỗi).
- Cung cấp các lớp CSS cho các phần tử HTML.
- Liên kết các phần tử HTML với các biểu mẫu HTML.
Đọc thêm về ng-modelchỉ thị trong chương tiếp theo.
Tạo Chỉ thị Mới
Ngoài tất cả các chỉ thị AngularJS được tích hợp sẵn, bạn có thể tạo các chỉ thị của riêng mình.
Các chỉ thị mới được tạo bằng cách sử dụng .directivehàm.
Để gọi chỉ thị mới, hãy tạo một phần tử HTML có cùng tên thẻ với chỉ thị mới.
Khi đặt tên cho một chỉ thị, bạn phải sử dụng một tên trường hợp lạc đà, w3TestDirectivenhưng khi gọi nó, bạn phải sử dụng -tên riêng biệt, w3-test-directive:
Thí dụ
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Bạn có thể gọi một chỉ thị bằng cách sử dụng:
- Tên phần tử
- Thuộc tính
- Lớp
- Bình luận
Tất cả các ví dụ dưới đây sẽ tạo ra cùng một kết quả:
Tên phần tử
<w3-test-directive></w3-test-directive>
Thuộc tính
<div w3-test-directive></div>
Lớp
<div class="w3-test-directive"></div>
Bình luận
<!-- directive: w3-test-directive -->
Những hạn chế
Bạn có thể hạn chế các chỉ thị của mình chỉ được gọi bằng một số phương thức.
Thí dụ
Bằng cách thêm một thuộc restricttính với giá trị "A", chỉ thị chỉ có thể được gọi bởi các thuộc tính:
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Các giá trị hạn chế pháp lý là:
Echo tên phần tửAcho Thuộc tínhCcho Lớp họcMcho Bình luận
Theo mặc định, giá trị là EA, có nghĩa là cả tên phần tử và tên thuộc tính đều có thể gọi chỉ thị.