未定义的服务提供者 Angular 1.6 和 es6

Question

我正在尝试创建 rest api，以便使用 Angular 1.6 和 es6 获取发布/获取一些数据。 并在组件中获得未定义的 SylabusService

TypeError: 无法读取未定义的属性“保存”

。服务文件

'use strict';
import angular from 'angular';

export function SylabusService($resource) {
  'ngInject';
  return $resource('/api/sylabuss/:id', {
      id: '@_id'
    })
  };

。组件文件

你可以在第 9 行看到，我正在尝试记录它，但返回 undefined

'use strict';
const angular = require('angular');

const uiRouter = require('angular-ui-router');

import routes from './sylabus.routes';
import SylabusService from './sylabus.service';

export class SylabusComponent {
  /*@ngInject*/
  constructor($scope, SylabusService) {
    console.log(SylabusService); //undefined
      $scope.createSylabus = function(){
        SylabusService.save($scope.newSylaBus.title, function(sylabus){
          console.log(sylabus);
        })
    }
  }
}
SylabusComponent.$inject=['$scope'];
export default angular.module('aSpaApp.sylabus', [uiRouter])
  .config(routes)
  .component('sylabus', {
    template: require('./sylabus.html'),
    controller: SylabusComponent,
    controllerAs: 'sylabusCtrl'
  })
  .factory('service',SylabusService)
  .name;

我做错了什么？

Answer 1

您的SylabusService 实际上称为service，因此请将其添加到您注入依赖项的部分：

SylabusComponent.$inject=['$scope', 'service'];

或者（也许更好）将服务命名为 SylabusService 并注入：

SylabusComponent.$inject=['$scope', 'SylabusService'];
export default angular.module('aSpaApp.sylabus', [uiRouter])
  .config(routes)
  .component('sylabus', {
    template: require('./sylabus.html'),
    controller: SylabusComponent,
    controllerAs: 'sylabusCtrl'
  })
  .factory('SylabusService',SylabusService) // <-- Name the service here
  .name;