What is data binding in AngularJS

0 votes
Want to know about what is the use of data binding in Angularjs??
Jan 23, 2020 in Web Development by kartik
• 37,520 points
1,074 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, 2020 by Niroj
• 82,880 points

This article will help to know about data binding in angularjs. https://www.tutlane.com/tutorial/angularjs/angularjs-data-bindings-one-way-two-way-with-examples

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, 2020 in Web Development by kartik
• 37,520 points
4,259 views
0 votes
1 answer

What is "XX" in CXX in a cmake CMakeLists.txt file ?

Due to the macro identifiers limitations which ...READ MORE

answered Feb 8, 2022 in Web Development by Rahul
• 9,680 points
1,247 views
0 votes
1 answer

What is Webpack in react?

Webpack is a popular open-source JavaScript module ...READ MORE

answered Dec 22, 2023 in Web Development by Rahul
624 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, 2020 in PHP by Niroj
• 82,880 points
2,567 views
0 votes
1 answer

How can you display the error messages?

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

answered Feb 13, 2020 in PHP by Niroj
• 82,880 points
3,438 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, 2020 in PHP by Niroj
• 82,880 points
3,763 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, 2020 in PHP by Niroj
• 82,880 points
1,514 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, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 1,099 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, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 881 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP