Before getting into data binding we need to understand certain terms or concepts which will even help people who are not adept in technology to understand this content here. So let’s start with Model–View–Controller (MVC).
Model – Model is the backend that manages the data from a database, API, or JSON object. For example, a photo of us is saved somewhere on a server of any social media platform like Facebook, WhatsApp, etc.
VIew – View is the frontend that shows what the user will see on their screen, and how. For example, the way in which our photo is displayed in the social media platform when the user is logged in.
Controller – Controller intermediates between the view and the model. For example, listening to a click event like clicking a delete button which results in the deletion of our photo.
So now what is “Data Binding”?
Data binding is controlling web page elements such as headings, texts, images, etc. It connects the UI and application data of an application. Whenever some changes are done at the model side it is reflected at the view side too and vice versa is also possible. This happens so quickly to make sure that the view and the model part will get updated all the time.
How does Data Binding work in AngularJS?
We can link the model part and view part by adding a few snippets of code in AngularJS. That is by using a concept called Directives. By using this we can bind the value of an input field ( a web component ) or a heading to an HTML element. One of the directives by which this can be achieved is ng-bind.
Example:
<div ng-app=”demoApp” ng-controller=”myCtrl”>
<h3 ng-bind=”heading”></h3>
</div>
<script>
var app = angular.module(demoApp, []);
app.controller(‘myCtrl’, function($scope) {
$scope.heading = “Data binding explained!!”;
});
</script>
Output –
Data binding explained!!
Thus we are able to bind the data which is a text “Data binding explained!!” (model part) to an H3 tag (view part). We can also achieve this by using {{}} without using directives like ng-bind as well.
Types of Data Binding in AngularJS
1. One-way data binding:- One-way-data binding as in the name is the binding of data in one direction that is from model to view. We cannot bind in the opposite direction that is from view to the model.
A simple example of one way data binding is shown below:-
<div ng-app=”demoApp” ng-controller=”myCtrl”>
<h3 ng-bind=”headingOne”></h3>
<h3>{{headingTwo}}</h3>
</div>
<script>
var app = angular.module(demoApp, []);
app.controller(‘myCtrl’, function($scope) {
$scope.headingOne = “One way data binding sample one”;
$scope.headingTwo = “One way data binding sample two”;
});
</script>
Output:-
One way data binding sample one
One way data binding sample two
2. Two Way Data Binding in AngularJS
Two way data binding is the binding of data in both ways that is from both model to view and view to model. In angularJS we can achieve this by using ng-model directive.
Example-
<div ng-app=”demoApp” ng-controller=”myCtrl”>
<input ng-model=”heading”>
<h3>{{heading}}</h3>
</div>
<script>
var app = angular.module(demoApp, []);
app.controller(‘myCtrl’, function($scope) {
$scope.heading = “Two way data binding”;
});
</script>
Output:
If we started editing the input field( view) it will reflect in the model as shown below:
Let’s deep dive into directives like ng-bind, ng-model
Have you ever wondered what happens when we use ng-bind in an html element like p tag?
<div ng-app=”” ng-init=”mySampleText=’Hello World!'”>
<p ng-bind=”mySampleText”></p>
</div>
It binds the innerHTML of the <p> element to the variable mySampleText. The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression that is mySampleText. If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.
As mentioned earlier we can also use {{}}, instead of ng-bind to achieve this.
<div ng-app=”” ng-init=”mySampleText=’Hello World!'”>
<p>{{mySampleText}}</p>
</div>
But in this we might see the actual {{mySampleText}} for a second before the data in mySampleText variable is loaded. So it is always preferable to use the ng-bind directive.
Hope this blog helped you to understand the concept, overall syntax & working of data binding. We saw how the directives of angular framework dominated the html elements efficiently. Thanks to the concept of data binding which made users to interact with a real time application or web page in a more lively manner.
