Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - HTML DOM

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của AngularJS và cách nó tương tác với HTML DOM (Document Object Model). Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được dẫn dắt các bạn trong hành trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Hãy lấy một cốc cà phê (hoặc trà, nếu bạn thích), và cùng bắt đầu nhé!

AngularJS - HTML DOM

Giới thiệu về AngularJS và HTML DOM

Trước khi chúng ta đi vào chi tiết, hãy nhanh chóng hiểu qua AngularJS và HTML DOM là gì.

AngularJS là một khung công tác JavaScript mạnh mẽ giúp mở rộng HTML với các thuộc tính mới, làm cho việc tạo các ứng dụng web động trở nên dễ dàng hơn. Nó giống như cho HTML của bạn những siêu năng lực!

Còn HTML DOM, ngược lại, là một giao diện lập trình cho các tài liệu HTML. Nó đại diện cho cấu trúc của một tài liệu dưới dạng một cây phân cấp tương tự như cây, cho phép bạn truy cập và điều chỉnh nội dung, cấu trúc và phong cách của một trang web.

Bây giờ, hãy cùng khám phá cách AngularJS nâng cao khả năng làm việc của chúng ta với HTML DOM thông qua các chỉ thị.

Chỉ thị ng-disabled

Chỉ thị ng-disabled giống như một đèn giao thông cho các phần tử HTML của bạn. Nó có thể启用 hoặc vô hiệu hóa một phần tử dựa trên một điều kiện. Hãy cùng xem một ví dụ:

<input type="checkbox" ng-model="myCheckbox">
<button ng-disabled="!myCheckbox">Nhấn tôi!</button>

Trong ví dụ này, nút sẽ bị vô hiệu hóa cho đến khi hộp kiểm được đánh dấu. Nó giống như nói với nút, "Bạn không thể chơi cho đến khi bạn bạn hộp kiểm nói rằng đó là okay!"

Khi hộp kiểm không được đánh dấu, myCheckbox là false, vì vậy !myCheckbox là true, vô hiệu hóa nút. Khi được đánh dấu, nó ngược lại,启用 nút.

Chỉ thị ng-show

Chỉ thị ng-show giống như một chiếc áo choàng của phù thủy - nó có thể làm các phần tử xuất hiện hoặc biến mất dựa trên một điều kiện. Dưới đây là cách nó hoạt động:

<p ng-show="showSecret">Mã bí mật là 42!</p>
<button ng-click="showSecret = !showSecret">
  {{showSecret ? 'Ẩn' : 'Hiển thị'}} Bí mật
</button>

Trong ví dụ này, đoạn văn với mã bí mật chỉ hiển thị khi showSecret là true. Nút sẽ thay đổi giá trị này. Nó giống như chơi peek-a-boo với các phần tử trang web của bạn!

Chỉ thị ng-hide

Chỉ thị ng-hide là anh em ác của ng-show. Trong khi ng-show hiển thị các phần tử khi một điều kiện là true, ng-hide ẩn chúng. Hãy cùng xem nó trong hành động:

<div ng-hide="loading">
  <h2>Chào mừng đến với trang web của tôi!</h2>
  <p>Nội dung này sẽ tải khi sẵn sàng.</p>
</div>
<p ng-show="loading">Đang tải... Vui lòng chờ đợi.</p>

Ở đây, chúng ta đang ẩn nội dung chính trong khi trang đang tải, và hiển thị một thông báo tải thay vào đó. Khi loading trở thành false, nó giống như kéo lại màn để tiết lộ trang web của bạn!

Chỉ thị ng-click

Chỉ thị ng-click giống như thêm một nút vào remote điều khiển TV của bạn - nó cho phép bạn định nghĩa điều gì sẽ xảy ra khi một phần tử bị nhấp. Dưới đây là một ví dụ đơn giản:

<button ng-click="count = count + 1" ng-init="count=0">
  Nhấp: {{count}}
</button>

Điều này tạo ra một nút đếm số lần nó bị nhấp. Mỗi lần nhấp sẽ tăng biến count, được hiển thị trong văn bản của nút. Nó giống như có một bộ đếm nhấp cá nhân!

Ví dụ: Kết hợp tất cả

Bây giờ, hãy kết hợp các chỉ thị này vào một ví dụ phức tạp hơn. Hãy tưởng tượng chúng ta đang tạo một quản lý công việc đơn giản:

<div ng-app="taskManager" ng-controller="taskCtrl">
  <h2>Quản lý công việc của tôi</h2>

  <input type="text" ng-model="newTask" placeholder="Nhập một công việc mới">
  <button ng-click="addTask()" ng-disabled="!newTask">Thêm công việc</button>

  <ul>
    <li ng-repeat="task in tasks">
      {{task}}
      <button ng-click="removeTask($index)">Xong</button>
    </li>
  </ul>

  <p ng-show="tasks.length == 0">Chưa có công việc nào. Thêm một số công việc ở trên!</p>

  <button ng-click="clearAll()" ng-hide="tasks.length == 0">Xóa tất cả công việc</button>
</div>

<script>
var app = angular.module('taskManager', []);
app.controller('taskCtrl', function($scope) {
  $scope.tasks = [];

  $scope.addTask = function() {
    if ($scope.newTask) {
      $scope.tasks.push($scope.newTask);
      $scope.newTask = '';
    }
  };

  $scope.removeTask = function(index) {
    $scope.tasks.splice(index, 1);
  };

  $scope.clearAll = function() {
    $scope.tasks = [];
  };
});
</script>

Hãy phân tích này:

  1. Chúng ta sử dụng ng-disabled để ngăn không cho thêm công việc trống.
  2. ng-click được sử dụng để thêm công việc, xóa từng công việc và xóa tất cả công việc.
  3. ng-show hiển thị một thông báo khi không có công việc.
  4. ng-hide ẩn nút "Xóa tất cả" khi không có công việc.
  5. Chúng ta cũng giới thiệu ng-repeat, tạo một phần tử danh sách cho mỗi công việc trong mảng của chúng ta.

Kết quả

Khi bạn chạy đoạn mã này, bạn sẽ thấy một quản lý công việc đơn giản nhưng chức năng. Bạn có thể thêm công việc, đánh dấu chúng là hoàn thành ( Điều này sẽ xóa chúng), và xóa tất cả công việc. Giao diện sẽ cập nhật động dựa trên các hành động của bạn, nổi bật sức mạnh của các chỉ thị AngularJS.

Kết luận

Và thế là xong, các bạn! Chúng ta đã khám phá một số chỉ thị AngularJS phổ biến nhất để manipulatie HTML DOM. Các công cụ này cho phép bạn tạo các ứng dụng web động, phản hồi dễ dàng. Hãy nhớ, thực hành làm cho hoàn hảo, vì vậy đừng ngần ngại thử nghiệm các chỉ thị này trong các dự án của riêng bạn.

Dưới đây là bảng tham khảo nhanh các chỉ thị chúng ta đã xem xét:

Chỉ thị Mục đích
ng-disabled Vô hiệu hóa một phần tử dựa trên một điều kiện
ng-show Hiển thị một phần tử khi một điều kiện là true
ng-hide Ẩn một phần tử khi một điều kiện là true
ng-click Định nghĩa hành vi khi một phần tử bị nhấp

Tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Thế giới phát triển web là rộng lớn và thú vị, và bạn mới chỉ bắt đầu. Đến gặp lại lần sau, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Bảng
Hướng Dẫn Tiếp Theo:
AngularJS - Mô-đun