Using angular.copy to extend a service

Question

I made baseService in angular as follows.

app.service('baseService', ['$http', function($http) {

        'use strict';
        this.service = "";
        this.load = function(){
            // implement load 
        }
}]);

Now I want other services to extend this service, since the implementation of the download method will be the same for all services. My derived service will look like this.

app.service('jobsService', ['baseService', function( baseService ){

    'use strict';

    angular.copy(baseService, this);

    this.service = 'jobs';    

}]);

Here I use angular.copy(baseService, this);baseService for extension. Is this the right approach to service inheritance?

Answer 1

The simplest and fairly simple option would be to use the John Resig Simple JavaScript Inheritance class .

- / , , ..

:

'use strict';

angular.module('app').factory('BaseService', function ($http) {

  var service = Class.extend({ //Class from John Resig code
    init: function (params) {
      this.params = params;
    },
    load: function (params) {

      return;
    },

  return service;
});

/:

angular.module('app').factory('JobService', function (BaseService) {

  var service = BaseService.extend({
    init: function (params) {
      this._super(params);
    }
  });

  return new service;
});

Answer 2

... .

, , . , . , factory Angular

fiddle

---

angular.module('app', []);

angular.module('app').factory('BaseFactory', [ function() {

    var load = function() {
        console.log('loading factory base');
    }

    return { 'load': load }
}]);

angular.module('app').factory('ChildFactory', ['BaseFactory', function (BaseService) {

  var child = angular.copy(BaseService);

  child.childLoad = function () {
      console.log('loading factory child');
  };

  return child;
}]);

angular.module('app').service('BaseService', [function() {

    this.load = function() {
        console.log('loading service base');
    }
}]);

angular.module('app').service('ChildService', ['BaseService', function(BaseService) {

    angular.copy(BaseService, this);

    this.childLoad = function() {
        console.log('loading service child');
    }
}]);

angular.module('app').controller('ctrl', ['$scope', 'ChildFactory', 'ChildService', function($scope, ChildFactory, ChildService) {

    ChildService.load();       // 'loading service base'
    ChildService.childLoad();  // 'loading service child'
    ChildFactory.load();       // 'loading factory base'
    ChildFactory.childLoad();  // 'loading factory child'
}]);

Answer 3

   var BaseService = (function () {
      var privateVar = 0;
      return {
        someAwesomeStuff: function () {
          if (privateVar === 42) {
            alert('You reached the answer!');
          }
          privateVar += 1;
        };
      };
    }());

:

var ChildService = Object.create(BaseService);
ChildService.someMoreAwesomeStuff = function () {
  //body...
};

module.factory('ChildService', function () {
  return ChildService;
});

ina :

function MyCtrl(ChildService) {
  ChildService.someAwesomeStuff();
}

Answer 4

(extended2Service) , (extendedService).

, .

angular.module('app',[])
.controller('mainCtrl', ['$scope', 'baseService', 'extendedService', 'extended2Service', function($scope, baseService, extendedService, extended2Service ){
  $scope.test = 8;
                      
  $scope.resultBase = baseService.addOne($scope.test);                       
  $scope.resultExtended = extendedService.sum($scope.test, 10);
  $scope.result2Extended = extended2Service.sum($scope.test, 10);
  
  console.log(extendedService);
  console.log(extended2Service);
}])
.factory('baseService', function(){
  var baseService = {};
  
  var _addOne = function(n) {
    return n+1;
  };
  
  baseService.addOne = _addOne;
  return baseService;
  
})
.factory('extendedService', ['baseService', function(baseService){
  var extendedService = {};
  
  var _sum = function(a, b){
    for (var i = 0; i < b; i++) {
      a = baseService.addOne(a);
    }
    return a;
  };
  
  extendedService.addOne = baseService.addOne;
  extendedService.sum = _sum;
  
  return extendedService;
    
}])
.factory('extended2Service', ['baseService', function(baseService){
  var extended2Service = angular.copy(baseService);
  
  var _sum = function(a, b){
    for (var i = 0; i < b; i++) {
      a = baseService.addOne(a);
    }
    return a;
  };
  extended2Service.sum = _sum;
  
  return extended2Service;
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div ng-app="app" ng-controller="mainCtrl">
  Value: {{test}} <br>
  Base: {{resultBase}} <br>

  resultExtended : {{resultExtended}} <br>
  result2Extended: {{result2Extended}}
<div>

Hide result