I'm currently developing a sample application using AngularJS 1.5.4, built on angular seed, EcmaScript 6, and with a node.js web server.
For routing, I am following the guidelines provided here: https://docs.angularjs.org/guide/component-router. However, I encountered an error with a service when it is called from the component.
The specific error message reads:
etsy.controller.es6:17 Uncaught ReferenceError: EtsyService is not defined
Below are the relevant code snippets:
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
(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
});
})();
I've been researching this issue extensively but I haven't been able to pinpoint what I might be doing incorrectly. Any suggestions or insights would be greatly appreciated.
Thank you