Holla Tech - Learn
AngularJS: Data Binding

One of the main concepts of AngularJS is data binding.
Let’s look at the following AngularJS app to understand how data binding works:

<!DOCTYPE HTML>
<html ng-app>
<head>
  <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js”></script>
</head>
<body>
  <label>Name:</label>
  <input type=“text” ng-model=“name” placeholder=“Enter a name”>
  <hr />
  <h2>Hello {{name}} !</h2>
</body>
</html>

 

The code above creates a textbox. As soon as you start typing in the textbox, the input is automatically shown in the <h2> element.

ng-model is a directive, which binds the HTML element to a property. In the code above, we bind the input to a property named name. Then we use the property in the expression: {{ name }}.

Data binding allows automatic synchronization of data between the model and the view.

The view is basically the DOM that the user sees.
The model is the data shown to the user in the view and with which the user interacts.

NOTE!
Data binding makes the view a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE AngularJS MAIN COURSE PAGE. 

AngularJS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT