Angular 1.5.4 Service undefined

Question

Ich arbeite an einer Demo-App mit AngularJS 1.5.4, basierend auf eckigem Seed, EcmaScript 6 und einem node.js Webserver.

Ich verwende Komponenten-Router wie hier beschrieben: https://docs.angularjs.org/guide/component-router und ich bekomme einen Fehler auf einen Service, wenn von der Komponente aufgerufen.

Der Fehler ist

etsy.controller.es6:17 Uncaught ReferenceError: EtsyService is not defined 

Unterhalb der entsprechende Code

index.html

<script src="/bower_components/angular/angular.js"></script> 
<script src="/bower_components/bower-angular-router/angular1/angular_1_router.js"></script> 
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script src="/app.js"></script> 
<script src="/components/core/constants.es6"></script> 
<script src="/components/etsy/etsy.service.es6"></script> 
<script src="/components/etsy/etsy.controller.es6"></script> 

etsy.service.es6

(function() { 
'use strict' 

// variables here ... 

class EtsyService { 
    constructor($http) { 
     _http.set(this, $http); 
    } 

    // methods here ... 

    static etsyServiceFactory($http) { 
     return new EtsyService($http); 
    } 
} 

angular 
    .module('myApp.etsy') 
    .factory('EtsyService', EtsyService.etsyServiceFactory); 
})(); 

etsy.controller.es6 ist

(function() { 
'use strict'; 

class EtsyController { 
    constructor($scope) { 
     $scope.message = 'Hi from the $scope'; 
    } 
} 

angular 
    .module('myApp.etsy', []) 

    .service('etsyService', EtsyService) 

    .component('etsy', { 
     templateUrl: 'components/etsy/etsy.html', 
     controller: EtsyController 
    }); 
})(); 

Ich google dies schon seit einer Weile, aber ich kann nicht verstehen, was ich falsch mache. Irgendeine Idee?

Dank

Answer 1

Sie benötigen eine Funktion für EtsyService in Ihrer etsy.controller.es6 Datei innerhalb des IIFE zu definieren. Sie können nachsehen, wie der Guide helders.js und crisis.js für ein konkretes Beispiel implementiert. https://docs.angularjs.org/guide/component-router

Answer 2

Versuchen Sie die Namensdatei auf EtsyService.js zu ändern, dies sollte funktionieren.

Answer 3

Wenn Sie in dieser Reihenfolge (Servicer und Controller) anrufen, dann überschreiben Sie das Modul durch ein neues zu erstellen:

angular 
    .module('myApp.etsy')// <--------- getting a module 
    .factory('EtsyService', EtsyService.etsyServiceFactory); 

angular 
    .module('myApp.etsy', [])//<--------------- creating a new module 

    .service('etsyService', EtsyService)