$resource instance methods

[ilanbiala]

It would be nice to develop $resource with some OOP class functionality such as instance methods. Take this code:

angular.module('app', ['ngResource'])
  .factory('PanelUser', ['$resource', function($resource) {
    return $resource('/api/panel/users/:userId', {
      userId: '@_id'
    }, {
      invite: {
        method: 'POST'
      },
      hasAuthorization: {
        url: '/api/panel/auth/:user',
        params: {
          user: '@user'
        },
        method: 'POST'
      }
    });
  }]);

Now say I instantiate a user var user = new PanelUser(); How can I call user.hasAuthorization() to do some checks on the client. I don't need to make requests to the server, but I need to be able to do it on each user as an instance method. It seems like this functionality isn't present, is there some way to make it a part?

[gkalpak]

Each method is available on the instances with the $ prefix (although only "non-GET" methods actually make sense (usually)). E.g.: user.$hasInvitation()

That said, because $resource is meant for interacting with remote data-sources, all class or instance methods will submit HTTP requests.
If you want other methods to be available on instances (e.g. not related to interacting with the data-source), you can use the resource's prototype:

  .factory('PanelUser', ['$resource', function($resource) {
    var PanelUser = $resource('/api/panel/users/:userId', {
      userId: '@_id'
    }, {
      invite: {
        method: 'POST'
      },
      hasAuthorization: {
        url: '/api/panel/auth/:user',
        params: {
          user: '@user'
        },
        method: 'POST'
      }
    });

    PanelUser.prototype.someLocalFunc = function () {
      console.log(this._id);
    };

    return PanelUser;
  }]);

Demo fiddle

[ilanbiala]

@gkalpak thanks for the explanation. Is this something that is going to be considered more for Angular 2.0's $resource module?

[gkalpak]

Everything is going to be considered more for Angular 2.0, so... 😄
This "consideration" is going to be part of the Data Persistence implementation and more info can be found on the relevant design doc (very interesting read imo).

[pkozlowski-opensource]

@ilanbiala we could add some sugar for this but I'm not sure if it is worth it (I mean - additional code in core, new API etc.). I think that what @gkalpak is proposing here is the way to go about things today and it isn't that verbose, IMO.

Putting it in backlog, if anyone feels strongly about adding some convenience method here and can prepare a minimal patch - why not. But this can be easily done today - I mean, just extend the prototype of a generated Resource with all the methods you might need.

[bathos]

You can already do this -- well, sort of. Resource is a constructor, and you can do this:

// (Returned from factory):

class MyResource extends $resource(path, params, staticDefs) {
  constructor() {
    super();

    // set some default properties here! awesome!
  }

  someMethod() {
    return true;
  }
}

// (...)

const myResource = new MyResource();
assert(myResource.someMethod());
assert(myResource.$get);
// tears of joy

The Angular docs show examples of using new SomeResource to create new instances, so it makes sense that this works. Everything's great -- except...

MyResouce.get().$promise.then(myResource =>
  assert(myResource.someMethod()); // <-- fails
);

I could be mistaken, but I think it's because of this:

https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L569

The line is

var value = isInstanceCall ? data : (action.isArray ? [] : new Resource(data));

instead of

var value = isInstanceCall ? data : (action.isArray ? [] : new this(data));

Would changing that make sense, or am I on the wrong track here?

[gkalpak]

I'm not sure $resource's return value is extensible (in the "class" sense). It has some "static" methods.
But since $resource is a factory, you could wrap your own factory around it (as shown in #10692 (comment)).

[bathos]

@gkalpak The return value of $resource is a constructor which has both static and prototype methods. I ended up doing a local rewrite of ngResource that fixed the this-vs-Resource issue among some other changes; it worked. I think the reference to Resource in that line (as well as the non-array one) is an error; if one wants to be very safe, it could confirm that this is indeed a Resource before instantiating it, but it shouldn't be hijacking the prototype chain by using a direct reference like that since you end up with some things returning your class and others returning the ancestor class.

[gkalpak]

The problem I see is with non-instance/class/static methods, where this is by virtue not pointing to an instance. How would you get hold of the correct constructor ?

In any case, it would be awesome if you could submit a PR with a fix (and tests that show it working) 😃

[bathos]

I'll put something together, @gkalpak -- for some reason it didn't even occur to me that I could contribute to angular myself. As for confirming you've got the right this, the following logic determines the value of the constructor which will be instantiated with new resource results:

• if !this, the method is being called divorced from any context. The constructor to use is, by necessity, Resource.
• if this instanceof Resource, we are being called from an instance of Resource, which as a category includes instances of any subclasses of Resource. The constructor to use is this.constructor.
• if this.prototype instanceof Resource, we are being called from a constructor which is or inherits from Resource. The constructor to use is this.

(If it helps to see what I mean -- in "static methods, where this is by virtue not pointing to an instance", this is still just as useful -- it points to the constructor)

[ilanbiala]

@bathos @gkalpak did anything ever happen with this?