Post
Ask Question

Data Binding in AngularJS

AngularJS directives have a specific role in AngularJS apps. These directives are specified in HTML elements as attributes that extend HTML. In this article we are about to learn a cool feature of AngularJS, Data Binding. We will discuss one-way as well as two-way data binding with examples of each and how they make the synchronization of data easier for developers to code for.

Before moving to this article, I recommend visiting my previous articles.

We call a HTML file as a template because it is only the structure that is not visible to the user before it's processed by AngularJS. 

There are the following two ways to do data binding that can be specified.

  • Using an expression
    This can be done using double curly braces.

    1. {{expressio}}  

  • Using a directive

    The ng-bind directive is also used to bind data.
    1. <body ng-bind=" "> </body>  
One-Way Data Binding

One-Way Data Binding simply means that HTML elements reflect the change. When the model values change the HTML elements don't change the values in the model.

In other words, when the model changes, this change is reflected in the view but the view doesn't change the model. In other words the developer must write extra code for automatic synchronization of data between the model and the view components. One-Way binding may also be called one-direction binding.


       Figure 1 One-way Binding

Let us understand with an example.
Press F5
 


Two-Way Binding

Two-Way data binding is a striking feature of AngularJS that makes testing of controller very easy without a DOM dependency and the view. Data binding has the feature of automatic synchronization of the data between the model and view. That means there will be two-way binding. In two-way binding, if a model value changes then this change will be reflected by the view and if there is any change from the view side then the model will be automatically updated. This feature is really very good for developers, they don't need to code for auto-synchronization of data.

Angular templates (HTML file + angular directives) work quite differently. When the template is compiled in the browser, it produces the view. If the user produces a change to the view then it is reflected in the model and changes to the model are reflected in the view as well.

               Figure 2  Two-way Binding

Let us now see an example.



Press F5. 



In the preceding example, empName and empId are two model variables. Whenever we change the value of a model variable (in a TextBox), the change will be automatically reflected in the view. The value of the input type will be initialized with the model variable after the page is loaded. Whenever the value of the input type is changed, the value of the value of the model is also modified. That is two-way binding.

Two-way Binding lets developerd treat the model as the single source of truth. In fact it greatly easee the programming model for developers. Since the View reflects the model change, the controller is completely independent of the View, this makes testing of the Controller easy.

Summary

So by going through this article, we understood a great feature of AngularJS, Two-way Data Binding, how it automatically synchronizes data between the Model and the View.We will see more fetures of AngularJS in future articles. Stay tuned with this series.

Keep learning and please do share your views and knowledge here.


Similar Articles