是否有可能运行一个网络工作者角？ [英] Is it possible to run Angular in a web worker?

问题描述

我建立具有角的水疗中心应用程序，我想有我的角度服务的WebService一个网络工作者共享。目标是具有一个的WebService共享，这样我可以在背景（在web工人）和前端（的角应用）使用相同的服务。
这是可行的？

I am build a SPA app with angular and I would like to have my Angular service "WebService" shared with a web worker. The objective is to have one "WebService" shared so that I can use the same service in the background (in the web worker) and in the front-end (the angular app). Is this feasible ?

附加信息：
这里的想法是远程服务器上的数据同步，让你拥有主要的应用程序有一个在线|离线的工作模式下，数据到本地网络存储保存和|或远程服务器（使用 WebService的）和工人使用透明相同的服务来同步数据...

Additional info: the idea here is for the synchronisation of data on the remote server, so you have the main app working with an "online|offline" mode, saving the data to the local web-storage and|or to the remote server (using the "WebService") and the worker transparently using the same service to sync the data...

你能不能给一些code运行在一个工人的应用程序？
感谢您的反馈

Could you show some code to run an app in a worker ? Thank you for your feedback

推荐答案

是的，这是可能的。带着几分的网络工作者环境的黑客，可以运行在网络工作者角度，并且具有在前景和工人的角度应用使用的模块。这个答案需要和延伸，并从另一个我对单元测试的答案

Yes, it's possible. With a bit of a hack of the web worker environment, you can run Angular in the web worker, and have a module that is used in both foreground and worker Angular apps. This answer takes and and extends code from another of my answers regarding unit testing

在主要的应用程序，在工厂/服务，你可以有类似

In the main app, in a factory/service, you can have something like

var worker = new $window.Worker('worker.js');

然后在 worker.js ，你可以修改全局范围足以让角加载：

Then in worker.js, you can modify the global scope enough to get Angular to load:

// Angular needs a global window object
self.window = self;

// Skeleton properties to get Angular to load and bootstrap.
self.history = {};
self.document = {
  readyState: 'complete',
  querySelector: function() {},
  createElement: function() {
    return {
      pathname: '',
      setAttribute: function() {}
    }
  }
};

// Load Angular: must be on same domain as this script
self.importScripts('angular.js');

// Put angular on global scope
self.angular = window.angular;

// Standard angular module definitions
self.importScripts('worker-app.js');
self.importScripts('shared-module.js');

// No root element seems to work fine
self.angular.bootstrap(null, ['worker-app']);

你可以定义共享模块就像任何其他的：

angular.module('shared-module', [])
.factory('SharedFactory', function() {
  return {
    myFunc: function() {
      return 'some-data';
    }
  };
});

在工人app.js ，您可以定义主应用程序，使用共享的模块

In worker-app.js, you can define the main app, using the shared module

var workerApp = angular.module('worker-app', ['shared-module']);

注入的共享组件，例如，到工作者应用程序运行回调。

workerApp.run(function(SharedFactory, $window) {
  $window.onmessage = function(e) {
    var workerResult = SharedFactory.myFunc();
    $window.postMessage(workerResult);
  };
});

在前台角应用程序，您可以包括共享module.js 通过脚本程序代码，并使用依赖注入来访问它的组件和往常一样

In the foreground Angular app, you can include shared-module.js via a usual script tag, and use dependency injection to access its components as usual

var foregroundApp = angular.module('forground-app', ['shared-module']);
foregroundApp.controller(function(SharedFactory, $scope) {
  // Use SharedFactory as needed
});

要确认，在前台和工人的应用程序共享模块的情况是不同的。

To confirm, the instances of shared-module in the foreground and worker app are different.

这篇关于是否有可能运行一个网络工作者角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！