我正在构建一个带有 Angular 的 SPA 应用程序，我希望我的 Angular 服务“WebService”与网络工作者共享。目标是共享一个“WebService”，以便我可以在后台（在网络工作者中）和前端（角度应用程序）中使用相同的服务。 这可行吗？
附加信息： 这里的想法是同步远程服务器上的数据，因此您的主应用程序使用“在线|离线”模式，将数据保存到本地网络存储和|或远程服务器（使用“ WebService") 和 worker 透明地使用同一个服务来同步数据...
您能否展示一些代码来在工作人员中运行应用程序？ 感谢您的反馈
【问题讨论】：
标签： angularjs web-worker
是的，这是可能的，但请考虑您将遇到的所有问题。您将拥有两个不同的 Angular 应用程序、两个不同的上下文（意味着只能共享外部数据），而在一个上下文（服务）中，绝对不需要 Angular 的 99% 功能。
您没有具体说明您打算做什么，但我强烈建议您考虑其他选择。此处的标准方法是使用服务器并具有多个 API 端点，这些端点将起到您提到的服务的作用。但是，如果您需要与服务进行持续通信，也许您可以使用 Web 套接字。
您可能应该用更多信息更新您的问题，因为在这一点上，我真的看不出让另一个应用程序作为网络运行只是为了能够使用服务的任何优势。
【讨论】：
是的，这是可能的。通过对 web worker 环境的一些修改，您可以在 web worker 中运行 Angular，并拥有一个在前台和 worker Angular 应用程序中都使用的模块。这个答案接受并扩展来自another of my answers regarding unit testing的代码
在主应用程序中，在工厂/服务中，您可以拥有类似的东西
var worker = new $window.Worker('worker.js');
然后在worker.js 中，您可以修改全局范围以使Angular 加载：
// 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：
angular.module('shared-module', [])
.factory('SharedFactory', function() {
return {
myFunc: function() {
return 'some-data';
}
};
});
在worker-app.js，你可以定义主应用，使用共享模块
var workerApp = angular.module('worker-app', ['shared-module']);
将共享组件注入到工作应用程序的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
});
为了确认，shared-module 在前台和工作应用程序中的实例是不同的。
【讨论】：