• import {Component} from ‘@angular/core’; const FACTORIAL_CHANNEL = “FACTORIAL”; import {NgModule} from ‘@angular/core’; import {WorkerAppModule} from ‘@angular/platform-webworker’; import {platformWorkerAppDynamic} from import {ServiceMessageBrokerFactory, PRIMITIVE} from ‘@angular/platform-webworker’; @Component({ selector: ‘app’, template:’
  Web worker loaded
  ‘ }) class Worker { time: string; constructor(private _serviceBrokerFactory: ServiceMessageBrokerFactory){ var broker = false); [PRIMITIVE], this.calculate, PRIMITIVE); } private calculate(val: string)…
• Web worker communication is message based, so whenever we receive a message over the correct channel, the calculate method will be called.
• then((ref: any) => { let brokerFactory: ClientMessageBrokerFactory = var broker = false); (e) => { var val = ( – – In main.ts I kick of the loading of the web worker, but I also define a channel for communication between the host application and the web worker.
• Once the worker application is bootstrapped I create a message broker to create a two way channel between the host and the web worker.
• The setup in the post bootstrap method matches the message broker definitions in the web worker component.

@K0YCHEV: Web Workers in #AngularJS #javascript #AppDev #webdev #devops

One really cool thing about Angular is that the framework is decoupled from the DOM via a higher level API. In the following post I will show how to take advantage of this by running an Angular application in a web worker.

Configuring an Angular application to run as a web worker requires a little bit more setup code than a regular browser application. In this article I will go through a simple example that you can build on to make more complex applications later.

I will start by creating a simple component. In my sample I have created a component for calculating n-factorial. The idea is that a value n will be passed to the component from the outside. Then, the component will calculate n-factorial based on n and return the result.

If we look at the component code in isolation it’s not really that different from regular components.

The main difference is the call that allows us to bootstrap the application in a web worker.

import {Component} from ‘@angular/core’; const FACTORIAL_CHANNEL = “FACTORIAL”; import {NgModule} from ‘@angular/core’; import {WorkerAppModule} from ‘@angular/platform-webworker’; import {platformWorkerAppDynamic} from import {ServiceMessageBrokerFactory, PRIMITIVE} from ‘@angular/platform-webworker’; @Component({ selector: ‘app’, template:’

Web worker loaded

‘ }) class Worker { time: string; constructor(private _serviceBrokerFactory: ServiceMessageBrokerFactory){ var broker = false); [PRIMITIVE], this.calculate, PRIMITIVE); } private calculate(val: string) { if(val) { let result = factorial(parseInt(val)); return…