Update 3
web Worker support was removed from Dart Angular2 when the project was split from TypeScript. There seem to be plans to add support back when DDC and Bazel become available and allow to develop with Chrome instead of Dartium.
Update 2
There are some basic examples in
https://github.com/angular/angular/blob/master/modules/angular2/docs/web_workers/web_workers.md#bootstrapping-a-webworker-application
but they seem outdated.
Working example - kitchen_sink
Below is the code of the example from https://github.com/angular/angular/tree/master/modules/playground/src/web_workers/kitchen_sink which is completed and missing parts translated from TypeScript to Dart when the Angular is built (See also
- https://github.com/angular/angular/blob/master/DEVELOPER.md
- https://stackoverflow.com/a/36315210/217408)
pubspec.yaml
name: kitchen_sink
environment:
sdk: '>=1.10.0 <2.0.0'
dependencies:
observe: '^0.13.1'
angular2: '^2.0.0-beta.12'
browser: '^0.10.0'
transformers:
- angular2/transform/codegen:
platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
- angular2/transform/reflection_remover:
$include:
- web/background_index.dart
- web/index.dart
- angular2/transform/deferred_rewriter:
# No playground apps use deferred imports, but in general
# all libraries with deferred imports should be included.
$include: []
- $dart2js:
minify: false
commandLineOptions:
- --show-package-warnings
- --trust-type-annotations
- --trust-primitives
- --enable-experimental-mirrors
web/index.html
<html>
<title>Hello Angular 2.0</title>
<style>
.sample-area {
text-align: center;
margin: 5px;
height: 50px;
line-height: 50px;
border-radius: 5px;
border: 1px solid #d0d0d0;
}
.sample-area:focus {
border: 1px solid blue;
color: blue;
font-weight: bold;
}
</style>
<body>
<hello-app>
Loading...
</hello-app>
<script src="index.dart" type="application/dart"></script>
<script src="packages/browser/dart.js" type="text/javascript"></script>
</body>
</html>
web/index.dart
library angular2.examples.web_workers.kitchen_sink.index;
import "package:angular2/platform/worker_render.dart";
import "package:angular2/core.dart" show AngularEntrypoint, platform;
@AngularEntrypoint()
main() {
platform([WORKER_RENDER_PLATFORM])
.asyncApplication(initIsolate("background_index.dart"));
}
web/index_common.dart
import 'package:angular2/core.dart'
show Renderer, ElementRef, Component, Directive, Injectable;
import 'package:angular2/src/facade/lang.dart' show StringWrapper;
import 'dart:html' show KeyboardEvent;
// A service available to the Injector, used by the HelloCmp component.
@Injectable()
class GreetingService {
String greeting = 'hello';
}
// Directives are light-weight. They don't allow new
// expression contexts (use @Component for those needs).
@Directive(selector: '[red]')
class RedDec {
// ElementRef is always injectable and it wraps the element on which the
// directive was found by the compiler.
constructor(ElementRef el, Renderer renderer) {
renderer.setElementStyle(el.nativeElement, 'color', 'red');
}
// constructor(renderer: Renderer) {}
}
// Angular 2.0 supports 2 basic types of directives:
// - Component - the basic building blocks of Angular 2.0 apps. Backed by
// ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
// - Directive - add behavior to existing elements.
// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
// 2.0 component.
@Component(
// The Selector prop tells Angular on which elements to instantiate this
// class. The syntax supported is a basic subset of CSS selectors, for example
// 'element', '[attr]', [attr=foo]', etc.
selector: 'hello-app',
// These are services that would be created if a class in the component's
// template tries to inject them.
viewProviders: const [GreetingService],
// The template for the component.
// Expressions in the template (like {{greeting}}) are evaluated in the
// context of the HelloCmp class below.
template:
r'''<div class="greeting">{{greeting}} <span red>world</span>!</div>
<button class="changeButton" (click)="changeGreeting()">change greeting</button>
<div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>''',
// All directives used in the template need to be specified. This allows for
// modularity (RedDec can only be used in this template)
// and better tooling (the template can be invalidated if the attribute is
// misspelled).
directives: const [RedDec])
class HelloCmp {
String greeting;
String lastKey = '(none)';
HelloCmp(GreetingService service) {
this.greeting = service.greeting;
}
void changeGreeting() {
greeting = 'howdy';
}
void onKeyDown(KeyboardEvent event) {
lastKey = StringWrapper.fromCharCode(event.keyCode);
}
}
I also published the working example to https://github.com/bwu-dart-playground/dart_playground/tree/master/angular2/web_workers/kitchen_sink
Hint
I had to use CtrlF5 to make it work otherwise the newest version wasn't loaded.
