Web workers in Angular 2 Dart

2019-02-05 09:00发布

站内问答 / Angular
1833 2 4

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 JavaScript and TypeScript but struggling to convert these into dart equivalent.

Has anyone done this? Or know how to do this?

Below is my current main.dart bootstrap file, the AppComponent should have access to the UI, and the CustomerService work in a worker.

import 'package:angular2/platform/browser.dart';
import 'package:angular2/web_worker/ui.dart';

import 'package:ngMegatron/app_component.dart';
import 'package:ngMegatron/services/customer.dart';

main() {
  bootstrap(AppComponent, [CustomerService]);
}

2条回答
倾城　Initia
2楼-- · 2019-02-05 09:26

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) 举报
叼着烟拽天下
3楼-- · 2019-02-05 09:39

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)