angular-cn/modules/angular2/docs/core/12_zones.md

Zones

A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript. Zones are used to intercept all async operation callbacks in the browser. By intercepting async callbacks Angular can automatically execute the change detection at the end of the VM turn to update the application UI bindings. Zones means that in Angular v2 you don't have to remember to call rootScope.$apply() in your async call.

Execution Context

zone['inTheZone'] = false;
zone.run(function () {
  zone['inTheZone'] = true;

  setTimeout(function () {
    console.log('async in the zone: ' + zone['inTheZone']);
  }, 0);
});

console.log('sync in the zone: ' + zone['inTheZone']);

The above will log:

sync in the zone: false
async in the zone: true

In the above example the zone is a global-callback-local variable. To the zone we can attach arbitrary properties such as inTheZone. When we enter the zone, we get a new zone context (which inherits all properties from the parent zone), once we leave the zone, the previous zone variable is restored. The key part is that when a async callback is scheduled in the zone, as is the case with setTimeout, the current zone variable is captured and restored on the callback. This is why the output of the inTheZone property inside the callback of the setTimeout prints true.

Callback Interception

In addition to storing properties on the current zone, zones can also allow us to intercept all async callbacks and notify us before and after the callback executes.

zone.fork({
  afterTask: function () {
    // do some cleanup
  }
}).run(function () {
  // do stuff
});

The above example will execute the afterTask function not only after the run finishes, but also after any callback execution which was registered in the run block.

Putting it all together in Angular

In Angular2 it is not necessary to notify Angular of changes manually after async callback, because a relevant async callbacks are intercepted. The question is how do we know which callbacks are Angular relevant?

/// Some other code running on page can do async operation
document.addEventListener('mousemove', function () {
  console.log('Mouse moved.');
});

var AngularZone = {
  afterTask: function () {
    console.log('ANGULAR AUTO-DIGEST!');
  }
};

var ngZone = zone.fork(AngularZone);
ngZone.run(function() {
  console.log('I aware of angular, I should cause digest.');
  document.addEventListener('click', function () {
    console.log('Mouse clicked.');
  });
});

Will produce:

I aware of angular, I should cause digest.
ANGULAR AUTO-DIGEST!

Moving the mouse will produce many:

Mouse moved.

But clicking will produce:

Mouse clicked.
ANGULAR AUTO-DIGEST!

Notice how the place where the listener was registered will effect whether or not Angular will be notified of the async call and cause a change detection to run to update the UI.

Being able to globally intercept the async operation is important to have a seamless integration with all existing libraries. But it is equally important to be able to differentiate between Angular and non-Angular code running on the same page concurrently.