Introduction
In my previous blog we had demonstrated how to create a simple AngularJS application, now in this blog we will demonstrate how data binding is happening in AngularJS.
Getting Started
Data-binding keeps the view and model in sync at all the time, it is the automatic synchronization of data between the model and view components in AngularJS. The view treats model as the single-source-of-truth in the application, the view reflects the change when the model changes and vice versa.
AngularJS support two types of data binding one way(expression) and two way(ng-model). for one way data binding AngularJS uses expression directive and for two way data binding it uses ng-model directive. let discus little about these.
- Expression Directive:
When view is bound with expression directive systems bind data in only one direction, its means if any changes happens in model doest not reflects in the view. In this binding the developer has to write code that constantly syncs the view with the model and the model with the view.
Syntax:{{modelname}} - ng-model Directive:
ng-model model is two way data binding in AngularJS Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view and vice versa, because application treats model as the single-source-of-truth for the application. This binding can be used in inpul, select and textarea.
Syntax:
<input TYPE="txt" ng-model="student.Class"/>
Example:-
This example demonstrates both data binding. It has taken two text boxes, the first text is bound using two way data binding and second text box is bound using one way data binding concept and a displays text of both text boxes in view.When you chenge text in first text box, you will see the view is reflection with first text box's text. But when you enter text in second text box, you will see the view is not reflection with this because the second text box is bound with one way data bound.
<HTML ng-app = "myapp">
<TITLE>AngularJS: Data Binding</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope){
$scope.message="Hellow Word: Two way binding";
$scope.message1="Hellow Word: One way binding";
});
</script>
<BODY ng-controller="myappcont">
<h1>Data Binding Example</h1>
<hr/><br/>
<b>Message:</b> <INPUT TYPE="txt" ng-model="message"/><br/><br/>
<b>Message Value:</b> {{message}} <br/><br/>
<b>Message1:</b> <INPUT TYPE="txt" value="{{message1}}"/> <br/><br/>
<b>Message1 Value:</b> {{message1}}
</BODY>
</HTML>
Summary
In this article we demonstrated how to use data binding in angularJS, Hope this article may be helpful to you. Happy coding and enjoy.........
Thanks