AngularJS  services and factories require a return object. As such, the parasitic combination inheritance calls mentioned in the previous post need to be changed a bit so that the return object from the call to the parent class is stored so that it can be returned from the child class in a way that Angular likes. Here’s what it looks like when using my ‘utility’ inheritance tools:

function QueryServiceFn2($http){
   var retObj = QueryServiceFn.call(this, $http);
   globalU.inheritPrototype(this, QueryServiceFn);
   return retObj;
}

So that works just fine. Closure also works the way that I think it should – methods referenced in the parent class have visibility to the ‘hidden’ parent objects. Here’s full example of inheriting a factory object (full version here – the child class is at the bottom of the file):

globalUtils.appMap.phpFactories2 = (function(globalU, base){
   "use strict";
   function QueryServiceFn($http){
      var retObj = base.call(this, $http);
      globalU.inheritPrototype(this, base);
      return retObj;
   }

   return{
      queryServicePtr: QueryServiceFn
   };
})(globalUtils, globalUtils.appMap.phpFactories.queryServicePtr);

To override a function, simply declare it normally and then set the pointer in retObj to point at the new version. The only thing to watch out for is that closure won’t hold. If you need access to an item in the base class that’s accessed through closure, you’ll probably have to copy it.

So it turned out that what I thought was parasitic combination inheritance was just parasitic. The globalUtils.inheritPrototype() function was being called before the function/objects were being called, thus inheriting nothing.. I think that this is because Angular is calling the functions after the other JavaScript is called. Since (I think!) the code has to be structured in this decoupled way to allow flexible use of OO, I had to look again at how all the pieces fit together. It turns out that a properly configured function object that inherits from a base class looks like this:

function ChildFn3(globalService) {
    console.log("Start ChildFn3");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    console.log("Finish ChildFn3");
}

we can adjust inherited values such as arrays without ‘static’ behaviors as well:

function ChildFn4(globalService) {
    console.log("Start ChildFn4");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    this.colors.push('black');
    console.log("Finish ChildFn4");
}

Here’s the better, running example: http://philfeldman.com/inheritance/inherit3.html

First, the caveat – I’ve just gotten this example to work. I will try using it in some larger code shortly, but I thought I’d document while everything seemed clear.

I’ve been working with Angular for a few months now, and am now doing reasonably complex things. As someone who has been coding for way too long, I like some of the things that Object Oriented programming gives you that Angular does not support (at least in a straightforward way). Primary among this is inheritance. I ran into this problem when I needed to make two mostly similar web pages that really didn’t lend themselves to multiple services/factories but could have been very cleanly built by extending a base class.

In Java/C++/Actionscript, etc, you have the capability to build base classes that can be extended. An example is setting up a particle base class that is extended to a moving particle class inherits from (Using Java here):

public class Particle{
    private vec3 position;
    public function setPosition(vec3 p){
        // code...
    }
    public function draw(){
        // code...
   }
}

To make the particle move, we need to add some kind of velocity and an update function that increments the position as a function of the velocity and time.

public class MovingParticle extends Particle{
    private vec3 velocity;
    public function setVelocity(vec3 p){
        // code...
    }
    public function update(double elapsed){
        // code...
   }
}

JavaScript has nothing like this and neither does Angular. YUI did, but that’s not supported any more. But through some contortions, JavaScript can handle inheritance. A pattern that I like is Parasitic Combination Inheritance, which I learned about in Professional JavaScript for Web Developers. I combined that with the Revealing Module Pattern, to get inheritance to work in a clean way. A fully working version of the code below is up at plunker. Some sections of the code below have been stripped out for clarity.

First, the base class:

var baseLogic = (function(window, undefined) {
    function ParentFn(globalsService) {
        this.myText = "Hello, World";
        this.myText2 = globalsService.getHello();
    }

    ParentFn.prototype.makeAlert = function() {
        alert(this.myText2);
    };

    return {
        parentPtr: ParentFn
    }
})(window);

Note that the baseLogic object is a function expression where the only accessible attribute is parentPtr, which points to the hidden function declaration ParentFn.

The child class uses a similar pattern. I pass in the baseLogic object just to keep things cleaner. Additionally, I pass in a globals object (created just like baseLogic) that contains a function that handles the mechanics of Parasitic Combination Inheritance.

var myLogic = (function(window, base, gbl, undefined) {
    //function ChildFn(){
    function ChildFn(globalsService) {
        var self = this;
        base.parentPtr.call(self, globalsService);
        self.myText = "Hello, World2";
        self.instanceAlert = function() {
            alert("instanceAlert = " + self.myText);
        }
    }

    gbl.inheritPrototype(ChildFn, base.parentPtr);

    ChildFn.prototype.makeAlert2 = function() {
        alert("ChildFn.prototype.makeAlert2");
    };

    return {
        childPtr: ChildFn,
    }

})(window, baseLogic, globals);

These can then be incorporated in Angular pretty trivially. The globalsService that is an argument in both the parent and child objects is created in the same way:

(function(angular, ml, undefined) {
    angular.module('globalsApp', [])
            .factory('GlobalsService', [ml.factoryPtr]);

    angular.module('inheritApp', ['globalsApp'])
            .controller('MainCtrl', ['GlobalsService', ml.childPtr]);
})(angular, myLogic);

The nice thing about this approach is that any component (controller, link functions in directives, factory, service) can all be built using OO techniques this way.

Here’s hoping it works on something more than my toy example…

So here we are, several days later. Everything works like I hoped. Now all the angular code for a module is in one place, which looks nice and readable (example). And although it’s kind of messy (programming for school, rather than work), here’s the base class and the derived class that is used in the

.controller('MainCtrl', ['$http', '$timeout', '$document', 'PostService', postControllers.turkPostPtr])

call in the above example.

Woohoo!