2011-06-06 08:50:35 -07:00
|
|
|
@ngdoc overview
|
2013-11-05 22:16:11 -08:00
|
|
|
@name Data Binding
|
2014-09-04 16:49:16 +01:00
|
|
|
@sortOrder 210
|
2011-06-06 08:50:35 -07:00
|
|
|
@description
|
|
|
|
|
|
2015-03-13 08:01:26 -07:00
|
|
|
# Data Binding
|
|
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
Data-binding in AngularJS apps is the automatic synchronization of data between the model and view
|
|
|
|
|
components. The way that AngularJS implements data-binding lets you treat the model as the
|
2011-06-06 08:50:35 -07:00
|
|
|
single-source-of-truth in your application. The view is a projection of the model at all times.
|
|
|
|
|
When the model changes, the view reflects the change, and vice versa.
|
|
|
|
|
|
|
|
|
|
## Data Binding in Classical Template Systems
|
|
|
|
|
|
2014-06-08 19:01:06 -07:00
|
|
|
<img class="right" src="img/One_Way_Data_Binding.png"/><br />
|
2011-06-06 08:50:35 -07:00
|
|
|
Most templating systems bind data in only one direction: they merge template and model components
|
2014-03-03 12:43:41 -08:00
|
|
|
together into a view. After the merge occurs, changes to the model
|
2011-06-06 08:50:35 -07:00
|
|
|
or 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.
|
|
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
## Data Binding in AngularJS Templates
|
2011-06-06 08:50:35 -07:00
|
|
|
|
2014-06-08 19:01:06 -07:00
|
|
|
<img class="right" src="img/Two_Way_Data_Binding.png"/><br />
|
2017-01-24 17:23:54 +00:00
|
|
|
AngularJS templates work differently. First the template (which is the uncompiled HTML along with
|
2014-03-03 12:43:41 -08:00
|
|
|
any additional markup or directives) is compiled on the browser. The compilation step produces a
|
|
|
|
|
live view. Any changes to the view are immediately reflected in the model, and any changes in
|
|
|
|
|
the model are propagated to the view. The model is the single-source-of-truth for the application
|
|
|
|
|
state, greatly simplifying the programming model for the developer. You can think of
|
2011-06-06 08:50:35 -07:00
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Related Topics
|
|
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
* {@link scope AngularJS Scopes}
|
|
|
|
|
* {@link templates AngularJS Templates}
|