Using prototype to extend controller in Angular

Question

I have the following code...

var app = angular.module('plunker', []);
TestController = function ($scope, $interval) {
  $scope.test = this;
  $scope.name = 'World';
    this.init();
    $interval(function () {
        //Added this because we shouldn't update until we either get the user data or that request fails
        $scope.test.init();
    }, 500);
};
TestController.prototype.init = function () {
    console.log("Test this thing");
};
app.controller('MainCtrl', TestController);

This works great but now I need to include the init function in another controller so I want both to inherit from a common prototype. However, when I try this plunker it doesn't seem to work.

What is the proper way to handle this sort of thing in JS?

in plunker you have function TimeBox but in prototype try assign TestController.prototype = new Test() — Grundy
– Grundy, Commented Sep 22, 2014 at 18:42
all work if you define all function in app.js file, or add reference to test.js in index.html — Grundy
– Grundy, Commented Sep 22, 2014 at 19:53
if you want use code from test.js in page index.html - you need add reference to this script file like <script src="test.js"></script> :-) — Grundy
– Grundy, Commented Sep 23, 2014 at 5:49

dizel3d · Accepted Answer · 2014-09-22 20:45:10Z

2

It is TypeScript example http://plnkr.co/edit/HOeJ7nkkp2qRl53zEvVj?p=preview

TypeScript:

class Controller {
  static $inject = ['$scope']; // deps

  constructor($scope) {
    $scope.vm = this;
  }

  value(): string {
    return '123';
  }
}

class NewController extends Controller {
  constructor($scope) {
    super($scope);
  }

  value(): string {
    return super.value() + '456';
  }
}

declare var angular: any;
angular.module('my', []).controller('controller', NewController);

In JavaScript it looks like:

//Compiled TypeScript

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}

var Controller = (function () {
    function Controller($scope) {
        $scope.vm = this;
    }
    Controller.$inject = [
        '$scope'
    ];
    Controller.prototype.value = function () {
        return '123';
    };
    return Controller;
})();

var NewController = (function (_super) {
    __extends(NewController, _super);
    function NewController($scope) {
        _super.call(this, $scope);
    }
    NewController.prototype.value = function () {
        return _super.prototype.value.call(this) + '456';
    };
    return NewController;
})(Controller);

angular.module('my', []).controller('controller', NewController);

If you need OOP in JavaScript use smth like http://prototypejs.org/

edited Sep 22, 2014 at 20:45

answered Sep 22, 2014 at 20:38

dizel3d

3,6681 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jackie Over a year ago

I will take a look at what you have posted and check after I get a chance to digest thanks!

Collectives™ on Stack Overflow

Using prototype to extend controller in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related