Purpose of ZoneJs in Angular 2.

This blog serves a good read for the ones who are looking for a brief overview on zonejs in angular2 and what is its exact purpose.

As soon as we come across some Angular 2 platform, we run across various sets of required packages which are responsible for working of Angular. Interestingly, the readme file in the angular bundle clearly states that "For Proper functioning of angular and other external dependencies, polyfilles are required(zone.js)"

So what is zone.js and what is the exact need of it. The definition of zone according to angular is 

"

Purpose of ZoneJs in Angular 2.

 

This blog serves a good read for the ones who are looking for a brief overview on zonejs in angular2 and what is its exact purpose.

As soon as we come across some Angular 2 platform, we run across various sets of required packages which are responsible for working of Angular. Interestingly, the readme file in the angular bundle clearly states that "For Proper functioning of angular and other external dependencies, polyfilles are required(zone.js)"

So what is zone.js and what is the exact need of it. The definition of zone according to angular is 

"A Zone is an execution setting that continues crosswise over async undertakings." One may consider it some string neighborhood stockpiling of JavaScript Virtual Machines."

That sounds good, and apparently Angular simply uses zonejs for domains like errors, traces of stack, etc. However that's not all zone js do. It has more vital tasks underneath.

Lets try an experiment for better understanding. Create a simple Angular app with basic binding, and exclude zone.js from it. See what's the impact. Yes, the binding stops working.

Digging in the code. Hence, zone js is basically responsible for all the change detection and without it change detection just wont work and we end up with ordinary DOM without any exciting UI updates via binding.

SO why it is important? Well,  this is beacuse in Angular , the $digest cycle is totally absent unlike in the original Angualr 1 version. So, ZoneJs acts as its replacement in Angular 2 and serves all the change detection purpose:

 

let marker = new google.maps.Marker({
  position: new google.maps.LatLng(1, 1),
  map: someMap,
  title: 'Title of a marker'
});
marker.addListener('click', () => {
  this.someProperty = Math.random();
});

 

In above code the UI would not update on the click properly, as 'someProperty' is infact updated outside the scope of Angular zone. So to get proper updates we will have to do something like this:

 

marker.addListener('click', () => {
  this.zone.run(() => {
    this.someProperty = Math.random();
  });
});

 

So to sum up, zone.run() is similar to the new $digest().

 

Thanks

"

That sounds good, and apparently Angular simply uses zonejs for domains like errors, traces of stack, etc. However that's not all zone js do. It has more vital tasks underneath.

Lets try an experiment for better understanding. Create a simple Angular app with basic binding, and exclude zone.js from it. See what's the impact. Yes, the binding stops working.

Digging in the code. Hence, zone js is basically responsible for all the change detection and without it change detection just wont work and we end up with ordinary DOM without any exciting UI updates via binding.

SO why it is important? Well,  this is beacuse in Angular , the $digest cycle is totally absent unlike in the original Angualr 1 version. So, ZoneJs acts as its replacement in Angular 2 and serves all the change detection purpose:

let marker = new google.maps.Marker({
  position: new google.maps.LatLng(1, 1),
  map: someMap,
  title: 'Title of a marker'
});
marker.addListener('click', () => {
  this.someProperty = Math.random();
});

In above code the UI would not update on the click properly, as 'someProperty' is infact updated outside the scope of Angular zone. So to get proper updates we will have to do something like this:

marker.addListener('click', () => {
  this.zone.run(() => {
    this.someProperty = Math.random();
  });
});

So to sum up, zone.run() is similar to the new $digest().

Thanks