diff options
| author | Igor Minar | 2011-06-06 08:50:35 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-06-06 22:52:02 -0700 |
| commit | 7f1e2e48467f80cc083d24b44f088620e4e7bcb6 (patch) | |
| tree | 731a91366c5780985be6d4c5ddbe34e307d5cb70 /docs/content/guide/dev_guide.templates.databinding.ngdoc | |
| parent | 5533e48dead5cff3107e72ee80bf0f19df77c1e9 (diff) | |
| download | angular.js-7f1e2e48467f80cc083d24b44f088620e4e7bcb6.tar.bz2 | |
new batch of docs
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} |
