如何将 angular $resource 工厂（不是服务）转换为 ES6

Question

我想通过将现有代码转换为 ES6（按照 this video 中的建议）开始为 Angular 2 做准备。

但是，我立即感到困惑，或者不确定如何继续。在视频中，他们展示了服务的转换。在我的代码中，我试图转换一个工厂，这在尝试转换为 ES6 时很相似但实际上完全不同。该服务很容易遵循 class 实例化方法，但工厂需要 return 注入对象。

我的代码是这样开始的：

melange.factory('SomeService', ['$resource', function ($resource) {
  var someResource = $resource('/api/endpoint');

  someResource.customQuery = function() {
    // ... do some custom stuff
  };

  return someResource;
}]);

我的第一次失败尝试 - 所以我立即开始转换到 ES6 并想到了这个：

// notice I changed this to service instead of factory
melange.service('SomeService', ['$resource', SomeService]);

class SomeService {
  constructor ($resource) {
    var someResource = $resource('/api/endpoint');

    someResource.customQuery = function() {
      // ... do some custom stuff
    };

    return someResource;
  }
}

但这是不对的...构造函数正在 returning 资源。

也许是成功尝试 - 所以我真正想要 'class-ify' 的是资源（或真正的 Route 对象）。但是由于 Resource 对象已经有一个特定的方法接口，我需要 class 来扩展基础 Resource 对象。但这是通过调用 $resource 工厂函数动态生成的。所以我想出了这个可能是正确的代码：

melange.service('SomeService', ['$resource', SomeResource]);
var $resource = angular.injector().get('$resource');

class SomeResource extend $resource('/api/endpoint') {
  customQuery() {
    // ... do some custom stuff
  }
}

所以我必须在声明我的 class 之前从注入器获取 $resource。我只是不确定扩展 $resource('/api/endpoint') 是否甚至是有效的 ES6。 It seems to work generally during babel transpile though.

我这样做对吗？

Answer 1

你不能像工厂一样轻松地使用 ES6 类，所以我建议将一切都变成服务。

angular.module('test', [])
.service('SomeService', ['$resource', class SomeService {
  constructor($resource) {
    this.resource = $resource('/api/something');
  }
  customQuery() {
    return doSomething(this.resource);
  }
}]);

转译后的样子如下：http://goo.gl/8Q4c8b

这是一个工作 plunkr，里面有转译的代码：http://plnkr.co/edit/RS48OerLYQCERPYzbuuM?p=preview

Answer 2

刚遇到同样的问题。并且理解这里没有必要处理 class（如果我错了请纠正我），因为 $resource 工厂通常只用于 return 本身。因此，请考虑以下选项：

export default angular.module('service.smth', [])
  .service('SomeService', $resource => $resource('/api/something', {}, {
    customQuery: { ... }
  }))
  .name;

如何将 angular $resource 工厂（不是服务）转换为 ES6

How to convert an angular $resource factory (not service) to ES6

angularjs

ecmascript-6