Web workers in Angular 2 Dart

后端未结

关注

 2  1190

一整个雨季

I\'m experimenting with angular 2 for a large project that would benefit from handing off tasks to web workers.

I\'ve found examples of ng2 web workers for JavaScrip

相关标签:

2条回答

囚心锁ツ

2021-01-01 06:21

last link from guenthers answer seems to be broken. found it under: https://github.com/bwu-dart-playground/angular2/tree/master/web_workers/kitchen_sink

0 讨论(0)
发布评论:

提交评论
- 加载中...

孤独总比滥情好

2021-01-01 06:25

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.

0 讨论(0)