mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
42 lines
2.2 KiB
Text
42 lines
2.2 KiB
Text
|
@workInProgress
|
||
|
|
@ngdoc overview
|
||
|
|
@name Developer Guide: Data Binding
|
||
|
|
@description
|
||
|
|
|
||
|
|
# 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
|
||
|
|
|
||
|
|
<img class="right" src="img/One_Way_Data_Binding.png"/>
|
||
|
|
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
|
||
|
|
<img class="right" src="img/Two_Way_Data_Binding.png"/>
|
||
|
|
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 {@link angular.scope Scope}.
|