Question

94

Extending a base class in an Angular service

rated 0 times [ 97] [ 3] / answers: 1 / hits: 6937 / 10 Years ago, fri, may 23, 2014, 12:00:00

I have a base class that I would like to extend in a service to help get data in to the angular scope. I have searched around the net for a solution, but have not found one that I like. I have a base class that is used to access the File systems of devices

the class structure:

var cOfflineStorageBase = Class.extend({

   init: function(){

   },

   CreateFolderDir: function(){

   },

   DeleteAll: function(){

   },

   DeleteDirectories: function(){

   },

   DeleteItem: function(){

   },

   GetFiles: function(){

   },

   FileExists: function(){

   }, 

   GetPath: function(){

   },

   GetObject: function(){

   },

   SaveObject: function(){

   },   

});

I would like to be able to extend this class in several different angular services (ie offlineCart, offlineCustomLists, ect...) where each service would be able to use the storage base to store the various different data types. I am looking for the best, most appropriate way to do this in angular. In vanilla JavaScript one would just do something like this:

var newClass = cOfflineStorageBase.extend({

   //add new stuff here

});

but I want to do this same thing the angular way.

The approach I have been considering are to use the angular.extend functionality, but I am not sure this is appropriate or would something like this be a more appropriate approach:

app.factory('someChild', ['$http' , 'cOfflineStorageBase', 

            function($http, cOfflineStorageBase){

  var SomeClass = cOfflineStorageBase.extend({

     init: function(){

        this._super.init()

     },

     //Add more stuff here

  });

  return SomeClass;

}]);

I would like some advice if theses approaches are correct or if there might be another that is better for what I am wanting to accomplish. I would also like or rather need to use promises in much of this code as it would be async.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristineterrak

Add To Favorites

Follow

Total Points: 74

Total Questions: 109

Total Answers: 115

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

answered 10 Years ago anitadevonm · Accepted Answer

I pulled off this trick recently.

I will start by defining a plain JavaScript constructor. This does not need to be an angular service. What I do is that, later, the extending constructors can pass any necessary injections by parameter. So, this will be the base class of my angular services. This is where I would expose anything I want all angular services to inherit.

function ParentService($http) {

   this.$http = $http;

}



ParentService.prototype.foo = function () {

    alert(Hello World);

};

Then I will proceed to define a child constructor using prototypal inheritance. This constructor will indeed be an angular service (you can tell by my use of $inject at the end).

function ChildService($http) {

    Parent.call(this, $http);

}



ChildService.prototype = new ParentService();

ChildService.prototype.baz = function() {

   return this.$http.get('/sample/rest/call');

}

ChildService.$inject = ['$http'];

Then I will proceed to register the services à la carte in the corresponding angular modules:

var app = angular.module('SampleApp', []);

app.service('child', ChildService);

Finally, in my controller I will simply inject my service, which will be an instance of my ChildService constructor, which in turn extends my ParentService constructor:

app.controller('MainCtrl', ['$scope', 'child', function ($scope, child) {

    child.foo(); //alert(Hello World)

    var promise = child.bar();

}]);

You can see a JSFiddle here

Also there is an interesting video in Youtube from ngConf called Writing A Massive Angular App which covers some of these topics and a few other ideas on code reusability with angular.