Question

我正在使用AngularJS Seed，我希望看到Web Worker的工作实现。

我想让一个简单的Web Worker工作以便理解它，但我遇到了一个功能问题。

我在 services.js 中有Web Worker代码，如下所示：

'use strict';

/* Services */
var app = angular.module('myApp.services', []).

app.factory("HelloWorldService",['$q',function($q){

    var worker = new Worker('js/doWork.js');
    var defer;
    worker.addEventListener('message', function(e) {
      console.log('Worker said: ', e.data);
      defer.resolve(e.data);
    }, false);

    return {
        doWork : function(myData){
            defer = $q.defer();
            worker.postMessage(myData); // Send data to our worker. 
            return defer.promise;
        }
    };

}]);

在 js 文件夹中，我有一个 doWork.js 文件，其内容为：

self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

我的 controllers.js 文件为空，看起来像这样：

'use strict';

/* Controllers */
var app = angular.module("myApp.controllers",[]);

app.controller('MyCtrl1', [ '$scope', function($scope) {


}]).controller('MyCtrl2', [ '$scope', function($scope) {


}]);

我想要的是查看Web Worker的输出。

我在此设置中遇到的错误是：

未捕获的TypeError：无法调用未定义的方法'factory'

Answer 1

您有语法错误？

变化

/* Services */
var app = angular.module('myApp.services', []).

到

/* Services */
var app = angular.module('myApp.services', []);

Answer 2

您需要有一些东西来解决从您的服务返回的承诺。

的内容

var promise = HelloWorldService.doWork( input );
promise.then( function( allWentGoodMessage ){
    // green path code goes here
}, function( somethingWentBadMessage ){
    // error handling code goes here
} );

此外，您需要将服务注入调用服务的控制器。

看一下this post，了解AngularJS中处理网络工作者的另一种方式。

您可能还想了解承诺实施，$q in AngularJS

如何在AngularJS中使用Web Worker？

2 个答案: