Extending a base class in an Angular service

Question

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

Answer 1

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.

Answer 2

This question was asked, and answered, 18 months ago. I recently went through the same issue on a project. I wanted to have a base Model defined that I could use to build factories off of. Angular has a very simple Provider to assist with this called the Value Provider, which Angular implements using the Value Recipe.

I'm not sure what version of Angular you may have been using at the time, but this dates back (AFAIK) to version 1.3.0. (As of this writing, current stable is 1.4.8)

I'm also using John Resig's Simple Inheritance Script. http://ejohn.org/blog/simple-javascript-inheritance/

Here's a snippet of my code (with most of the application specific logic removed).

var MyApp = angular.module( 'MyApp',['ngResource','ngAnimate','ngSanitize'] );

/* ==================================================================================== */
// -   Base Model Class   -------------------------------------------------------------
/* ==================================================================================== */

MyApp

/**
 * BaseModel - Value Provider
 * 
 */
.value( 'BaseModel',Class.extend({

    attribs: {},

    init: function(){

        var self = this;

        _active = true;

        _new = true;

        _origs = {};

        _loadByObject = function( obj ){ ... }
    },

    get: function( key ){ ... },
    set: function( key,val ){ ... },

    isNew: function(){ ... },
    keep: function(){ ... },
    remove: function(){ ... },

    load: function( obj ){ ... }
    verify: function(){ ... },      
    save: function(){ ... },

}))

.factory( 'UserFactory', 
    [ '$http', '$q', 'BaseModel', 
    function( $http, $q, BaseModel ){

    var UserFactory = BaseModel.extend({

        init: function(){

            this._super( false );

            _fields = [
                'first', 'last', 'email', 
                'phone', 'password', 'role'
            ];

            _permitted = [
                'first', 'last', 'email', 
                'phone', 'password', 'role'
            ];

            _required = [
                'first', 'last', 'email', 'role'
            ];

            _resource = "users";

            _api = "users";

        }

    });

    return UserFactory;

}])

I'd love to hear anyone's feedback, too.

Here's the Angular Docs: https://code.angularjs.org/1.3.0/docs/guide/providers