Extending an object in javascript/angular

Question

So I have a tree helper object in my angular app that provides a bunch of useful functions for dealing with the many tree structures in the app. This is provided by a factory, so each time some controller (or whatever) asks for a tree helper, it gets its own copy:

angular.module('MainApp').factory('TreeHelperFactory', 
function ($http, $q, $filter, DataService) {
    var treeHelper = new function ($http, $q, $filter, DataService) {
    ...
    code
    ...
})

Now I have a category service that provides various category-related functions, including returning a tree of categories and providing ways to manipulate that tree. So thinking like an OO developer, I reckon that the category service is really like a subclass of my tree helper, so I inject a tree helper instance and then attempt to extend that instance with category-specific functions, naively like this:

angular.module('MainApp').provider('CategoryService',
function() {
    this.$get = function ($http, $q, $filter, DataService, TreeHelperFactory) {
        var catService = TreeHelperFactory; 
        catService.listCategories = function() {...}
        catService.deleteCategory = function(id) {...}
        ... more code...
        return catService;
        }  
    }
);

But this doesn't work. The new properties are not visible when I try to invoke them later, only the tree helper properties of the original factory object. What am I missing and how do I achieve this?

Ilan Frumer · Accepted Answer · 2014-11-12 06:53:29Z

1

Services in angular.js are singletons, which means each time you inject a service it returns the exact same object, you cannot force it to return a new object each time it is injected.

What you can do is to create a Class function, for example:

angular.module('MainApp')

.factory('TreeHelperFactory', 
function ($http, $q, $filter, DataService) {

    /**
     * TreeHelper constructor
     * @class    
     */
    function TreeHelper() { /* this.init(); */ }

    /**
     * TreeHelper static class method
     */
    TreeHelper.list = function() { /* ... */ };

    /**
     * TreeHelper instance method
     */
    TreeHelper.prototype.init = function() { /*...*/ };

    /**
     * Returns the class
     */
    return TreeHelper;
})

Now you can inject it, instantiate an object and extend it like so:

.factory('CategoryService', function (TreeHelperFactory) {

  var catService = new TreeHelperFactory();

  catService.listCategories = function() { /*...*/ };
  catService.deleteCategory = function(id) { /*...*/ };

  return catService;
});

You can also use javascript prototypical inheritance but I think it's an overkill for most cases so keep it simple if you can.

answered Nov 12, 2014 at 6:53

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

see sharper Over a year ago

Thanks - I was aware that a service is a singleton, but reading the docs about factories I was less sure about the status of what they return. I'll try the above method and see if that does the job.

psp · Accepted Answer · 2014-11-12 06:42:53Z

0

Helper that depends on Angular services is a bad smell for me - almost like its status is more than a helper and it has a service or two in it. Would you be able to rethink this through restructuring their roles and responsibilities?

answered Nov 12, 2014 at 6:42

psp

3,3941 gold badge22 silver badges17 bronze badges

1 Comment

see sharper Over a year ago

"Helper" is the best word I could come up with, but what I really mean is an injectable object that provides certain functionality and which is not a singleton, because I need it to store data on it. Basically a class that can be extended.

Collectives™ on Stack Overflow

Extending an object in javascript/angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related