2013-08-08 10 views
6

Ich benutze AngularJS Seed und ich möchte eine funktionierende Implementierung eines Web Worker sehen.Wie benutze ich einen Web Worker in AngularJS?

Ich möchte einen einfachen Web Worker arbeiten, um es zu verstehen, aber ich stoße auf ein Problem mit der Funktionalität.

Ich habe die Web Worker-Code in den services.js wie so:

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

}]); 

In den js Ordner Ich habe eine Datei doWork.js und ihr Inhalt sind:

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

Meine controllers.js Datei ist leer und es sieht so aus:

'use strict'; 

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

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


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


}]); 

Was ich will, ist die Ausgabe des Web Worker zu sehen.

Der Fehler, den ich mit diesem Setup erhalten ist:

Uncaught Typeerror: Der Anruf kann nicht Methode ‚Fabrik‘ undefinierter

Antwort

2

Sie haben einen Syntaxfehler?

Änderung

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

zu

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

Ich reparierte diesen Fehler, danke! Keine Fehler mehr, aber ich sehe immer noch keine Nachricht von meinem Web Worker. In der Konsole wird nichts angezeigt, das bestätigen würde, dass der Web Worker etwas getan hat. – acudars

+5

Haben Sie dem Arbeiter gesagt, etwas zu tun? Vielleicht sitzt es nur und wartet auf dich. Sie müssen Ihren $ HelloWorldService in einen Controller injizieren und $ HelloWorldService.doWork ("etwas") aufrufen. 'app.controller ('MyCtrl1' [ '$ scope', '$ Helloworld', function ($ scope, $ Helloworld) { $ HelloWorldService.doWork ("etwas"); }]). Regler ('MyCtrl2', ['$ scope', Funktion ($ scope) { }]) '' – coreyb

1

Sie müssen etwas haben, das Versprechen von Ihrem Dienst zurück zu lösen. Etwas in die gleiche Richtung wie

Außerdem müssen Sie den Dienst in den Controller injizieren, der den Dienst aufruft.

Werfen Sie einen Blick auf this post für eine andere Art des Umgangs mit Web-Arbeiter in AngularJS.

Und Sie möchten vielleicht auch mit dem Versprechen Umsetzung kennen lernen, $q in AngularJS