Angular (application platform)

AngularJS applies the name = 'X'; to the model.

The $digest loop begins

The $watch list detects a change on the name property and notifies the interpolation, which in turn updates the DOM.

AngularJS exits the execution context, which in turn exits the keydown event and with it the JavaScript execution context.

The browser re-renders the view with the updated text.

• During the runtime phase:

Pressing an 'X' key causes the browser to emit a keydown event on the input control.

The input directive captures the change to the input's value and calls $apply("name = 'X';") to update the application model inside the AngularJS execution context.

AngularJS applies the name = 'X'; to the model.

• During the compilation phase:

the ng-model and input directive set up a keydown listener on the <input> control.

the interpolation sets up a $watch to be notified of name changes.

Here is the explanation of how the Hello world example achieves the data-binding effect when the user enters text into the text field.

• The $evalAsync queue is used to schedule work which needs to occur outside of current stack frame, but before the browser's view render. This is usually done with setTimeout(0), but the setTimeout(0) approach suffers from slowness and may cause view flickering since the browser renders the view after each event.
• The $watch list is a set of expressions which may have changed since last iteration. If a change is detected then the $watch function is called which typically updates the DOM with the new value.
• Once the AngularJS $digest loop finishes, the execution leaves the AngularJS and JavaScript context. This is followed by the browser re-rendering the DOM to reflect any changes.

Enter the AngularJS execution context by calling scope.$apply(stimulusFn), where stimulusFn is the work you wish to do in the AngularJS execution context.

AngularJS executes the stimulusFn(), which typically modifies application state.

AngularJS enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The $digest loop keeps iterating until the model stabilizes, which means that the $evalAsync queue is empty and the $watch list does not detect any changes.

• Enter the AngularJS execution context by calling scope.$apply(stimulusFn), where stimulusFn is the work you wish to do in the AngularJS execution context.

• AngularJS executes the stimulusFn(), which typically modifies application state.

• AngularJS enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The $digest loop keeps iterating until the model stabilizes, which means that the $evalAsync queue is empty and the $watch list does not detect any changes.

Enter the AngularJS execution context by calling scope.$apply(stimulusFn), where stimulusFn is the work you wish to do in the AngularJS execution context.

AngularJS executes the stimulusFn(), which typically modifies application state.

AngularJS enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The $digest loop keeps iterating until the model stabilizes, which means that the $evalAsync queue is empty and the $watch list does not detect any changes.

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc... You can also use $apply() to enter the AngularJS execution context from JavaScript. Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks.

The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event, or network event (response from a server).

The event's callback gets executed. This enters the JavaScript context. The callback can modify the DOM structure.

Once the callback executes, the browser leaves the JavaScript context and re-renders the view based on DOM changes.

• The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event, or network event (response from a server).

• The event's callback gets executed. This enters the JavaScript context. The callback can modify the DOM structure.

• Once the callback executes, the browser leaves the JavaScript context and re-renders the view based on DOM changes.

The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event, or network event (response from a server).

The event's callback gets executed. This enters the JavaScript context. The callback can modify the DOM structure.

Once the callback executes, the browser leaves the JavaScript context and re-renders the view based on DOM changes.

The diagram and the example below describe how AngularJS interacts with the browser's event loop.

Integration with the browser event loop

• Watching by value (scope.$watch (watchExpression, listener, true)) detects any change in an arbitrarily nested data structure. It is the most powerful change detection strategy, but also the most expensive. A full traversal of the nested data structure is needed on each digest, and a full copy of it needs to be held in memory.

• Watching collection contents (scope.$watchCollection (watchExpression, listener)) detects changes that occur inside an array or an object: When items are added, removed, or reordered. The detection is shallow - it does not reach into nested collections. Watching collection contents is more expensive than watching by reference, because copies of the collection contents need to be maintained. However, the strategy attempts to minimize the amount of copying required.

• Watching by reference (scope.$watch (watchExpression, listener)) detects a change when the whole value returned by the watch expression switches to a new value. If the value is an array or an object, changes inside it are not detected. This is the most efficient strategy.

Dirty checking can be done with three strategies: By reference, by collection contents, and by value. The strategies differ in the kinds of changes they detect, and in their performance characteristics.

Scope $watch Depths

Dirty checking the scope for property changes is a common operation in AngularJS and for this reason the dirty checking function must be efficient. Care should be taken that the dirty checking function does not do any DOM access, as DOM access is orders of magnitude slower than property access on JavaScript object.