Question

我正在使用AngularJS 1.5.4开发基于角度种子，EcmaScript 6和node.js网络服务器的演示应用。

我正在使用此处所述的组件路由器：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

Answer 2

如果您按照该顺序（服务商和控制器）进行呼叫，那么您将通过创建一个新模块来覆盖该模块：

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

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

    .service('etsyService', EtsyService)

Angular 1.5.4服务未定义

2 个答案: