Please enable Javascript to correctly display the contents on Dot Net Tricks!

Data Binding

Posted On : 08 Feb 2015
Updated On : 10 Feb 2015
Total Views : 6368

AngularJS has powerful data-binding feature which saves developer from writing boilerplate code (i.e. the sections of code which is included in many places with little or no alteration). Developers are not responsible for manually updating HTML elements to reflect model changes. AngularJS provides its powerful data-binding mechanism to handle the synchronization of data between model and view.

How AngularJS handle data binding

AngularJS handle data-binding mechanism with the help of three powerful functions: $watch(), $digest() and $apply(). Most of the time AngularJS will call the $scope.$watch() and $scope.$digest() functions for you, but in some cases you may have to call these functions yourself to update new values.

Two-way data binding

It is used to synchronize the data between model and view. It means, any change in model will update the view and vice versa. ng-model directive is used for two-way data binding.

Issue with two-way data binding

In order to make data-binding possible, Angular uses $watch APIs to observe model changes on the scope. Angular registered watchers for each variable on scope to observe the change in its value. If the value, of variable on scope is changed then the view gets updated automatically.

This automatic change happens because of $digest cycle is triggered. Hence, Angular processes all registered watchers on the current scope and its children and checks for model changes and calls dedicated watch listeners until the model is stabilized and no more listeners are fired. Once the $digest loop finishes the execution, the browser re-renders the DOM and reflects the changes.

By default, every variable on a scope is observed by the angular. In this way, unnecessary variable are also observed by the angular that is time consuming and as a result page is becoming slow. Hence to avoid unnecessary observing of variables on scope object, angular introduced one-way data binding.

One-way data binding

This binding is introduced in Angular 1.3. An expression that starts with double colon (::), is considered a one-time expression i.e. one-way binding.

Data Binding Example

AngularJS Data Binding : Web Geek School
What do you think?

I hope you have better understanding of AngularJS data binding. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.