Is it good practice to extend a base controller in angularjs

Question

Is it good practice to extend a base controller in Angularjs as follows?

From within sub-controller:

angular.extend(this, $controller('BaseCtrl', {$scope : $scope}));

The $controller official documentation mentions only a usage for testing purposes...

Can someone please confirm that the above is a good practice and/or suggest an alternative solution?

'suggest an alternative solution' for what? You haven't actually said what problem you are trying to solve. Generally I would say that aggregation of services and/or directives is best, and controllers should be too simple to consider extending. — Duncan, Feb 05 '16 at 09:06
I don't think is a good solution. I think You should move that functionality to a service and share it where need it. — Raulucco, Feb 05 '16 at 09:31
@Duncan: I meant suggest a solution for factoring out behavior. — balteo, Feb 05 '16 at 09:34
Can you edit your question to be more specific about the behaviour you want factored out? Sometimes moving it into a service is the appropriate answer, sometimes a directive is the way to go. Maybe sometimes subclassing a controller would be but I think that would be unusual. Remember also scopes are nested so you can often put shared code in a root controller, or communicate with angular events. No one-answer-fits-all here. — Duncan, Feb 05 '16 at 09:41
If you have many functions in the controllers you might need to think about extracting those in separate services and models.. Also a better practice is to use controllerAs instead of $scope. If you use $scope to watch on, then there are ways to refactor so you are decoupled from it ( http://www.benlesh.com/2013/10/title.html). Here is another good article for avoiding scope soup (http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html) — Michail Michailidis, Feb 05 '16 at 09:42
@Duncan: I really meant in a general way. We have a large app and are just considering several solutions. I will take your input into account. Thanks. — balteo, Feb 05 '16 at 09:48

score 0 · Answer 1 · edited May 23 '17 at 10:28

Yes, you can share the view related common code using $controller. Check my answer for the same here. https://stackoverflow.com/a/27868095/3292746

If you are using controllerAs syntax, we can share the code in better way by just using class implementation in javascript.

For example:

function CommonCtrl(){
     this.commonMethod = function(){

     }
}

And in your controller

// __extends code is copied from typescript transpiled code.
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var AppCtrl = (function(_super){
     __extends(AppCtrl, _super);
    function AppCtrl(){
        _super.call(this);   // calling CommonCtrl constructor.
        this.member1 = null;
    }
    AppCtrl.prorotype.specificMethod = function(){

    }
    return AppCtrl;  
})(CommonCtrl)
app.controller('AppCtrl', AppCtrl);

Is it good practice to extend a base controller in angularjs

1 Answers1