Angularjs 可以在web worker中运行Angular吗？

我正在用angular构建一个SPA应用程序，我想让我的angular服务“WebService”与网络工作者共享。我们的目标是共享一个“WebService”，这样我就可以在后台（webworker）和前端（angular应用程序）使用相同的服务。 这是否可行

其他信息： 这里的想法是为了在远程服务器上同步数据，因此您可以让主应用程序以“在线|离线”模式工作，将数据保存到本地web存储和|或远程服务器（使用“web服务”）和工作人员透明地使用相同的服务同步数据

你能展示一些代码来在worker中运行应用程序吗？

---

感谢您的反馈

是的，这是可能的，但请想想您将遇到的所有问题。您将拥有两个不同的Angular应用程序，两个不同的上下文（意味着只有外部数据可以共享），在一个上下文（服务）中，Angular 99%的功能完全不需要

你没有描述你打算做什么，但我强烈建议你考虑其他的选择。这里的标准方法是使用一个服务器，并具有多个API端点，这些端点的功能与您提到的服务类似。但是，如果您需要与服务进行连续通信，也许可以使用web套接字

---

你可能应该用更多信息更新你的问题，因为在这一点上，我真的看不出让另一个应用程序作为web运行只是为了能够使用服务有什么好处。

是的，这是可能的。稍微修改一下web worker环境，您就可以在web worker中运行Angular，并拥有一个可用于前台和worker Angular应用程序的模块。这个答案接受并扩展了源代码

在主应用程序中，在工厂/服务中，您可以使用以下内容

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

然后在

worker.js

中，您可以修改全局范围，使其足以加载：

// 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';
    }
  };
});

在

worker app.js

中，您可以使用共享模块定义主应用程序

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

例如，将共享组件注入worker应用程序的

run

回调

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

在前台Angular应用程序中，您可以通过一个常用的脚本标记包含

shared module.js

，并像往常一样使用依赖项注入来访问其组件

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

---

要确认，前台和worker应用程序中的共享模块的实例不同。

答案非常平滑）请检查：）很好！我甚至不想问你是怎么找到它的你能澄清一下“相同的服务”是指两者中可用的相同代码，还是指相同服务的内存实例中的相同代码？我指的是相同的可用代码…我使用的是Angular 1.2.11，还必须向文档中添加getElementById函数。不确定其他版本是否如此。在那之后，这对我很有效。谢谢@michal如果你能为这段代码提供一个plunker，它将非常有用！