<!DOCTYPE html>
<html ng-app="inheritApp">
<head lang="en">
<meta charset="UTF-8">
<title>Inherit2</title>
</head>
<body ng-controller="MainCtrl as mc">
Input: <input type="text" ng-model="mc.myText"/>
<p>{{mc.myText}}</p>
<p>{{mc.myText2}}</p>
<input type="button" value="Base Class Prototype" ng-click="mc.makeAlert()"/>
<input type="button" value="Child Class Prototype" ng-click="mc.makeAlert2()"/>
<input type="button" value="Child Class Instance" ng-click="mc.instanceAlert()"/>
<script id="angularScript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
"use strict";
// Build modules and reveal only pointers to what we want to be visible
// Globals contain methods and variables that we can use everywhere.
var globals = (function(window, undefined) {
// Parasitic Combination Inheritance from Professional JavaScript for Web Developers (Kindle Location 7328). John Wiley and Sons. Kindle Edition.
function InheritPrototype(subType, superType) {
var prototype = Object(superType.prototype); // create object
prototype.constructor = subType; // augment object
subType.prototype = prototype; // assign object
}
return {
inheritPrototype: InheritPrototype
}
})(window);
// The base 'class' for this example
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);
// items that will be used by Angular. In this case a 'child class' and
// a function that we'll put in a factory
var myLogic = (function(window, base, 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);
}
}
globals.inheritPrototype(ChildFn, base.parentPtr);
ChildFn.prototype.makeAlert2 = function() {
alert("ChildFn.prototype.makeAlert2");
};
function FactoryFn() {
return {
getHello: function() {
return "GlobalService.getHello";
}
};
}
return {
childPtr: ChildFn,
factoryPtr: FactoryFn
}
})(window, baseLogic);
// The Angular code
(function(angular, ml, undefined) {
angular.module('globalsApp', [])
.factory('GlobalsService', [ml.factoryPtr]);
angular.module('inheritApp', ['globalsApp'])
.controller('MainCtrl', ['GlobalsService', ml.childPtr]);
})(angular, myLogic);
</script>
</body>
</html>