how to create a base service and reuse it

[mark goldin]

Here is my typical service definition:

home = angular.module('home');

home.factory("homeService", function ($http, $q) {

    var service =

    {

        geCurrentSummary: function ()

        {

            var deferred = $q.defer();

            var response = $http({

                method: "post",

                crossDomain: true,

                dataType: "json",

                withCredentials: true,

                data: "{}",

                headers: {

                    'Content-Type': "application/json",

                    "Accept": "application/json"

                },

                url: "someURL",

            });

            response.success(function (data) {

                deferred.resolve(data);

            });

            response.error(function (data) {

                alert('Error');

            });

            // Return the promise to the controller

            return deferred.promise;

        },

    return service;

});

And in controller:

home.controller('homeController', function($scope, homeService) {

......

    homeService.getCurrentSummary().then(callBack);

.......

Everything works fine. When I need to create another call to the server I copy and paste the above code, change function name  and change url property.

But now, when I have a stable code I would like to use a proper way of reusing http service code. What would an inheritance pattern be to have a base service class and then reuse it in every http call?

Thanks

[Mo Moadeli (CREDACIOUS)]

Although AngularJS itself does not provide out of the box prototypical inheritance, here are at least a couple of ways to go about doing this:

- using AngularJS' $provide.decorator to extend you service.  See; http://stackoverflow.com/questions/26642174/angularjs-service-inheritance.  Note: going about it this way will further push you into the bowels of Angular.

- The second way, which I FAR prefer is applying standard OO patterns to Javascript and implementing them in AngularJS.  In this case, what *I* would do is create a 'shell' AngularJS service.  Inside it create an object FACTORY to return the proper object instance, which is within a parallel JS inheritance hierarchy.  This way you will have the best of both worlds, where your service will act as a Singleton AND maintain a dictionary of objects it manufactures if it needs to.  NOTE:  The factory itself can be a separate service that can be injected into your service which is even better. Below is some pseudocode so it is syntactically incorrect.  Note, the object hierarchy can be data returned to the controller to update its scope attributes OR it can be data returned to the service for other purposes.  I have called 'baseMethod()' to show both cases. Hope this helps.

{//object prototype hierarchy:

  BaseObject = function () {

    

  

  }

  BaseObject.prototype.baseMethod = function() {...}

  ChildObject1 = function() { ..}

  ChildObject1.prototype=Object.create(BaseObject.prototype);

  ChildObject1.prototype.baseMethod = function() {...}

   ...

  ChildObjectn = function() { ..}

  ChildObjectn.prototype=Object.create(BaseObject.prototype);

  ChildObjectn.prototype.baseMethod = function() {...}

}

angularJSController('Controller', injected = "FactoryService") {

   object = FactoryService.create('condition parameters');

   object.baseMethod();  //if this a controller type call

  

  }

angularJSService('FactoryService') {

  var object = null;

  var ObjectDict = [];

  var create = function ('condition parameters') {

   case 0: object = new ChildObject0;

   case 1: object = new ChildObject1;

     ....

   case n: object =  new ChildObjectn;

   default:  new ChildObject;

   objectDict.push(object); //manage objects 

   object.baseMethod();  //if this a service type call

  return object;

  }

  return this;