Angular From Basic To Expert - Day Four

In this article, we will learn, Scope in AngularJS and Data binding in AngularJS. AngularJS provides One way data binding and Two way data binding.

Introduction

 
In the previous articles of AngularJS from basic to expert Day One, Day Two and Day Three, we have learned what AngularJS is, and we have seen some basics of AngularJS and directives in Angular and seen the main concepts in Angular.js such as - module, model, and controller and used them in our AngularJS demo application.
 
You can check those articles here.
In this article, we will learn,
  • Scope in AngularJS and
  • Data binding in AngularJS
So, I will explore them one by one and also will continue with our AngularJS demo application which we have used in the previous articles.
 

Scope in AngularJS

 
Scope is an object injected into the application but it is more than an object, which represents the data and methods. Scope is the main thing or key to bind an application's data and connect the Model to the View. Scope handles the binding part between HTML View and JavaScript (AngularJS Controller).
 
AngularJS  
 
An AngularJS application consists of:
  • Model (which contains application data for the View)
  • View (our HTML page)
  • Controller (JavaScript functions)
So, Scope is a JavaScript object which is available in both  View and Controller.
 

Data Binding in AngularJS

 
Data binding is data synchronization between View and data model. We have seen in the previous article that AngularJS applications have data model which is a collection of data for the application view and a View is our HTML which displays the data.
 
 
Data binding is the concept or way of data traveling in the AngularJS applications. In AngularJS, the data binding defines how the data will be passed from viewing our HTML page to its business logic, or we can say from View to AngularJS functions which reside in Controllers or bind data at the same View also.
 
Data binding is the concept of automatic synchronization of data between View and the Model. View access model can display the model data on the View in several different ways. We can use ng-bind directive which binds innerHTML of an element.
 
e.g. <p ng-bind="firstName"> </p>
 
Or
 
We can use double brackets to display firstName model property value.
 
e.g. {{ firstName }}
 
Or
 
We can use ng-model directive to bind the model property to HTML element.
 
e.g. <input type="text" ng-model="firstName">
 
<p ng-model="firstName"> </p>
 
So we have seen above that we can bind a model property to HTML content in three ways, then there should be some difference among them.
 
Yes, there is; and the difference is in the concept of data binding. Actually, AngularJS provides two types of data binding.
  1. One way data binding.
  2. Two way data binding.

One way data binding

 
We have already used one way data binding in the above explanation and in our previous day’s articles in demos and examples. One way data binding is generally used is to display data on the view.
 
ng-bind directive and {{ }} provides the one way data binding to display data on the view in the angular JS application.
 
Below are the examples of the one way data binding:
 
e.g. 
  1. {{ firstName }}  
  2. <p ng-bind="firstName"> </p>  
Bind model value with html element using data binding but if we change that html element it will not update value in model, it is one way binding and not synchronization between model and view.
 

Two way data binding

 
Two way data binding is the synchronization process between model and view in angular JS applications.
 
When value is changed in the model it reflects in the view and when value is changed in the view it also updates in model and this process happens automatically. So we always get updated and up to date model and view without writing any extra code for this.
 
ng-model directive provides the two way data binding between the model and the view in the angular JS application.
 
e.g. <input type="text" ng-model="firstName">
 
 

Find the attachment for the application demo application.
 

Summary

 
In this article, we have covered scope and data bindings and we have seen how the data travels between controller and view in AngularJS.
 
So, in Day Five I will cover: