Over a million developers have joined DZone.

What is 2 way binding in Angular.js

· Java Zone

Learn more about how the Java language, tools and frameworks have been the foundation of countless enterprise systems, brought to you in partnership with Salesforce.

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

Discover how the Force.com Web Services Connector (WSC) is a code-generation tool and runtime library for use with Force.com Web services, brought to you in partnership with Salesforce.


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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

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

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

{{ parent.tldr }}

{{ parent.urlSource.name }}