Post
Ask Question

Introduction To AngularJS - Day 3

In the 3rd day of AngularJS article series, we are going to learn the next conceptsof AngularJS, understanding the process of data binding in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2

Data Binding

It is a process that creates a link between the user interfaces (UI) and business logic (controller in AngularJS). AngularJS provides the automatic synchronization of data between the model and the view. It means changes in model is reflected to the UI or View and vice-versa.

Data binding is nothing but bridge between the Source and Target, see the following image,

binding

The binding contains the four elements as follows:

  1. Source object.
  2. Value of binding source to be used.
  3. Target object.
  4. Target Property (Source value is bind to target property).

For example, Object is Car and Property of Car is CarName for binding the elements. There are the following two ways of binding in AngularJS,

  1. One-way binding.
  2. Two-way binding.

binding object
One-way data binding

The changes in source property automatically updates to the target property but changes in target property is not reflected to the source property. This is called the one-way binding.

Two-way data binding

The changes in source property automatically updates to target property and if target property changes it automatically updates to source property. This is called the two-way binding.

Data binding in AngularJS has various functions using that functions data binding is done. These functions are linked with the $scope. A $scope is nothing but the execution context for an expression we write in HTML. $scope is nothing but the glue between the controller and the view, we will discuss $scope in next days. AngularJS provides the automatic synchronization of data between the model and view.

The following are the examples of One-way and Two-way data binding:

1. One-way data binding

The following code is an example of one-way data binding in AngularJS.

Code

  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <title>Data Binding in AngularJS Demo</title>  
  5.     <script src="Scripts/angular.min.js"></script>  
  6. </head>  
  7. <body ng-controller="bindController">  
  8.     <h1>Welcome to C# Corner!</h1>  
  9.     <h2>Author Name : {{ authorName }}</h2>      
  10.     <h2>Article Name : {{ articleName }}</h2>  
  11.     <script type="text/javascript">  
  12.         //Creating Module  
  13.         var app = angular.module("myApp", []);  
  14.   
  15.         //Creating Controller using object of module 'app'  
  16.         app.controller("bindController", function ($scope) {  
  17.             $scope.authorName = 'Jeetendra Gund';  
  18.             $scope.articleName = 'Introduction to AngularJS - Day 3';  
  19.         });  
  20.     </script>  
  21. </body>  
  22. </html>  
I am using same example used in previous articles, here I directly explained the code if you don’t know how to create module, controller of AngularJS please read my previous articles. I shared the link before starting the article.

In the above code I created module ‘myApp’ and one controller ‘bindController’. In that controller I created two properties: ‘authorName’ and ‘articleName’ using the ‘$scope’. These two properties are my source property and I am going to bind this property in view that means target property using the AngularJS {{expression}} and display in the HTML template <h2></h2> header tag. When we run the above example, we will show output like the following,

run

Great, we successfully implemented one-way data binding in AngularJS using $scope.

2. Two-way data binding

The following code is an example of two-way data binding in AngularJS.

Code
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <title>Data Binding in AngularJS Demo</title>  
  5.     <script src="Scripts/angular.min.js"></script>  
  6. </head>  
  7. <body ng-controller="bindController">  
  8.     <h1>Welcome to C# Corner!</h1>  
  9.     <h3>Enter Author Name : <input type="text" ng-model="firstName" /></h3>      
  10.     <h3>Enter Article Name : <input type="text" ng-model="lastName" /></h3>  
  11.     <hr />  
  12.     <h2>First Name : {{ firstName }}</h2>  
  13.     <h2>Last Name : {{ lastName }}</h2>  
  14.     <script type="text/javascript">  
  15.         //Creating Module  
  16.         var app = angular.module("myApp", []);  
  17.   
  18.         //Creating Controller using object of module 'app'  
  19.         app.controller("bindController", function ($scope) {  
  20.             $scope.firstName = 'Sameer';  
  21.             $scope.lastName = 'Rajigare';  
  22.         });  
  23.     </script>  
  24. </body>  
  25. </html>  
In the above code I created module ‘myApp’ and one controller ‘bindController’. In that controller I created two properties: ‘firstName’ and ‘lastName’ using the ‘$scope’. These two properties are my source property and I am going to bind this property in view means target property using the AngularJS {{expression}} and display in the HTML template <h2></h2> header tag.

We just added two textbox for entering the text or accepting input from user. We added one AngularJS directive to bind data to properties means ‘ng-model’ directive in <input/> tag of HTML.
  1. <h3>Enter First Name : <input type="text" ng-model="firstName" />
  2. </h3> <h3>Enter Last Name : <input type="text" ng-model="lastName" /></h3>  
The above two textboxes we added with ‘ng-model’ directive. When we run our code it will show output like the following,

ng-model

In the above output textbox shows default values we set for property ‘firstName’ and ‘lastName’ in ‘bindController’. Here one-way data binding works, now time to check changes in target property reflected to source property or not means two-way data binding. Now move the cursor to first textbox of ‘Enter First Name’ and press ‘Backspace’ it shows how AngularJS provides awesome features of two-way data binding. It automatically synchronized with source property and changes displayed in label we declare above ‘First Name’.

First Name

After we cleared ‘Enter First Name’ textbox value it will display output as follows:

Enter First Name
Lastly we cleared both the textbox value and entered new values, see the output like the following,

output

Great, your AngularJS data binding example created successfully!

Summary

I hope that beginners as well as students understand the concept of Data Binding in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!

 


Similar Articles