javascript - Angular 1.5.4 服务未定义

Question

我正在使用 AngularJS 1.5.4 开发一个演示应用程序，该应用程序基于 Angular Seed、EcmaScript 6 和 Node.js Web 服务器。

我正在使用组件路由器，如下所述:https://docs.angularjs.org/guide/component-router当从组件调用服务时，我收到错误。

错误是

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

下面是相关代码

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
    });
})();

我已经在谷歌上搜索了一段时间，但我不明白我做错了什么。有什么想法吗？

谢谢

Answer 1

您需要在 IIFE 内的 etsy.controller.es6 文件中为 EtsyService 定义一个函数。您可以查看指南如何实现 Heroes.js 和 Crisis.js 作为具体示例。 https://docs.angularjs.org/guide/component-router