Data binding mechanism in AngularJS

25-07-2022
Toanngo92
0 Comments

Mục lục

Data binding concept in angularJS

Data Binding in angularJS literally means data binding between the view and the controller, which means that when the data at the controller layer is changed, the view layer data is also immediately changed. We understand this as a concept of mechanism.

Return to the following example:

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

When updating the data in the input, the data in the h2 tag, the content next to the word hello will be changed accordingly.

Source code analysis:

In the javascript layer, define a new property named name for the $scope variable (this variable is the communication variable between the controller layer and the views, which will be discussed in a later post) and assign the value with an empty string.
The text inside the h2 tag combines hello and angularJS expression {{name}} , here angularJS understands and adopts this expression to get the name attribute inside the $scope variable on the controller layer and display it to the user.
Input inside the html structure via ng-model attribute (AngularJS directives), which also represents the name attribute of the $scope variable
When updating data in the input, the data on the h1 tag is also automatically updated, this mechanism is called data-binding of angularJS.

For the case of expression {{name}} in the above situation, when the data is updated, the html is also recognized and updated in real time, called one way data binding. (It’s very convenient when programming, if using pure javascript, we will need to catch the user’s onkeyup event, query selector to the h1 tag, change the inner text => angularJS helps to improve more if compared in time coding time, reducing many details when programming that pure javascript or jquery cannot do).

Two-way data binding (two-way binding)

Going back to the first example, when we enter the input, the data in the h1 tag is updated accordingly. That means, when we update the content inside the input, the value of the name attribute in the $scope variable is also changed realtime, this is angularJS’s two way data binding mechanism. This mechanism exists in most basic HTML input tags, such as text input, textarea , select, …. via directives ng-model

The two way data binding mechanism helps the data inside the model to be updated in real time when there is a change in the logic layer (javascript) or the HTML layer when the user updates the content in the input.