Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What is 2 way binding in Angular.js

DZone's Guide to

What is 2 way binding in Angular.js

· Java Zone
Free Resource

The single app analytics solutions to take your web and mobile apps to the next level.  Try today!  Brought to you in partnership with CA Technologies

Many developers name 2 way binding as the main advantage of Angular.js framework. So what 2 way binding actually is and how it helps Angular.js framework to deliver better experience?

1 way data binding

The below images explain the difference quite well.

In MVC (model, view & controller) world 1 way data binding happens when controller generates view by merging model and view template. This process happens once and generated view is then sent to the client application. Once client application receives rendered view there is no easy way to automatically update this view if model data changes.

View is only regenerated once user refreshes the the app screen / page with current view. Or navigates to another application page.

1 way data binding MVC2 way data binding MVC Angular.js

2 way data binding

2 way dat binding uses a different approach.

The view is generated from the template and is constantly sync’ed up with any changes in the data model receives. Also once the view changes (mostly because of application user interactions) model gets updated with new data as required instantly.

This way application user doesn’t have to refresh or reload the page in order for user to see the data changes. From the users perspective view changes happen near real time.

The main requirement for this – all this process has to happen on the application client side.

This is the main reason Angular.js framework supports 2 way data binding very well. It runs on the client application side and can constantly run the synch / refresh between what app users see and any data changes on the model side.

*Images are taken from Angular.js docs site

CA App Experience Analytics, a whole new level of visibility. Learn more. Brought to you in partnership with CA Technologies.

Topics:

Published at DZone with permission of Saul Zukauskas, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}