Organizational Research By

Surprising Reserch Topic

angularjs with oop inheritance in action

angularjs with oop inheritance in action  using -'oop,angularjs'


I'm working on an application that uses angular as a client side framework, angular currently rocks and I'm really happy using it, though now I find that I use to much copy and paste code that I would like to organize into class hierarchy. For example dialogs share a common set of functionality, they need to be opened, closed, the code that provides typeahead functionality is also a first candidate to inherit from some parent BaseTypeaheadClass, though  one thing I didn't find in angular is a standard way of organising these hierarchies. Both controllers, services, providers use ordinary javascript functions underneath which can be extended by the means of prototype, so my question is:


What is the angular way of organising my class functions, are there any standard mechanisms that will allow to derive one class from another


My guesses on the problem:

Define implementation of base classes as services, as a result they will be easily injected into any controller or other services where that specific class will be needed
Define OOP service and provide methods such as define, derive, etc. that will be used to create base / derived classes

Thank you,


Some time has passed from time when I was initially asking my question. Since then I have come out with approach that I'm successfully using in several projects, that I like very much and want to share with everyone.

Currently angular doesn't provide any constructs for organising class hierarchies and it's a pity since more or less large application can't suffice only Model/View/Controller/... constructs, it has to organise it's code into OOP objects.

I'm working in the field of web-development for quite a long time already and I haven't seen even one enterprise project that was taking advantage of OOP with JavaScript massively. What I seen was huge and nicely organised server side / database side logic + close to infinite javascript spaghetti greased with zoo of frameworks and libraries on client side.

No MVVM, MVP frameworks such as knockout.js, backbone, other... are capable of replacing the OOP as such. If you are not using core principles of orientired programming such as Classses, Objects, Inheritance, Abstraction, Polymorphism you are in deep shit, what you will end up is a mega long javascript spaghetti.

Regarding Angular I think it is a framework very much different from knockout.js / backbone.js / any other MVV-anything frameworks but according to my practice also it is not a silver bullet capable of replacing OOP. When I'm trying not to use the OOP with Angular I end up with duplicate logic located mostly in controllers. And unfortunately there is no (I have found no) clean and angular-way of beating that problem.

But I have successfully (I think) solved that problem.

I've used compact, zerro-dependency lib that just implements John Resig's Simple JavaScript Inheritance ( With the help of that library I was able to create / inherit / create abstract methods / override them, in other words do everything that I've accustomed to on server side.

Here is an example usage:

Application.factory('SomeChildObject', ['$http', 'SomeParentClass', function ($http, SomeParentClass) {
    var SomeChildClass = SomeParentClass.extend({
        init: function() { // Constructor
            this._super.init(123, 231); // call base constructor
        someFunction: function() {
            // Notice that your OOP now knows everything that can be injected into angular service, which is pretty cool :)
            $http({method: 'GET', url: '/someUrl'}).then(function(){
                this._super.someFunction(); // call base function implementation

    // return new SomeChildClass(); // We are not returning instance here!

    return SomeChildClass; // Service is a function definition not an instance of an object

// So now we can both use this service in angular and have the ability to extend it using the `extend` method call, like so:
Application.controller('MegaController', ['$scope', 'SomeChildClass', function ($scope, SomeChildClass) {
    $scope.someObject = new SomeChildClass();

OOP + Angular play together very nicely, objects created under angular context can take advantage of dependency injection via services automatically, so you don't have to inject instances into your OOP constructors and this fact makes your OOP hierarchy very slim and free of irrelevant stuff that needs to be (and is) handled by angular.js

So play with this approach and give feedback here with results you gained or problems you encountered,

Thank you,

Another edit

Recently I've faced few problems with original Class.js implementation, as follows:

1) If you will be passing a reference to your instance methods as callbacks to other methods, these methods might work not the way you expect them to work. They will loose reference to this. In such case you will be expecting to see your current object inside this but it will be either top level Window or some other context object depending on how the callback calls your method. It happens due to JavaScript architecture. In order to fight this problem a special ClassMember function is provided which instructs Class to bind your method to object context when it is being created (check Usage below for further guidance).

2) Obviously original Class.js implementation doesn't know anything about angular type of controller method declarations i.e.

Class.extend('YourClassDisplayName', {
    ctor: function () {
        // Some useful constructor logic
    controller: ['$scope', '$attrs', function ($scope, $attrs) {
        // Do smth. with $scope and $attrs

Current implementation understands above syntax

3) When using above approach without appropriate handling it would break angular $$annotate'on process so referring to above example it would make impossible to inject $scope and $attrs into into ClassMember method, or overriden method which is using this.base(...) calls. So this is also fixed.


1) When using this.base(...) within async operation handler (something like $http.get(..., function() { self.base(...); })) please note that this.base(...) call has a limited lifetime and as soon as the method returns this.base(...) stops existing. So you should save reference to base method explicitly if you are planning to call base methods in asynchronous fashion. i.e:

var self = this;
var base = this.base;
$http.get(..., function () {, ...); // or base.apply(self, ...), or base() if you don't care about `this`

I've resolved all of the above problems (except one gotcha which can not be resolved due to JavaScript architecture) and would like to share with everyone, hope you will benefit from it:

/* Simple JavaScript Inheritance
 * By John Resig
 * MIT Licensed.
 * Inspired by base2 and Prototype

 * Angular adaptations by Denis Yaremov
 * Usage:

   var X = Class.extend('X', {
       ctor: function () {
  = "I'm X";

       myOrdinaryMethod: function (x, y, z) {
           console.log([, x, y, z]);

       myClassMemberMethod: ClassMember(function (x, y, z) {
           console.log([, x, y, z]);

   var Y = Class.extend('Y', {
       ctor: function () {
  = "I'm Y";

       myOrdinaryMethod: function (x, y, z) {
           console.log([, x, y, z]);

       myClassMemberMethod: ClassMember(function (x, y, z) {
           console.log([, x, y, z]);

   var x = new X();
   var y = new Y();

   x.myClassMemberMethod('a', 'b', 'c'); // ["I'm X", "a", "b", "c"]
   y.myClassMemberMethod('u', 'v', 'm'); // ["I'm Y", "u", "v", "m"]

   x.myOrdinaryMethod('a', 'b', 'c'); // ["I'm X", "a", "b", "c"]
   y.myOrdinaryMethod('u', 'v', 'm'); // ["I'm Y", "u", "v", "m"]

   y.theirOrdinaryMethod = x.myOrdinaryMethod;
   y.theirClassMemberMethod = x.myClassMemberMethod;

   y.theirOrdinaryMethod('a', 'b', 'c'); // ["I'm Y", "a", "b", "c"]
   y.theirClassMemberMethod('u', 'v', 'm'); // ["I'm X", "u", "v", "m"]


angular.module('app').factory('ClassMember', function () {
    return function ClassMember(fn) {
        if (this instanceof ClassMember) {
            this.fn = fn;
        } else {
            return new ClassMember(fn);

angular.module('app').factory('Class', function (ClassMember) {
    var runtime = { initializing: false },
        fnTest = /xyz/.test(function() { xyz; }) ? /\bbase\b/ : /.*/,
        FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m,
        STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;

    var toString = Object.prototype.toString;

    // The base Class implementation (does nothing)
    function Class() { };

    Class.members = { };

    // Create a new Class that inherits from this class
    Class.extend = function extend(displayName, properties) {
        var array;

        var targetMembers = {};
        var sourceMembers = this.members;

        for (var memberName in sourceMembers) {
            if (sourceMembers.hasOwnProperty(memberName)) {
                targetMembers[memberName] = sourceMembers[memberName];

        var base = this.prototype;

        // Instantiate a base class (but only create the instance,
        // don't run the ctor constructor)
        runtime.initializing = true;
        var prototype = new this();
        runtime.initializing = false;

        // Copy the properties over onto the new prototype
        for (var name in properties) {
            if (properties.hasOwnProperty(name)) {
                // Check if we're overwriting an existing function
                var property = properties[name];

                // Support angular's controller/service/factory declaration notation
                if ( === '[object Array]') {
                    array = property;

                    var item = array[array.length - 1];

                    if ( === '[object Function]' || item instanceof ClassMember) {
                        property = array[array.length - 1];
                    } else {
                        array = null;
                } else {
                    array = null;

                var isClassMember = property instanceof ClassMember;

                if (isClassMember) {
                    property = property.fn;

                if (typeof property === "function") {
                    if (typeof base[name] === "function" && fnTest.test(property)) {
                        property = (function (propertyName, fn) {
                            var args = fn.toString().replace(STRIP_COMMENTS, '').match(FN_ARGS)[1];
                            return (new Function('propertyName', 'fn', 'base', 'return function (' + args + ') {\n\
                                    var prevBase = this.base;\n\
                                    var hasBase = "base" in this;\n\
                                    // Add a new .base() method that is the same method\n\
                                    // but on the super-class\n\
                                    this.base = base[propertyName];\n\
                                    // The method only need to be bound temporarily, so we\n\
                                    // remove it when we\'re done executing\n\
                                    var ret =' + (!!args ? (', ' + args) : args) + ');\n\
                                    if (hasBase) {\n\
                                        this.base = prevBase;\n\
                                    } else {\n\
                                        delete this["base"];\n\
                                    return ret;\n\
                                }'))(propertyName, fn, base);
                        })(name, property);

                    if (isClassMember) {
                        targetMembers[name] = property;
                    } else if (name in targetMembers) {
                        delete targetMembers[name];

                    if (array) {
                        array[array.length - 1] = property;

                        property = array;

                    prototype[name] = property;
                } else {
                    prototype[name] = property;

        var membersArray = [];
        for (var i in targetMembers) {
            if (targetMembers.hasOwnProperty(i)) {
                membersArray.push({ name: i, fn: targetMembers[i] });

        // All construction is actually done in the ctor method
        var ChildClass = (new Function("runtime", "members", "FN_ARGS", "STRIP_COMMENTS", "return function " + (displayName || "Class") + "() {\n\
            if (!runtime.initializing && this.ctor)\n\
                var length = members.length;\n\
                for (var i = 0; i < length; i++)\n\
                    var item = members[i];\n\
                    this[] = (function (me, fn) {\n\
                        var args = fn.toString().replace(STRIP_COMMENTS, '').match(FN_ARGS)[1];\n\
                        return args ? (new Function('me', 'fn', 'return function (' + args + ') { return, ' + args + '); }'))(me, fn) : function () { return; };\n\
                    })(this, item.fn);\n\
                this.ctor.apply(this, arguments);\n\
        }"))(runtime, membersArray, FN_ARGS, STRIP_COMMENTS);

        ChildClass.members = targetMembers;

        // Populate our constructed prototype object
        ChildClass.prototype = prototype;

        // Enforce the constructor to be what we expect
        ChildClass.prototype.constructor = ChildClass;

        // And make this class extendable
        ChildClass.extend = extend;

        return ChildClass;

    return Class;


asked Oct 7, 2015 by kotmus2002
0 votes

Related Hot Questions

2 Answers

0 votes

Your guesses sounds perfectly applicable.

You can reuse functionality defined in parent controllers by simply calling methods attached to the parent scope:



function ParentCtrl($scope) {
    $scope.parentMethod = function () {
        //method body

function ChildCtrl($scope) {
    $scope.childMethod = function () {

If you want to use the JavaScript approach with prototype inheritance you can use:

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

function Parent($scope) {
    $ = 'Superhero';    

    $scope.clickParent = function() {
        $ = 'Clicked from base controller';

function Child($scope, $injector) {

    $injector.invoke(Parent, this, {$scope: $scope});

    $ = 'Superhero Child';

    $scope.clickChild = function(){
Child.prototype = Object.create(Parent.prototype);

For services, for example, you can use:

(function () {

function ParentService(arg1) {
   this.arg1 = arg1;

function ChildService(arg1, arg2) {, arg1);
   this.arg2 = arg2;

ChildService.prototype = new ParentService();

app.service('ChildService', ChildService);


Also check this discussion and the blog post about inheritance in AngularJS I posted.

answered Oct 7, 2015 by shegokar.anjeet
0 votes

Let me give you my opinion on Angular / inheritance situation.

You don't do class/prototypical inheritance in Angular.js. It can be hard to test, and that is a problem. For those, who are looking for 'inheritance' in Angular, I recommend this:

Your base class is the controller. The controller is an abstract model anyways, so it is perfect for that purpose. Use a $scope.init() function in your controller, but don't call it from there!

If you want to 'extend' your controller's functionality, use directives. In you directive link() function, call the controller's $scope.init(). (when compiling, angular runs controllers first, and directive link functions after). If scope had a $'base', in the directive link you will be able to redefine $, and after that, run $scope.init().

But wait! But this only allows a single-level inheritance. - Yes, thats true. But if you are looking for multilevel inheritance, you should use Services.

Multilevel inheritance is nothing else, but sharing the same code in a hierarchical class structure. For this purpose, use Services, and throw in these services with the dependency injector into your directives. Soo easy. This should be easy to accomplish, easy to understand, and tests run smooth.

Directives are very powerful tools, because you can dynamically combine partials with controllers.

answered Oct 7, 2015 by gauravg.gwl