Cơ chế Data binding trong AngularJS

20-04-2022
Toanngo92
0 Comments

Mục lục

Khái niệm data binding trong angularJS

Data Binding trong angularJS ý nghĩa nôm na là liên kết dữ liệu giữa view và controller, ý nghĩa là khi dữ liệu ở tầng controller được thay đổi, dữ liệu tầng view cũng được lập tức thay đổi theo. Chúng ta hiểu đây là một khái niệm về cơ chế.

Quay lại ví dụ sau:

<!DOCTYPE html>
<html lang="en" ng-app="exampleviewApp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example View AngularJS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-controller="mainController">  
    <h2>Hello {{name}}</h2>
    <input type="text" ng-model="name" />
</body>
<script>
    var exampleviewApp = angular.module('exampleviewApp', []);
    exampleviewApp.controller('mainController', function($scope) {
        $scope.name = '';
    });
</script>
</html>

Khi cập nhật dữ liệu ở input, dữ liệu trong thẻ h2, nội dung cạnh chữ hello sẽ được thay đổi theo.

Phân tích mã nguồn:

Trong tầng javascript, định nghĩa một thuộc tính mới là name cho biến $scope ( biến này là biến giao tiếp giữa tầng controller và views, sẽ được nhắc tới ở bài sau) và gán giá trị bằng chuỗi rỗng.
văn bản bên trong thẻ h2 kết hợp giữa hello và angularJS expression {{name}} , ở đây angularJS hiểu và thông qua expression này để lấy thuộc tính name bên trong biến $scope phía tầng controller và hiển thị cho người dùng.
Input bên trong cấu trúc html thông qua thuộc tính ng-model (AngularJS directives), cũng cùng biểu diễn thuộc tính name của biến $scope
Khi cập nhật dữ liệu ở input, dữ liệu trên thẻ h1 cũng được tự động cập nhật theo, cơ chế này gọi là data-binding của angularJS

Đối với trường hợp expression {{name}} trong tình huống trên, khi dữ liệu được cập nhật, html cũng nhận diện và cập nhật theo realtime, gọi là one way data binding (data binding một chiều). (Rất tiện lợi khi lập trình, nếu sử dụng javascript thuần, chúng ta sẽ cần bắt sự kiện onkeyup của người dùng, query selector đến thẻ h1, thay đổi innertext bên trong => angularJS giúp cải thiện nhiều hơn nếu so sánh về thời gian coding, giảm bớt nhiều công đoạn tiểu tiết khi lập trình mà javascript thuần hay jquery không làm được).

Two way data binding (binding hai chiều)

Xét lại ví dụ đầu bài, khi chúng ta nhập liệu vào input, dữ liệu ở thẻ h1 được cập nhật theo. Điều đó có nghĩa, khi chúng ta cập nhật nội dung bên trong input, giá trị của thuộc tính name trong biến $scope cũng được thay đổi realtime, đây là cơ chế two way data binding của angularJS. Cơ chế này tồn tại trong hầu hết các thẻ input cơ bản của HTML, như text input, textarea , select, …. thông qua directives ng-model

Cơ chế two way data binding giúp cho dữ liệu bên trong model được cập nhật realtime khi có thay đổi ở tầng logic (javascript) hoặc tầng HTML khi người dùng cập nhật nội dung trong input.

Bài tập

Bài 1: Viết ứng dụng hiển thị dữ liệu người dùng nhập vào trong textbox bằng cơ chế data-binding angularJS

Bài 2: Viết ứng dụng cơ bản bằng angularJS yêu cầu như sau:

có 3 input box để người dùng nhập điểm toán, lý hóa
Khi nhập liệu xong cả 3 input, hiển thị kết quả trung bình cộng của 3 điểm theo 2 cách:
- bấm nút calculate bắt sự kiện để tính toán
- hoặc dữ liệu tự động được in ra bằng biểu thức mà không cần bấm nút ( sử dụng dữ liệu trả ra cho hàm tính toán bằng biểu thức {{}} )