是否可以在 Web Worker 中运行 Angular? [英] Is it possible to run Angular in a web worker?

问题描述

我正在构建一个带有 angular 的 SPA 应用程序，我希望将我的 Angular 服务WebService"与网络工作者共享.目标是共享一个WebService"，以便我可以在后台(在 Web Worker 中)和前端(在 angular 应用程序中)使用相同的服务.这可行吗?

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...

你能展示一些代码来在一个工人中运行一个应用程序吗?感谢您的反馈

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

推荐答案

是的，这是可能的.通过对 Web Worker 环境的一些破解，您可以在 Web Worker 中运行 Angular，并拥有一个在前台和工作 Angular 应用程序中使用的模块.此答案采用并扩展了 我关于单元测试的另一个答案

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 中，您可以修改全局范围足以让 Angular 加载:

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']);

你可以像定义其他任何东西一样定义shared-module:

And you can define shared-module just like any other:

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

在worker-app.js中，你可以定义主应用程序，使用共享模块

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

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

例如将共享组件注入到工作应用程序的 run 回调中.

injecting the shared components, for example, into the run callback of the worker app.

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

在前台 Angular 应用程序中，您可以通过通常的脚本标签包含 shared-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
});

确认一下，前台和worker应用中shared-module的实例是不同的.

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

这篇关于是否可以在 Web Worker 中运行 Angular?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！