Question

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

但是，我立刻难倒，或者可能不确定如何继续。在视频中，它们显示了服务的转换。在我的代码中，我尝试转换工厂，这在尝试转换为ES6时类似但实际上完全不同。该服务很容易遵循类实例化方法，但工厂需要返回注入的对象。

我的代码是这样开始的：

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

但那不对......构造函数正在返回一个资源。

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

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

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

所以我必须在宣布我的课程之前从注射器获得$ resource。我不确定是否扩展$ resource（＆＃39; / api / endpoint＆＃39;）甚至是有效的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);
  }
}]);

以下是它的描述：＃{3}}

这里有一个工作的plunkr，其中包含已编译的代码：http://goo.gl/8Q4c8b

Answer 2

刚遇到同样的问题。并且理解这里没有必要处理课程（如果我错了请纠正我），因为通常$ resource factory只是用来返回自己。请考虑以下选项：

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

如何将角度$资源工厂（非服务）转换为ES6

2 个答案: