Extending a base class in an Angular service

angular-services, angularjs, inheritance, javascript, oop

Solution

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.

Problem

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.

Original source