One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs application synchronisation, that means it maintains the sync between the model and view.
AngularJs Data Binding :
Data binding is used to bind the data between the ui (html elements) and AngularJs controller variables.
AngularJs application maintains the Data models to represents the data. Typically these Data Models are consisting with data.
Example of AngularJs Data Modal:
var app = angular.module('dataController', []);
app.controller('dataController', function($scope) {
$scope.firstname = "Chandra Shekhar";
$scope.lastname = "Goka";
});
The above example represents a typical data model in AngularJs. This data would be bind with the corresponding html elements. So that when ever any changes made on any data member from controller, it will automatically effected on the view.
Here the communication is happening between the controller and view because of $scope object. $scope is acts as a mediator between the controller and view.
AngularJs supports two types of Data Binding :
Types of Data binding :
- One-way Binding
- Two-way Binding
One-way Binding :
In one-way binding the Data will be updated from the controller. When ever the values changed in Angular controller the corresponding html elements (input, select, textarea) will be updated accordingly. Here is no need of getter and setters like legacy Javascript and JQuery stuff.
Here the binding, data will taking from the controller variables and updated on html elements.
This will happen by making use of either AngularJs Expressions {{}} or ng-bind AngularJs directive.
Binding with Expressions :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="expCtrl">
<p>First name: <b>{{firstname}}</b>
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('expCtrl', function ($scope) {
$scope.firstname = "Chandra";
});
</script>
<p>Here the binding happening from controller.</p>
</body>
</html>
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/AngularJs_Binding_Expression.html”]
Binding with ng-bind :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="bindCtrl">
<p>First name: <b ng-bind="firstname"></b></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('bindCtrl', function($scope) {
$scope.firstname = "Chandra";
});
</script>
<p>Here the binding happening from controller.</p>
</body>
</html>
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/AngularJs_Binding-ng-bind.html”]
Two-way Binding :
In Two-way binding the html elements and controller variables are sync in each other.
When ever you change the values from html it will reflect to the corresponding variables in controller and vice-versa.
It can be implement by using ng-model directive.
Data Binding with ng-model :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p></p>
<p>Enter Your Name:
<input type="text" ng-model="firstName">
</p>
<p>Hello : <b>{{ firstName}}</b> How Are you ?</p>
</div>
</body>
</html>
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/AngularJs_Binding-ng-model.html”]
Happy Learning 🙂
