What is data binding in AngularJS?

0 votes
Want to know about what is the use of data binding in Angularjs??
Jan 23 in Web Development by kartik
• 4,380 points
33 views

1 answer to this question.

0 votes

Data binding is synchronization of data between the model and view components. 

In Angular, model treat as source of application and view is the projection of angular model.

There are two type of data binding in Angularjs they are:

                1. One-Way data binding

                2. Two-Way data binding.

In One-way data binding view ( i.e UI part) not updates automatically when data model changed and we need to write custom code to make it updated every time and it is not a synchronization processes.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Two Binding Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('angulartwobindapp', []);

app.controller('angulartwobindingCtrl', function ($scope) {

$scope.name = 'Welcome to Edureka.com';

});

</script>

</head>

<body ng-app="angulartwobindapp">

<div ng-controller="angulartwobindingCtrl">

<p>

Message:   {{ name }}

</p>

</div>

</body>

</html>

 In Two-way data binding, view (UI part) updates automatically when data model changed. It is a synchronization processes.

<!DOCTYPE html>

<html xmlns="http://www.edureka.co/">

<head>

<title>

AngularJs Two Binding Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('angulartwobindapp', []);

app.controller('angulartwobindingCtrl', function ($scope) {

$scope.name = 'Welcome to Tutlane.com';

});

</script>

</head>

<body ng-app="angulartwobindapp">

<div ng-controller="angulartwobindingCtrl">

Enter Name : <input type="text" ng-model="name" style="width:250px" />

<p>

Entered Name:   {{ name }}

</p>

</div>

</body>

</html>

answered Jan 23 by Niroj
• 8,220 points

Related Questions In Web Development

0 votes
1 answer

What does cors means in Angularjs and what the use of it?

CORS is Cross Origin Resource Sharing which means you ...READ MORE

answered Jan 29 in Web Development by kartik
• 4,380 points
69 views
0 votes
1 answer

What is the difference between span and div?

The div should be used to wrap sections of ...READ MORE

answered Jan 16 in Web Development by Niraj

edited Jan 21 by Niroj 47 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20 in Web Development by Niroj
• 8,220 points

edited Jan 21 by Niroj 41 views
+1 vote
1 answer

What are the different ways of using angularjs scope?

Hey!! basically there the three ways of using ...READ MORE

answered Jan 21 in Web Development by Niroj
• 8,220 points
31 views
0 votes
1 answer

How can we avoid my php form from hacking?

Hii @kartik, If you want to know php ...READ MORE

answered Feb 13 in PHP by Niroj
• 8,220 points
40 views
0 votes
1 answer

How can you display the error messages?

Hey, In the HTML form, we add ...READ MORE

answered Feb 13 in PHP by Niroj
• 8,220 points
33 views
0 votes
1 answer

What is a Cookie? How to create Cookies With PHP?

A cookie is often used to identify ...READ MORE

answered Feb 13 in PHP by Niroj
• 8,220 points
53 views
0 votes
1 answer

Complete PHP form with proper validation and syntax

Hey @kartik, It's quite simple to have php ...READ MORE

answered Feb 19 in PHP by Niroj
• 8,220 points
31 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20 in Web Development by Niroj
• 8,220 points

edited Jan 21 by Niroj 49 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20 in Web Development by Niroj
• 8,220 points

edited Jan 21 by Niroj 33 views