title: How to convert an angular $resource factory (not service) to ES6
body: <p>I'd like to start preparing for Angular 2 by converting existing code over to ES6 (as recommended in <a href="https://youtu.be/pai1ZdFI2dg?t=4m9s">this video</a>).</p>
  
  <p>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.</p>
  
  <p>My code started like this:</p>
  
  <pre><code>melange.factory('SomeService', ['$resource', function ($resource) {
    var someResource = $resource('/api/endpoint');
  
    someResource.customQuery = function() {
      // ... do some custom stuff
    };
  
    return someResource;
  }]);
  </code></pre>
  
  <hr>
  
  <p>My First Failed Attempt - So I immediately started to convert over to ES6 and came up with this:</p>
  
  <pre><code>// 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;
    }
  }
  </code></pre>
  
  <p>But that's not right... the constructor is returning a resource. </p>
  
  <hr>
  
  <p>Maybe Success Attempt - So it's really the Resource (or really a <a href="https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L413">Route</a> 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:</p>
  
  <pre><code>melange.service('SomeService', ['$resource', SomeResource]);
  var $resource = angular.injector().get('$resource');
  
  class SomeResource extend $resource('/api/endpoint') {
    customQuery() {
      // ... do some custom stuff
    }
  }
  </code></pre>
  
  <p>So I have to get $resource from the injector before declaring my class. I'm just not sure if extending $resource('/api/endpoint') is even valid ES6. <a href="http://babeljs.io/repl/#?experimental=true&amp;playground=false&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;code=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&#39;m%20using%20an%20expression%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 seems to work generally during babel transpile though</a>.</p>
  
  <hr>
  
  <p>Am I doing this right?</p>