diff options
Diffstat (limited to 'docs/content/guide/databinding.ngdoc')
| -rw-r--r-- | docs/content/guide/databinding.ngdoc | 38 | 
1 files changed, 38 insertions, 0 deletions
| diff --git a/docs/content/guide/databinding.ngdoc b/docs/content/guide/databinding.ngdoc new file mode 100644 index 00000000..e5b4f754 --- /dev/null +++ b/docs/content/guide/databinding.ngdoc @@ -0,0 +1,38 @@ +@ngdoc overview +@name Data Binding +@description + +Data-binding in Angular web apps is the automatic synchronization of data between the model and view +components.  The way that Angular implements data-binding lets you treat the model as the +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 + +<img class="right" src="img/One_Way_Data_Binding.png"/> +Most templating systems bind data in only one direction: they merge template and model components +together into a view, as illustrated in the diagram. After the merge occurs, changes to the model +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. + +## Data Binding in Angular Templates + +<img class="right" src="img/Two_Way_Data_Binding.png"/> +The way Angular templates works is different, as illustrated in the diagram. 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 programming 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. + + +## Related Topics + +* {@link scope Angular Scopes} +* {@link templates Angular Templates} | 
