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

Question

我想通过将现有代码转换为ES6(如本视频中所推荐的)开始准备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对象),这就是我想要'class-ify'的东西.但由于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('/ api/endpoint')是否是有效的ES6.它似乎通常在babel变换期间起作用.

---

我这样做了吗？

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