Instantiate other AngularJS-controller with a CommonController when using IIFE

Question

I have a project where a lot of the models are going to be managed by almost the same controller-code with the only exception that they are calling different services.

T

Answer 1

It looks like your example uses Angular 1.0.x that supports global controllers out of the box. That's how it would be done with more recent Angular, without going too deep into the perils of JS inheritance.

'use strict';

(function (root, angular) {
    root.ctrls = root.ctrls || {};

    var primaryCtrl = function ($scope) {
        var self = this;
        console.log('primaryCtrl constructor', self, $scope);
    };
    primaryCtrl.prototype = {
        items: ['Item 1', 'Item 2'],
        edit: function (item) {
            //do stuff
        }
    };
    primaryCtrl.$inject = ['$scope'];

    root.ctrls.primaryCtrl = primaryCtrl;
})(this, angular);

(function (root, angular) {
    root.ctrls = root.ctrls || {};

    var secondaryCtrl = function ($scope) {
        var self = this;
        console.log('secondaryCtrl constructor', self, $scope);
    };
    secondaryCtrl.prototype = angular.extend({},
        root.ctrls.primaryCtrl.prototype,
        {
            items: ['Stuff 1', 'Stuff 2']
        }
    );
    secondaryCtrl.$inject = ['$scope'];

    root.ctrls.secondaryCtrl = secondaryCtrl;
})(this, angular);

var app = angular.module('app',[]);
app.controller('PrimaryCtrl', ctrls.primaryCtrl);
app.controller('SecondaryCtrl', ctrls.secondaryCtrl);

and

<div ng-controller="PrimaryCtrl as primary">
    <p ng-repeat="item in primary.items">{{item}}</p>
</div>

<div ng-controller="SecondaryCtrl as secondary">
    <p ng-repeat="item in secondary.items">{{item}}</p>
</div>

You may also check Angular Classy, which brings opinionated but viable extending syntax to Angular.