Last active
February 21, 2020 19:37
-
-
Save park-brian/78b4a0230e5243989a011226191840c1 to your computer and use it in GitHub Desktop.
Angular 9 Web Workers (ES5) - https://gist.run/?id=78b4a0230e5243989a011226191840c1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>{{ title }}</h1> | |
<button (click)="updateMessage()"> | |
Click me! | |
</button> | |
<p *ngFor="let line of message"> | |
{{ line }} | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Create AppComponent | |
AppComponent.annotations = [ | |
new ng.core.Component({ | |
selector: 'app-root', | |
templateUrl: 'app.component.html', | |
styleUrls: ['app.style.css'], | |
}) | |
]; | |
// Import services | |
AppComponent.parameters = [ | |
[new ng.core.Inject(AppService)] | |
]; | |
function AppComponent(appService) { | |
this.appService = appService; | |
this.title = 'Hello From Angular!'; | |
this.message = null; | |
this.updateMessage = function() { | |
this.message = this.appService.getRandomMessage() | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Import dependencies | |
var ngVersion = '9.0.2'; | |
importScripts('https://cdn.jsdelivr.net/combine/' + [ | |
'npm/[email protected]/dist/polyfill.min.js', | |
'npm/[email protected]/bundles/rxjs.umd.min.js', | |
'npm/[email protected]', | |
'npm/@angular/core@' + ngVersion, | |
'npm/@angular/common@' + ngVersion, | |
'npm/@angular/compiler@' + ngVersion, | |
'npm/@angular/platform-browser@' + ngVersion, | |
'npm/@angular/platform-webworker@' + ngVersion, | |
'npm/@angular/platform-browser-dynamic@' + ngVersion, | |
'npm/@angular/platform-webworker-dynamic@' + ngVersion, | |
].join(',')); | |
// Import AppModule | |
importScripts('app.module.js'); | |
// Bootstrap AppModule | |
ng.core.enableProdMode(); | |
ng.platformWebworkerDynamic | |
.platformWorkerAppDynamic() | |
.bootstrapModule(AppModule); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
importScripts('app.service.js'); // Import AppService | |
importScripts('app.component.js'); // import AppComponent | |
// Create AppModule | |
AppModule.annotations = [ | |
new ng.core.NgModule({ | |
declarations: [AppComponent], | |
providers: [AppService], | |
imports: [ng.platformWebworker.WorkerAppModule], | |
bootstrap: [AppComponent] | |
}) | |
]; | |
function AppModule() {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AppService.annotations = [ | |
new ng.core.Injectable({ | |
providedIn: 'root', | |
}) | |
]; | |
function AppService() { | |
this.messages = [ | |
[ | |
'Scientist: "My findings are meaningless if taken out of context.', | |
'Media: Scientist claims "Findings are meaningless."', | |
], | |
[ | |
'I asked my wife if I was the only one she\'s been with.', | |
'She said, "Yes, the others were at least sevens or eights".' | |
], | |
[ | |
'A lost dog strays into a jungle. A curious lion sees this, and thinks to himself "this guy looks edible, never seen his kind before".', | |
'So the lion starts stalking the dog through the jungle. The dog notices and starts to panic, but just as he\'s about to run he sees some bones next to him and gets an idea and exclaims loudly "mmm...that was a tasty lion!".', | |
'The lion abruptly stops and says "Woah! This guy seems tougher then he looks, I had better leave while I can".', | |
'Over by the tree top, a monkey witnessed everything. Evidently, the monkey realizes the he can benefit from this situation by telling the lion and getting something in return. So the monkey proceeds to tell the lion what really happened and the lion says angrily "get on my back, we\'ll get him together".', | |
'So they start rushing back to the dog. The dog sees them and realized what happened and starts to panic even more. He then gets another idea and shouts "where the hell is that monkey! I told him to bring me another lion an hour ago..."', | |
], | |
[ | |
'If you aren\'t impressed with the picture of the first Black Hole, ', | |
'you clearly don\'t understand the gravity of the situation' | |
], | |
[ | |
'I was applying for Australian citizenship and the interviewer asked, “Do you have a criminal record?”', | |
'I said, “No. Is that still required?”' | |
], | |
]; | |
this.getRandomMessage = function() { | |
return this.randomElement(this.messages); | |
} | |
this.randomElement = function(array) { | |
var randomIndex = Math.floor(Math.random() * array.length); | |
return array[randomIndex]; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:host { | |
display: block; | |
line-height: 1.5; | |
margin: 0 auto; | |
max-width: 32rem; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<title>(ES5) Angular 9 Using Web Workers </title> | |
</head> | |
<body> | |
<app-root> | |
Loading... | |
</app-root> | |
<script> | |
var ngVersion = '9.0.2'; | |
var src = 'https://cdn.jsdelivr.net/combine/' + [ | |
'npm/[email protected]/dist/polyfill.min.js', | |
'npm/[email protected]/bundles/rxjs.umd.min.js', | |
'npm/[email protected]', | |
'npm/@angular/core@' + ngVersion, | |
'npm/@angular/common@' + ngVersion, | |
'npm/@angular/platform-browser@' + ngVersion, | |
'npm/@angular/platform-webworker@' + ngVersion, | |
].join(','); | |
importScript(src, function () { | |
ng.core.enableProdMode(); | |
ng.platformWebworker.bootstrapWorkerUi('app.js'); | |
}); | |
function importScript(src, callback) { | |
var script = document.createElement('script'); | |
script.src = src; | |
script.onload = callback; | |
document.body.appendChild(script); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://bl.ocks.org/park-brian/78b4a0230e5243989a011226191840c1 (note: open in new window)