mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
fc060dfc08
Before, there we multiple overview docs: - guide/overview - guide/introduction - guide/dev_guide.mvc - guide/dev_guide.mvc.understanding_model - guide/dev_guide.mvc.understanding_view - guide/concepts Now we have: - guide/introduction: High level description of Angular with the key benefits but without code or any concrete concepts - guide/concepts: explains all important concepts with a simple example and contains deep links to the other parts of the guide. All the old information was moved into existing documents or deleted when they were duplicates.
38 lines
2 KiB
Text
38 lines
2 KiB
Text
@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}
|