Mise à jour 3
soutien des travailleurs Web a été retiré de Dart Angular2 lorsque le projet a été divisé du tapuscrit. Il semble y avoir des plans pour ajouter du support quand DDC et Bazel seront disponibles et permettront de développer avec Chrome au lieu de Dartium.
Mise à jour 2
Il y a quelques exemples de base dans
https://github.com/angular/angular/blob/master/modules/angular2/docs/web_workers/web_workers.md#bootstrapping-a-webworker-application
mais ils semblent pas à jour.
Exemple de travail - kitchen_sink
Ci-dessous le code de l'exemple de https://github.com/angular/angular/tree/master/modules/playground/src/web_workers/kitchen_sink qui est complété et les pièces manquantes traduits du tapuscrit à Dart lorsque angulaire est construit (Voir aussi
- 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);
}
}
J'ai aussi publié l'exemple de travail à https://github.com/bwu-dart-playground/dart_playground/tree/master/angular2/web_workers/kitchen_sink
Conseil
je devais utiliser Ctrl F5 pour le faire fonctionner autrement la nouvelle version n'a pas été chargée.
Merci beaucoup! –
J'ai prévu de vérifier WebWorkers dans Angular2 pendant un certain temps, mais la meilleure motivation est habituellement StackOverflow questions ;-) Merci d'avoir posé la question! –
Je suis finalement arrivé au point où je pensais que "ng2 a des web workers ... je pourrais les utiliser dans ce projet" et ensuite je me suis heurté à des murs de briques. Je suis content qu'on puisse s'entraider, je suppose. –