It is possible to define an Angular $resource that has always the same default values on creation with new()?

For example if I have the following resource definition:

var Drawer = $resource('/drawer/:drawerId', { drawerId: '@id'});

And the Drawer object needs to have a "socks" property that I want to be always initialized as an empty array [], and maybe some others like 'timesOpened' to 0, or things like that.

The only way to do this would be like:

var newDrawer = new Drawer({ socks: [], timesOpened: 0});

I was thinking about defining in the same service I have for my resource (let's call it drawerService) a default/initialization object like this:

defaultDrawer = { socks: [], timesOpened: 0};

And then when creating the resource:

//New drawer with defaults
var newDrawer = new drawerService.Drawer(drawerService.defaultDrawer);
//New drawer with defaults and some other initialization
var anotherDrawer = new drawerService.Drawer(angular.extend(drawerService.defaultDrawer, {material: 'plastic'});

Is this the only way of doing it?

It is possible to define an Angular $resource that has always the same default values on creation with new()?

For example if I have the following resource definition:

var Drawer = $resource('/drawer/:drawerId', { drawerId: '@id'});

And the Drawer object needs to have a "socks" property that I want to be always initialized as an empty array [], and maybe some others like 'timesOpened' to 0, or things like that.

The only way to do this would be like:

var newDrawer = new Drawer({ socks: [], timesOpened: 0});

I was thinking about defining in the same service I have for my resource (let's call it drawerService) a default/initialization object like this:

defaultDrawer = { socks: [], timesOpened: 0};

And then when creating the resource:

//New drawer with defaults
var newDrawer = new drawerService.Drawer(drawerService.defaultDrawer);
//New drawer with defaults and some other initialization
var anotherDrawer = new drawerService.Drawer(angular.extend(drawerService.defaultDrawer, {material: 'plastic'});

Is this the only way of doing it?

• javascript
• angularjs
• ngresource

Share Improve this question Follow edited May 26, 2015 at 15:29 John Bernardsson asked May 26, 2015 at 15:21 John BernardssonJohn Bernardsson 1,78111 gold badge1717 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13 +50

You are correct, there is no easy way to do this; it is not a supported functionality in Angular. A cleaner way that you might do this is by creating a Drawer factory in your drawerService. It might look something like this:

angular.module('app').factory('drawerService', function() {

    var Drawer = $resource('/drawer/:drawerId', { drawerId: '@id'});

    function drawerFactory(options) {
        var defaults = {
            socks: [],
            timesOpened: 0
        };
        options = angular.extend(defaults, options || {});
        return new Drawer(options);
    }

    return {
        Drawer: Drawer,
        create: drawerFactory
    };
});

This would allow you to create a new Drawer like so:

//New drawer with defaults
var newDrawer = drawerService.create();
//New drawer with defaults and some other initialization
var anotherDrawer = drawerService.create({material: 'plastic'});

It's still not ideal, but it is slightly cleaner and the least evil way I can think of acplishing what you are trying to acplish.

I ran into this problem recently, and this was the first post that came up on Google... The answer provided works, however it is pretty messy, and changes the way that you have to interact with your $resource object. There is a much simpler way :)

angular.module('app').factory('drawerService', function() {
  var drawer = $resource('/drawer/:drawerId', { drawerId: '@id'});

  drawer.prototype.socks = [];
  drawer.prototype.timesOpened = 0;

  return drawer;
}

And then you'd simply create a new object with defaults as follows:

var drawer = new drawerService();

And you can also pass in your own params here too...

var drawer = new drawerService({ material: 'plastic' });

Hope this can help someone in the future :D