HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Hướng dẫn AngularJS

❮ Trước Kế tiếp ❯

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-.

Chỉ ng-appthị khởi tạo một ứng dụng AngularJS.

Chỉ ng-initthị khởi tạo 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>

Chỉ ng-appthị cũng cho AngularJS biết rằng phần tử <div> là "chủ sở hữu" của ứng dụng AngularJS.

Ràng buộc dữ liệu

Biểu {{ firstName }}thức, trong ví dụ trên, là một biểu thức liên kết dữ liệu AngularJS.

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>

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-repeatthự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ị trong ứng dụng

Chỉ ng-appthị xác định phần tử gốc của một ứng dụng AngularJS.

Chỉ ng-appthị sẽ tự động khởi động (tự động khởi tạo) ứng dụng khi một trang web được tải.

Chỉ thị về nhiệt

Chỉ ng-initthị xác định các 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. Bạn sẽ sử dụng bộ điều khiển hoặc mô-đun thay thế.

Bạn sẽ tìm hiểu thêm về bộ điều khiển và mô-đun sau.

Chỉ thị mô hình hóa

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.

Chỉ ng-modelthị 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 một chỉ thị, bạn phải sử dụng tên trường hợp lạc đà w3TestDirective, như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 học
  • Nhận xét

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 học

<div class="w3-test-directive"></div>

Nhận xét

<!-- 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 restrictthuộc tí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ính
  • Ccho Lớp học
  • Mcho bình luận

Theo mặc định, giá trị là EA, nghĩa là cả tên phần tử và tên thuộc tính đều có thể gọi chỉ thị.


❮ Trước Kế tiếp ❯