javascript - Angularjs extending services and inheritance - Stack Overflow

admin管理员组

文章数量:1420575

I am trying to find of a way to extend services in angular. I am not sure if angular has a concept of extending or if it merely relies on injection for code reuse. So what I have tried so far are the following

Method 1

myApp.factory('myFactory', function ($http) {
   return{
     mon: function(){
      console.log('I am from myFactory');
     }
});


 myApp.factory('myFactory1', function (myFactory) {
    return {
     mon: myFactorymon
    };
});

OR

 myApp.factory('myFactory1', function (myFactory) {
    return angular.extend(myFactory, {
     mon: function() {
      console.log('I am form Factory1')
      }
    });
});

Both approaches sort of work OK but my main issue is how to call the parent. i.e. something like this:

in myFactory1

     mon: function(){
      console.log('I am from myFactory1');
      this.prototypemon.apply(this, arguments);
     }

I want is to print out 'I am from myFactory1', 'I am from myFactory'

Generally Is this supported in angular ? Or should I take a different approach in extending /inheriting functionality?

Thank you

I am trying to find of a way to extend services in angular. I am not sure if angular has a concept of extending or if it merely relies on injection for code reuse. So what I have tried so far are the following

Method 1

myApp.factory('myFactory', function ($http) {
   return{
     mon: function(){
      console.log('I am from myFactory');
     }
});


 myApp.factory('myFactory1', function (myFactory) {
    return {
     mon: myFactory.mon
    };
});

OR

 myApp.factory('myFactory1', function (myFactory) {
    return angular.extend(myFactory, {
     mon: function() {
      console.log('I am form Factory1')
      }
    });
});

Both approaches sort of work OK but my main issue is how to call the parent. i.e. something like this:

in myFactory1

     mon: function(){
      console.log('I am from myFactory1');
      this.prototype.mon.apply(this, arguments);
     }

I want is to print out 'I am from myFactory1', 'I am from myFactory'

Generally Is this supported in angular ? Or should I take a different approach in extending /inheriting functionality?

Thank you

• javascript
• angularjs
• oop
• extend
• angularjs-service

Share Improve this question Follow asked May 21, 2014 at 16:10 user3638565user3638565 5511 silver badge66 bronze badges 2

• if it meets your requirements go ahead. angularjs services are singletons. So you should favorise position over inheritance. – mpm Commented May 21, 2014 at 16:19
• So can't call parent function with same name? – user3638565 Commented May 21, 2014 at 16:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The way I've achieved this in the past is to have the base angular service return an instance of a plain old Javascript 'class'. The extended service, then creates an instance of the base class, and uses standard JS prototypal inheritance to extend the class and returns an instance of the new extended object.

For example:

// Base service
app.factory('Shape', function() {

    var Shape = function(colour) {
        this.colour = colour;
    };

    Shape.prototype.getColour = function() {
        return this.colour;
    };

    return Shape;
});

// Extended service
app.factory('Square', function(Shape) {

    var Square = function(colour) {
        Shape.apply(this, arguments);
    };

    Square.prototype = new Shape();

    Square.prototype.getSides = function() {
        return 4;
    };

    return Square;
});

Just a few tweaks on Square @romiem snippet:

// Extended service
app.factory('Square', function(Shape) {

    var Square = function(colour) {
        Shape.call(this, arguments);
    };

    Square.prototype = Object.create(Shape.prototype);
    Square.prototype.constructor = Square;

    Square.prototype.getSides = getSides;

    return Square;

    function getSides() {
      return 4;
    }

});

This snippet follows best practices and avoid the problem about create a new instance through new Shape(). Also in patible with old browsers.

本文标签： javascriptAngularjs extending services and inheritanceStack Overflow