Inheritance Pattern in AngularJS

Question

I am quite new to AngularJS. I have the following challange:

I like to create an application offering 3 different modes, (further called A, B and C). A mode in this case is more or less a view with many directives. All are fairly complex and share a lot of functionality. B is a pure extension of A. C is different from A and B.

I find it not very hard to create the directives, templates and controllers for those 3 modes. Mostly I have one main template for each mode using several directives (which one exactly is dependend on the mode, some directives are used n all modes). I also have one base controller managing common user interaction which is shared for all 3 modes. Then I have 3 controllers that add the mode specific actions.

My trouble is to find a good pattern to share common application logic for the 3 modes. My current approach is the following (I am sure, there is a better one):

I created a Service for each Mode as follows:

angular.module('app').factory('modeAObject', function (lng) {
    return new ModeAObject(lng);
});

ModeAObject extends a base Object by using 'Parasitic combination Inheritance' Pattern (an example can be found here "Parasitic Combination Inheritance" in Professional JavaScript for Web Developers):

function inheritPrototype(childObject, parentObject) {
    var copyOfParent = Object.create(parentObject.prototype);

    copyOfParent.constructor = childObject;

    childObject.prototype = copyOfParent;
}

function BaseObject(lng) {
    BaseObject.lng = lng;
}

ModeAObject then has the following structure:

function ModeAObject(lng) {
    BaseObject.call(this, lng);
    this.someProperty =  {};
    ...
}
inheritPrototype(ModeAObject, BaseObject);

//Static variables
ModeAObject.staticA = {};
...

//Static functions
ModeAObject.initSettings = function (config) {
   ...
}

//Non-static functions
ModeAObject.prototype.someOtherFunction = function () {
    this.someOtherProperties = ...;
    this.callToFunctionToBeOverridenByChild();
}

//This is empty here but can be implemented by a child
ModeAObject.prototype.callToFunctionToBeOverridenByChild = function () {}

Mode B extends Mode A. It has the following Object base structure:

function ModeB(lng) {
    ModeA.call(this, lng);
    ...
}

inheritPrototype(ModeB, ModeA);

The controllers for the modes then use the object via services in their scopes like so:

Base Controller:

angular.module('app').controller('baseController', function ($scope) {
    $scope.setObject = function (baseObject) {
        $scope.baseObject = baseObject;
    }
});

ModeA Controller:

angular.module('app').controller('modeAController',function ($scope,modeAObject) {
    $scope.setObject(modeAObject);
});

My questions: Are there other patterns applicable for rather complex application logic in JS? Which one is good to use in combinition with AngularJS? How do you integrate this patterns in services and controllers? Do you see any flaws in the proposed implementation? An obvious one is, that the proposed solution pollutes the global namespace. How could that be done better?

Inheritance Pattern in AngularJS

0 Answers0