是否可以在网络工作者中运行Angular？

Question

我正在构建一个带有角度的SPA应用程序，我希望将我的Angular服务“WebService”与网络工作者共享。目标是共享一个“WebService”，以便我可以在后台（在web worker中）和前端（角度应用程序）中使用相同的服务。 这可行吗？

附加信息： 这里的想法是为了远程服务器上的数据同步，所以你的主应用程序使用“在线|离线”模式，将数据保存到本地网络存储和|或到远程服务器（使用“Web服务”）和工作人员透明地使用相同的服务来同步数据...

你可以显示一些代码来运行一个应用程序的工人？ 谢谢您的反馈意见

Answer 1

是的，这是可能的，但想想你会遇到的所有问题。你会有两个不同的Angular应用程序，两个不同的上下文（意味着只有外部数据可以共享），并且在一个上下文中（服务），绝对不需要99％的Angular功能。

你没有描述你打算做什么，但我强烈建议你考虑其他选择。这里的标准方法是使用一个服务器，并且有许多API端点，它将按照您提到的服务进行排序。但是，如果您需要与服务进行持续的通信，也许您可​​以使用网络套接字。

您应该更新您的问题并提供更多信息，因为在这一点上，我确实无法看到将另一个应用作为网络运行的任何优势，只是为了能够使用服务。

Answer 2

是的，这是可能的。通过对Web Worker环境的一些攻击，您可以在Web Worker中运行Angular，并在前台和工作者Angular应用程序中使用一个模块。这个答案需要和延伸，从another of my answers regarding unit testing

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

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

而且你可以定义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); 
    }; 
}); 

在前台角的应用程序，你可以通过常用的脚本标签包括shared-module.js，并使用依赖注入来访问它的组件和往常一样

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

要确认的shared-module的情况下，在前台和工作应用程序是不同的。