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
• 10,760 points
39 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
• 21,680 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
• 10,760 points
207 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 75 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
• 21,680 points

edited Jan 21 by Niroj 53 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
• 21,680 points
61 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
• 21,680 points
45 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
• 21,680 points
106 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
• 21,680 points
57 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
• 21,680 points

edited Jan 21 by Niroj 67 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
• 21,680 points

edited Jan 21 by Niroj 49 views