Developer Guide: Data Binding

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

Data Binding

Data-binding allows you to treat the model as the single-source-of-truth of your application, and consider the view as only a projection of the model, at all times. The process of copying the model values to the view, and any changes to the view by the user to the model, is known as data-binding.

Classical Template Systems

At the highest level, angular looks like a just another templating system. But there is one important reason why angular templating system is different and makes it very good fit for application development: two-way data binding.

Most templating systems bind data in only one direction: they merge a template and model together into a view, as illustrated in the diagram to the right. After the merge occurs, any changes to the model or in related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.

angular Template Systems

The way angular templates works is different, as illustrated in the diagram on the right. They are different because first the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser, and second, the compilation step produces a live view. We say live because any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. This makes the model always the single-source-of-truth for the application state, greatly simplifying the programing model for the developer. You can think of the view as simply an instant projection of your model.

Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.

For details about how data binding works in angular, see Scope.