How does data binding work in the AngularJS framework?

I haven't found technical details on their site . It's more or less clear how this works when data propagates from view to model How does angularjs track changes of model properties?

I found there are javascript watchers that can do this work But they are not supported in Internet Explorer 6 and Internet Explorer 7 . So how does angularjs know that i changed for example the following and reflected this change on a view?

myobject.myproperty="new value";

Angularjs remembers the value and compares it with a previous value This is simple dirty-checking If there's a change in value then the event is triggered

The $apply() method, which is what you call when you are transitioning from a non-AngularJS world into an AngularJS world, calls $digest() . A digest is just plain old dirty-checking. It works on all browsers and is totally predictable

To contrast dirty-checking (AngularJS) vs change listeners ( KnockoutJS and Backbone.js ): While dirty-checking may seem simple, and even inefficient (I will address that later), it turns out that it is semantically correct all the time, while change listeners have lots of weird corner cases and need things like dependency tracking to make it more semantically correct. Knockoutjs dependency tracking is a clever feature for a problem which angularjs does not have.

Issues with change listeners:

• The syntax is atrocious since browsers don't support it natively Yes there are proxies but they are not semantically correct in all cases and of course there are no proxies on older browsers The bottom line is that dirty-checking allows you to do POJO , whereas KnockoutJS and Backbone.js force you to inherit from their classes, and access your data through accessors.
• Change coalescence. Suppose you have an array of items Say you want to add items into an array, as you are looping to add, each time you add you are firing events on change, which is rendering the ui. This is a very bad performance You want to update the user interface only once at the end The events of change are too fine-grained
• Change listeners fire immediately on a setter, which is a problem, since the change listener can further change data, which fires more change events. This is bad because on your stack you may have multiple change events happening at once Suppose you have two arrays which need to be kept in sync for whatever reason You can only add to one or the other, but each time you add you fire a change event, which now has an inconsistent view of the world. This is a very similar problem to thread locking that javascript avoids as each callback only executes to completion Change events disrupt this since setters can have far-reaching consequences which are not intended and not obvious that creates a thread problem all over again It turns out that what you want to do is to delay the listener execution, and guarantee, that only one listener runs at a time, hence any code is free to change data, and it knows that no other code runs while it is doing so.

What about performance?

So it seems that we're slow since dirty-checking is inefficient This is where we need to look at real numbers rather than just have theoretical arguments, but first let's define some constraints.

We're all humans

• Slow — Anything faster than 50 ms is imperceptible to humans and thus can be considered as "instant".

• Limited — You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad ui, and humans can't process this anyway.

So what will be the exact question? how many comparisons can you do on a browser in 50ms? This is a hard question to answer as many factors come into play, but here is a test case: http://jsperf.com/angularjs-digest/6 which creates 10,000 watchers. On a modern browser this takes just under 6 ms. On Internet Explorer 8 it takes about 40 ms. As you can see, this is not an issue even on slow browsers these days. There is a caveat: The comparisons need to be simple to fit into the time limit... Unfortunately it's way too easy to add a slow comparison to angularjs so it's easy to build slow applications when you don't know what you're doing But we hope to have an answer by providing an instrumentation module, which would show you which are the slow comparisons.

Video games and gpus use the dirty-checking approach specifically because it is consistent As long as they get over the monitor refresh rate (typically 50-60 Hz, or every 16.6-20 ms), any performance over that is a waste, so you're better off drawing more stuff, than getting FPS higher.