How Data Binding works in AngularJS?

In AngularJS, data binding is synchronization of data between the model and the view. The model in AngularJS act as a single-source-of-truth. The view is the projection of the model at all times.

AngularJS has two-way data binding. At 1st, the template (uncompiled HTML) is compiled on the browser. The compilation of the template produces a live view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

data binding

That is why the view is just the projection of the model and the controller is completely separated from the view and unaware about the data-binding. This makes it easy to test the controller in isolation of view and any related DOM dependency.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s