How does data-binding work in AngularJS?

Question

How does data-binding work in AngularJS?

Navigation

#1 by (3 votes)

2

I looked for something that explains to me how the magic of data-binding happens but I did not find it.

My question is how do view data for model propagate, how can it keep up with changes without setters and getters?

I searched for something in javascript that can track object changes and various variables found Object.watch () , could it be used to do data-binding?

javascript angularjs

asked by anonymous 05.01.2016 / 17:41

1 answer

Choose folder to save a file Doubt with checkbox and PHP

score 3 · Accepted Answer

Most template systems bind data in only one direction, which merges with the model components, and the template in turn executes an output on your screen (this is the default data-binding event). After this merger, there are some changes in the model or part of it (sections) that are related to this screen. However, this behavior is not automatic as it is assumed to see this occurring on the screen. And worse, the changes the user makes to the screen are not reflected in the model.

The big move is in the hands of the developer, who has to write the code that does this synchronization constantly through the model and the same returns this update to the screen.

It turns out that in AngularJS, data-binding works a little differently:

In angled data-link applications, data synchronization is automatic between the model components and their display (screen). The way Angular implements this data binding, allows you to treat the model as a single-source of your application. What you see on the screen is a projection of the model at all times. When the model changes, the vision reflects this change, and vice versa.

First the template (the bundled HTML, along with any markup or additional directive) is compiled in the browser. The build stage produces a live view. Any changes to the screen are immediately reflected in the model, and any changes in the model are propagated to the view (screen). The template is just the absolute absolute truth of the state of your application. This is done to facilitate the programming model for the developer.

You can think of the view (screen) as a simple instant projection of your model. Because the screen is just a projection of the model, and the controller is completely separate from the screen.

It is the view (screen) that sees the controller and sends commands to it.

Think of the model as a kind of facilitator, and the controller the guy who sends the orders to him, and what the model "facilitates," will be reflected automatically in the vision.

In the Angular JS site , you'll find more information about it.