AngularJS – Tương tác với HTML DOM

Giới thiệu

AngularJS cung cấp một cách hiệu quả để tương tác với HTML DOM, cho phép bạn tạo các ứng dụng web động và tương tác. Bằng cách sử dụng các directive và biểu thức, bạn có thể liên kết dữ liệu từ JavaScript với các phần tử HTML, tạo ra các ứng dụng một cách trực quan và dễ bảo trì.

Các cách tương tác với HTML DOM trong AngularJS

1. Directives:

• ng-model: Liên kết một biến trong scope với một element HTML, tạo ra two-way data binding.HTML<input type="text" ng-model="username">
• ng-bind: Hiển thị giá trị của một biểu thức trong một element HTML.HTML<p>Xin chào, {{name}}!</p>
• ng-click: Thực thi một hàm trong controller khi một element được click.HTML<button ng-click="clickMe()">Click me!</button>
• ng-show/ng-hide: Hiển thị hoặc ẩn một element dựa trên một điều kiện.HTML<div ng-show="showElement">Element này sẽ được hiển thị khi showElement là true</div>
• ng-if: Tạo hoặc xóa một element dựa trên một điều kiện.HTML<div ng-if="showElement">Element này sẽ được tạo khi showElement là true</div>
• ng-repeat: Lặp qua một mảng và tạo ra một element cho mỗi phần tử.HTML<li ng-repeat="item in items">{{ item }}</li>

2. Biểu thức:

• {{ expression }}: Đánh giá một biểu thức và hiển thị kết quả trong HTML.HTML<p>Tổng: {{ a + b }}</p>

3. $document:

• Truy cập và thao tác trực tiếp với DOM bằng đối tượng $document.JavaScriptangular.module('myApp', []) .controller('MyController', function($scope, $document) { $scope.changeBackgroundColor = function() { angular.element($document[0].body).css('background-color', 'red'); }; });

Ví dụ: Tạo một form đơn giản

HTML

<div ng-app="myApp" ng-controller="MyController">
  <form>
    <label>Tên:</label>
    <input type="text" ng-model="name">
    <br>
    <label>Email:</label>
    <input type="email" ng-model="email">
    <br>
    <button ng-click="submitForm()">Submit</button>
  </form>
  <p>Tên: {{ name }}</p>
  <p>Email: {{ email }}</p>
</div>

JavaScript

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.submitForm = function() {
      // Xử lý khi người dùng nhấn nút submit
      console.log('Tên:', $scope.name);
      console.log('Email:', $scope.email);
    };
  });

Lưu ý

• Two-way data binding: AngularJS tự động đồng bộ hóa dữ liệu giữa Model và View.
• Dependency injection: AngularJS cung cấp các service như $document, $http để tương tác với DOM và thực hiện các yêu cầu HTTP.
• Directives: Là các custom element hoặc attribute được định nghĩa để mở rộng HTML.
• Expressions: Là các đoạn mã JavaScript được đánh giá trong View.

Ưu điểm của cách tiếp cận này

• Dễ học và sử dụng: Cú pháp đơn giản, dễ hiểu.
• Tái sử dụng: Các directive và controller có thể được tái sử dụng trong nhiều phần của ứng dụng.
• Hiệu suất cao: AngularJS tối ưu hóa việc cập nhật DOM.
• Khả năng mở rộng: Bạn có thể tạo các custom directive và filter để đáp ứng các yêu cầu cụ thể.

Tóm lại, AngularJS cung cấp một cách mạnh mẽ và linh hoạt để tương tác với HTML DOM, giúp bạn xây dựng các ứng dụng web động và tương tác một cách dễ dàng.

Bạn muốn tìm hiểu sâu hơn về một khái niệm cụ thể nào đó không?