diff options
Diffstat (limited to 'docs/content/guide/dev_guide.templates.databinding.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.templates.databinding.ngdoc | 48 | 
1 files changed, 48 insertions, 0 deletions
| diff --git a/docs/content/guide/dev_guide.templates.databinding.ngdoc b/docs/content/guide/dev_guide.templates.databinding.ngdoc new file mode 100644 index 00000000..1459095e --- /dev/null +++ b/docs/content/guide/dev_guide.templates.databinding.ngdoc @@ -0,0 +1,48 @@ +@workInProgress +@ngdoc overview +@name Developer Guide: Templates: Data Binding in Angular +@description + + +Data-binding in angular web apps is the automatic syncing 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 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. + + + + +## Related Topics + + +* {@link dev_guide.scopes Angular Scopes} +* {@link dev_guide.templates Angular Templates} | 
