Skip to content

Instantly share code, notes, and snippets.

@park-brian
Last active February 21, 2020 19:37
Show Gist options
  • Save park-brian/78b4a0230e5243989a011226191840c1 to your computer and use it in GitHub Desktop.
Save park-brian/78b4a0230e5243989a011226191840c1 to your computer and use it in GitHub Desktop.
<h1>{{ title }}</h1>
<button (click)="updateMessage()">
Click me!
</button>
<p *ngFor="let line of message">
{{ line }}
</p>
// 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()
}
}
// Import dependencies
var ngVersion = '9.0.2';
importScripts('https://cdn.jsdelivr.net/combine/' + [
'npm/babel-polyfill@6.26.0/dist/polyfill.min.js',
'npm/rxjs@6.5.4/bundles/rxjs.umd.min.js',
'npm/zone.js@0.10.2',
'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);
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() {}
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];
}
}
:host {
display: block;
line-height: 1.5;
margin: 0 auto;
max-width: 32rem;
}
<!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/babel-polyfill@6.26.0/dist/polyfill.min.js',
'npm/rxjs@6.5.4/bundles/rxjs.umd.min.js',
'npm/zone.js@0.10.2',
'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>
@park-brian
Copy link
Author

park-brian commented Jul 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment