如何角$资源工厂（不是服务）转换为ES6 [英] How to convert an angular $resource factory (not service) to ES6
问题描述
我想通过在转换现有的code到ES6（如
I'd like to start preparing for Angular 2 by converting existing code over to ES6 (as recommended in this video).
不过，我马上难倒，或者不知道如何着手。在视频中，他们表现出的服务的转换。在我的code我想一个工厂，试图将其转换为ES6时，这是类似的，但实际上是相当不同的转换。该服务容易追随类实例化的方法，但工厂需要返回注入的对象。
However, I'm immediately stumped, or perhaps unsure about how to proceed. In the video they show a conversion of a service. In my code I'm trying to convert a factory, which is similar but actually quite different when trying to convert to ES6. The service easily follows the class instantiation method, but factories need to return the injected object.
我的code开始是这样的：
My code started like this:
melange.factory('SomeService', ['$resource', function ($resource) {
var someResource = $resource('/api/endpoint');
someResource.customQuery = function() {
// ... do some custom stuff
};
return someResource;
}]);
我的第一个失败的尝试 - 于是，我立即开始超过转换为ES6以及与此想出了：
My First Failed Attempt - So I immediately started to convert over to ES6 and came up with this:
// 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;
}
}
但是，这是不对的......构造函数返回一个资源。
But that's not right... the constructor is returning a resource.
也许成功尝试 - 所以它是真正的资源（或一个真正的路线对象）是我想'类IFY'的东西。但由于资源对象有一个特定的接口已方法，我需要我的类来扩展基础资源的对象。但是，这是通过调用$资源工厂函数动态生成的。所以，我想出了这个，也许正确的code：
Maybe Success Attempt - So it's really the Resource (or really a Route object) that is the thing I want to 'class-ify'. But since a Resource object has a specific interface already of methods, I'll need my class to extend the base Resource object. But that is generated dynamically by calling the $resource factory function. So I came up with this maybe correct code:
melange.service('SomeService', ['$resource', SomeResource]);
var $resource = angular.injector().get('$resource');
class SomeResource extend $resource('/api/endpoint') {
customQuery() {
// ... do some custom stuff
}
}
所以，我必须说出我的课前得到注射器$资源。我只是不知道，如果延长$资源（'/ API /端点'）为偶数有效ES6。 <一href=\"http://babeljs.io/repl/#?experimental=true&playground=false&evaluate=true&loose=false&spec=false&$c$c=class%20BaseFoo%20%7B%0A%20%20foo()%7B%0A%20%20%20%20return%20%22foo%20-%20base%22%3B%0A%20%20%7D%0A%7D%0Aclass%20BaseBar%20%7B%0A%20%20bar()%7B%0A%20%20%20%20return%20%22bar%20-%20base%22%3B%0A%20%20%7D%0A%7D%0Avar%20baseClasses%20%3D%20%7B%20BaseFoo%2C%20BaseBar%20%7D%3B%0Afunction%20getBaseClass(thing)%7B%0A%20%20return%20baseClasses%5B%22Base%22%20%2B%20thing%5D%3B%0A%7D%0A%0A%2F%2F%20notice%20how%20I'm%20using%20an%20ex$p$pssion%20for%20extending%0Aclass%20MyFoo%20extends%20getBaseClass(%22Foo%22)%20%7B%20%7D%0Avar%20myFoo%20%3D%20new%20MyFoo()%3B%0Aconsole.log(myFoo.foo())%3B\">It似乎通天transpile虽然期间一般工作。
我这样做对吗？
推荐答案
您可以不容易与工厂使用ES6类，所以我会建议做的一切服务。
You can't use ES6 classes as easily with factories, so I would advise making everything a service.
angular.module('test', [])
.service('SomeService', ['$resource', class SomeService {
constructor($resource) {
this.resource = $resource('/api/something');
}
customQuery() {
return doSomething(this.resource);
}
}]);
下面是它的外观时，它的transpiled： http://goo.gl/8Q4c8b
Here's how it looks when it's transpiled: http://goo.gl/8Q4c8b
下面是一个工作plunkr与transpiled $ C $内C：的http：// plnkr.co/edit/RS48OerLYQCERPYzbuuM?p=$p$pview
Here's a working plunkr with the transpiled code inside: http://plnkr.co/edit/RS48OerLYQCERPYzbuuM?p=preview
这篇关于如何角$资源工厂（不是服务）转换为ES6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
