Data Binding Working in Angular JS

Data binding refers to the process that is used for establishing a connection between the application UI and business logic. The Two-way data binding point towards the ability of binding changes with an object’s properties to changes in the UI and vice-versa. It means if we have a user object with a name property, when we assign a new value to user.name the UI will display the new name. Similarly, if an input field is included in UI for the username then the entering of value will result in a change in the name property of the user object.

Majority of popular client-side JavaScript frameworks like Ember.js, Angular.js or KnockoutJS promote two-way data binding as their top features. Actually, it is not very difficult to implement it from beginning. You are also not dependent on adopting only these options. Basically, the basic idea can be narrowed down to a 3-point action plan:
 

1. We require a way to specify which UI elements are bound to which properties
2. We are supposed to monitor changes on the properties and UI elements
3. We have to propagate any change to all bound objects and elements

 
As there are several methods of achieving it. A very simple and equally efficient approach implements the PubSub pattern. We need to use custom data attributes to specify bindings inside the HTML code. Every JavaScript object and DOM element that is bound together will “subscribe” to PubSub object. As soon a change is detected either on JavaScript object or in an HTML input element we need to proxy the event to the PubSub that will broadcast and further propagate the change on other bound objects and elements
 
Implementation using Angular JS

AngularJS remembers the value and does a comparison with the previous value. This is a basic checking. When there will be a change of value then change event is fired.

The $apply() method, that is called during transitioning from a non-AngularJS world into an AngularJS world will calls $digest(). The digest is simple and old trick for checking. It smoothly works on all browsers and is very predictable.
 
Unlike dirty-checking (AngularJS) vs change listeners (KnockoutJS and Backbone.js): While dirty-checking might look simple as well as a bit inefficient. It turns out that it is semantically correct all the time whereas change listeners have multiple mismanaged corner cases and require things like dependency tracking to make it more semantically correct. KnockoutJS dependency tracking is a good feature for a problem which AngularJS is missing.
 
Looking forward to responding to your queries and comments regarding JavaScript Data Binding. If any information you want to get included I will update this article with it.
 
About Singsys Pte. Ltd. Singsys is a solution provider that offer user friendly solution on cutting edge technologies to engage customers and boost your brand online results from a set of certified developers, designers who prefer optimized utilization of the available resources to align client’s idea with their skillset to reflect it into a Mobile application, Web application or an E-commerce solution
 
You may be interested in following:

1. Close Look at JavaScript Closure Working
2. Random Whole Number Generation in Javascript Within a Range
3. 5 Best JavaScript Testing Tools for Web Developers