What Is Zone.js and How Can I Use It?
By: Akash Deshmukh
Tags: Angular, Zones In Angular, Zonejs, Zones, Zonejs In Angular

Zone API:

As mentioned above, ZoneTask is executed in the Zone. But how does it happen ? zone.js exposes the API which allows us to use some awesome functionality provided by zone.js. Each defined zone also allows us to define the set of properties in the form of key-value which can be accessed by its members functions.

More details about each API provided by Zone is mentioned below :

So, Let’s play with some of these static APIs exposed by this:

Ok then, Zones are just the execution context where all the ZoneTask’s are executed using API but what can I do with it? Let’s see one by one how it can help us.

1) Forking zones:

Zone also provides us with the ability to create more child zones by exposing one of its API fork allowing us to create hierarchical structure in zones which would help us to have each zone with distinct responsibilities.

Fig 1.

We can create a new Zone using fork API passing the specification for the new zone we want to create. These specifications in terms of code are equivalent to ZoneSpec class.

Let’s try creating the above hierarchy using fork API :

Here, we’re getting reference to the current Zone using Zone.current and then creating a child zone childAZone using fork of current zone where we’re passing an object of ZoneSpec as a parameter. We’re again creating a new child zone of childAZone and are simply logging the names of it’s parent and grandparent zones.

ZoneSpec also includes other multiple members such as onFork, onIntercept, onScheduleTask, OnInvoke etc. But what are those members ? This brings me to the next possible action we can do with zones.

2) Interception:

Zones provide us with the ability to intercept multiple operations done to execute the tasks in the zone. One can avail these using the defining hooks available in ZoneSpec while creating the new Zone.

Detailed explanation of each hook in ZoneSpec is mentioned below :

Let’s try playing around with one of the Hooks:

Here, I am creating the same hierarchy discussed in fig. 1, but while forking new zones, I have passed in one more value in ZoneSpec i.e. onInvoke where I am logging some messages before and after the execution of a function in each zone. Then we’re defining a function helloFunction and executing it in childBZone. This function is then intercepted by childBZone since it defines interception for execution of any function as defined in it’s ZoneSpec while creating it. It prints log “intercepted in childBZone before execution” in the console and then sends this helloFunction to the closest parent which also has defined interception for function executions. The closest parent which also defines interception for functions here is childAZone. So childAZone also intercepts this helloFunction and logs “intercepted in childAZone before execution”. childAZone also follows the same process and sends this function to the closest parent which also defines the interception for any function. Now in this case, there exists no parent of childAZone which has interception defined, so it will simply execute this function. After the execution of this function, all the trailing messages in child zones would be logged in the console. So the final logs in the console is :

Here in each hook, you might have noticed some of the parameters being defined. Let’s go with each parameter one by one :

currentZone — It refers to the Zone which is currently intercepting the task.

targetZone — It refers to the Zone in which the Task was invoked.

task — It refers to the task that’s supposed to be executed.

parentZoneDelegate — It’s a special object ZoneDelegate which maintains the reference to the parent Zone which defines the same hook for interception.