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

Question

I want to start preparing for Angular 2, converting existing code to ES6 (as recommended in this video ).

However, I am at an impasse right away or maybe I don’t know how to proceed. In the video, they show the transformation of the service. In my code, I am trying to convert a factory that is similar, but actually quite different when trying to convert to ES6. The service follows the method of instantiating the class easily, but factories should return the entered object.

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

---

My first unsuccessful attempt. So I immediately started converting to ES6 and came up with the following:

 // 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 this is not so ... the constructor returns the resource.

---

Maybe an attempt at success is really a resource (or indeed a Route ), which is what I want "class-ify". But since the Resource object has a certain interface already from the methods, I will need my class to extend the base resource. But this is generated dynamically by calling the $ resource factory function. So I came up with this possibly correct code:

 melange.service('SomeService', ['$resource', SomeResource]); var $resource = angular.injector().get('$resource'); class SomeResource extend $resource('/api/endpoint') { customQuery() { // ... do some custom stuff } } 

Thus, I must get $ resource from the injector before declaring the class. I'm just not sure if the $ resource extension ('/ api / endpoint') is even true with ES6. It seems to work at all during babel forwarding, though .

---

Am I doing it right?

Answer 1

You cannot easily use ES6 classes with factories, so I would advise doing all the maintenance.

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

Here's what it looks like when it translates: http://goo.gl/8Q4c8b

Here plunkr works with the converted code inside: http://plnkr.co/edit/RS48OerLYQCERPYzbuuM?p=preview

Answer 2

Just ran into the same problem. And I realized that there is no need to deal with the class (please correct me if I'm wrong), since usually the $ resource factory is used only for return. Therefore, consider this option below:

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