Working with zones outside Angular

Working with zones entirely inside of the Angular framework conceals what they are really doing behind the scenes. It would be a disservice to you, the reader, to just gloss over the underlying mechanism. In this recipe, you'll take the vanilla zone.js implementation outside of Angular and modify it a bit in order to see how Angular can make use of it.

There will be no Angular used in this recipe, only zone.js inside a simple HTML file. Furthermore, this recipe will be written in plain ES5 JavaScript for simplicity.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/0591/.

Getting ready

Begin with the following simple HTML file:

[index.html] 
 
<button id="button">Click me</button> 
<button id="add">Add listener</button> 
<button id="remove">Remove listener</button> 
 
<script> 
var button = document.getElementById('button...