Angular with native JS controllers

by mslocum

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js"></script>
<div ng-controller="Child as c">
    <button ng-click="c.doStuff()">Do it</button>
    <p>Value: {{ c.value }}</p>
</div>

JavaScript

var Parent = function() {
    this.value = 0;
}
Parent.prototype.add = function(iVal) {
    this.value += iVal;
};
Parent.prototype.getValue = function() {
    return this.value
};


var Child = function() {
    Parent.call(this);
};
Child.prototype = Object.create(Parent.prototype);
Child.prototype.doStuff = function() {
    this.add(1);
};


// Start Angular stuff
var app = angular.module('myApp', []);
app.controller('Child', Child);