웹 작업자에서 Angular를 실행할 수 있습니까?

Question

각도가있는 SPA 앱을 제작 중이며 앵귤러 서비스 "웹 서비스"를 웹 작업자와 공유하고 싶습니다. 목적은 하나의 "WebService"를 공유하여 웹 작업자와 프론트 엔드 (각진 응용 프로그램)에서 동일한 서비스를 사용할 수있게하는 것입니다. 이것이 가능합니까?

추가 정보 : 여기에있는 아이디어는 원격 서버의 데이터 동기화를위한 것이므로 "온라인 | 오프라인"모드로 작업하는 기본 응용 프로그램을 가지고 로컬 웹 저장소에 데이터를 저장하고 | ("WebService"를 사용하는) 원격 서버와 작업자가 동일한 서비스를 사용하여 데이터를 동기화하면 ...

작업자에게 응용 프로그램을 실행하는 코드를 보여줄 수 있습니까? 의견에 감사드립니다.

Answer 1

예, 가능하지만 발생하는 모든 문제를 생각해보십시오. 두 가지 Angular 앱, 서로 다른 두 가지 컨텍스트 (외부 데이터 만 공유 할 수 있음)를 가질 수 있으며, 한 가지 컨텍스트 (서비스)에서는 Angular의 기능 중 99 %는 절대 필요하지 않습니다.

정확히 무엇을 할 계획이 있는지 설명하지 않았지만 다른 옵션을 고려해 보시기 바랍니다. 여기서 표준 접근법은 서버를 사용하고 언급 한 서비스로서의 기능을 수행 할 API 엔드 포인트를 가질 수 있습니다. 그러나 서비스와 계속 통신해야하는 경우 웹 소켓을 사용할 수 있습니다.

질문을 더 많은 정보로 업데이트해야합니다. 왜냐하면이 시점에서는 서비스를 사용하기 위해 웹으로 작동하는 다른 응용 프로그램을 실행하는 데 따른 이점을 실제로 볼 수 없기 때문입니다.

Answer 2

예, 가능합니다. 웹 작업자 환경의 해킹 비트를 사용하면 웹 작업자에서 각도를 실행할 수 있으며 전경 및 작업자 각도 앱에 모두 사용되는 모듈을 사용할 수 있습니다. 이 답변이 소요 및 공장/서비스, 주요 응용 프로그램에서 another of my answers regarding unit testing

의 코드를 확장, 당신은 그런 worker.js, 당신은 각도 얻을만큼 글로벌 범위를 수정할 수 있습니다

var worker = new $window.Worker('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에서는 작업자 응용 프로그램의 run 콜백으로, 예를 들어, 공유 구성 요소를 주입

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

공유 모듈을 사용하여, 주요 응용 프로그램을 정의 할 수 있습니다. 전경 각도 응용 프로그램에서

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의 인스턴스를 구성 요소에 액세스 할 의존성 주입을 사용할 수 있습니다 및 근로자 앱이 다릅니다.