angular-base-class

An AngularJS factory for simple class based inheritance with support for mixins

Table of contents

1. Key features
2. Installation
3. Usage
   • Default constructor
   • Custom constructor
   • With mixins
4. Running tests
5. Credits
6. License

Key features

• Constructor definition is optional
• Uses this._super('methodName', arguments) to call super class methods
• Supports multiple inheritance by resolving correct this context in super() calls
• Mixins can be injected and used by adding them to mixins: []
• Does not override inherited mixins
• Compatible with AngularJS 1.2.x - 1.6.x

Installation

• npm
  • npm i angular-base-class --save
  • include a reference to node_modules/angular-base-class/angular-base-class.js
• bower
  • bower install angular-base-class --save
  • include a reference to bower_components/angular-base-class/angular-base-class.js

Usage

• Include angular-base-class.min.js in your project
• Add module BaseClass as dependency to your AngularJS app

Default constructor

angular.module('App', ['BaseClass'])
    .factory('Mammal', ['BaseClass', function (BaseClass) {
        return BaseClass.extend({
            setAge: function (age) {
                this.age = age;
            },
            getAge: function () {
                return this.age;
            }
        });
    }])
    .factory('Dog', ['Mammal', function (Mammal) {
        return Mammal.extend({
            setAge: function (age) {
                this._super('setAge', age + 10);
            },
            getAge: function () {
                return 'Dog is ' + this._super('getAge') + ' years old';
            }
        })
    }])
    .controller('Ctrl', ['$scope', 'Dog', function ($scope, Dog) {
        $scope.dog = new Dog({age: 5});
        $scope.dog.getAge(); // Dog is 5 years old
        $scope.dog.setAge(8);
        $scope.dog.getAge(); // Dog is 18 years old
    }]);

Custom constructor

angular.module('App', ['BaseClass'])
    .factory('Mammal', ['BaseClass', function (BaseClass) {
        return BaseClass.extend({
            constructor: function (args) {
                this.age = args.age + 1;
            },
            setAge: function (age) {
                this.age = age;
            },
            getAge: function () {
                return this.age;
            }
        });
    }])
    .factory('Dog', ['Mammal', function (Mammal) {
        return Mammal.extend({
            constructor: function () {
                this._super('constructor', arguments);
            },
            setAge: function (age) {
                this._super('setAge', age + 10);
            },
            getAge: function () {
                return 'Dog is ' + this._super('getAge') + ' years old';
            },
        })
    }])
    .controller('Ctrl', ['$scope', 'Dog', function ($scope, Dog) {
        $scope.dog = new Dog({age: 5});
        $scope.dog.getAge(); // Dog is 6 years old
        $scope.dog.setAge(8);
        $scope.dog.getAge(); // Dog is 18 years old
    }]);

With mixins

angular.module('App', ['BaseClass'])
    .factory('mammalMixin', [function () {
        return {
            grow: function (number) {
                this.age += number;
            },
            getName: function () {
                return this.name;
            }
        };
    }]);
    .factory('Mammal', ['BaseClass', 'mammalMixin', function (BaseClass, mammalMixin) {
        return BaseClass.extend({
            constructor: function (args) {
                this.name = args.name;
                this.age = args.age;
            },
            setAge: function (age) {
                this.age = age;
            },
            getAge: function () {
                return this.age;
            },
            mixins: [mammalMixin]
        });
    }])
    .factory('Cat', ['Mammal', function (Mammal) {
        return Mammal.extend({
            getAgeAndName: function () {
                return 'Age: ' + this.getAge() + ' Name: ' + this.getName();
            }
        });
    }])
    .controller('Ctrl', ['$scope', 'Cat', function ($scope, Cat) {
        $scope.dog = new Cat({name: 'Meow', age: 5});
        $scope.dog.getAge(); // 5
        $scope.dog.setAge(8);
        $scope.dog.getAge(); // 8
        $scope.dog.getName(); // Meow
        $scope.dog.getAgeAndName(); // Age: 8 Name: Meow
        $scope.dog.grow(2);
        $scope.dog.getAge(); // 10
    }]);

Running tests

• Get the source code and in project root directory:
  • npm install
  • npm run test

Credits

• Some ideas were borrowed from the following:
  • Axel Rauschmayer - http://www.2ality.com/
  • http://backbonejs.org/

License

Licensed under the MIT license. Copyright (c) 2015 - 2017 Audrius Jakumavicius