angularjs – 是否可以在Web worker中运行Angular？

是的,这是可能的.有了Web工作环境的一点点,您可以在Web worker中运行Angular,并拥有一个在前台和工作者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']);

您可以像任何其他模块一样定义共享模块：

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

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

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

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

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

要确认,前台和工作者应用程序中共享模块的实例是不同的.