Is controller inheritance a good practice in AngularJS?

Question

I am new to AngularJS and i don't know if "Is controller inheritance a good practice in AngularJS?". I mean that if I have 2 almost the same controllers like here:

someModule.controller('SimilarController1', function($scope) {
    $scope.theSameFun1 = function() {
        // Some $scope manipulation
    };
    $scope.theSameFun2 = function() {
        // Some $scope manipulation
    };
    $scope.foo = function() {
        // Some $scope manipulation
    };
});

someModule.controller('SimilarController2', function($scope) {
    $scope.theSameFun1 = function() {
        // Some $scope manipulation
    };
    $scope.theSameFun2 = function() {
        // Some $scope manipulation
    };
    $scope.bar = function() {
        // Some $scope manipulation
    };
});

then I can write it like this:

someModule.controller('BaseController', function($scope) {
    $scope.theSameFun1 = function() {
        // Some $scope manipulation
    };
    $scope.theSameFun2 = function() {
        // Some $scope manipulation
    };
});

someModule.controller('SimilarController1', function($scope, $controller) {
    $controller('BaseController', {$scope: $scope});
    $scope.foo = function() {
        // Some $scope manipulation
    };
});

someModule.controller('SimilarController2', function($scope, $controller) {
    $controller('BaseController', {$scope: $scope});
    $scope.bar = function() {
        // Some $scope manipulation
    };
});

Is that "Angular way" to solve this kind of problem?

I have read that repeated parts should be in service/factory. I have also read that passing and manipulating on $scope in service/factory is bad practice, so it's probably not good idea in this situation.

http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html — Sergey Moiseev, Jul 06 '14 at 11:18

score 2 · Answer 1 · answered Jul 06 '14 at 13:59

This answer isn't specific to AngularJS but in general you should prefer composition to inheritance and the reason for this is that if you add new functionality to a base class then it's inherited by all the derived types. At first this sounds like just the behaviour you require until one of your derived types needs slightly different behaviour and then in your derived type you need to override the base behaviour to get your specialist behaviour. Doing this once is ok (maybe) but with a large number of polymorphic types management and keeping track of what uses the base behaviour and what has a specialist override and then ensuring that when a base behaviour changes the specialists change in synch just becomes a pain.

Therefore if we prefer composition, that is if we design each class so that it accepts predefined components with bite sized pieces of specific functionality then we can change the specific behaviour in one of our instances by changing the component it gets built with. Overall this fits better with best practice principles (SOLID) etc.

And bringing it back to AngularJS, Angular encourages this with its dependency injection scheme of doing things- creating services and then injecting them into controllers and other services. So the angular way of doing this would be to build a service which encapsulates the functionality to be shared by each controller and then inject that service into each controller that needs it. You might think along the lines of rather than having one monolithic service that does everything a controller could possibly need, instead build smaller services that just provide a specific set of related functions this is just adhering to the separation of concerns principle. This finer grained service pattern means that each controller only ends up with the services it needs and the decision to reuse a service is much easier.

It looks to me that you should take a note on SOLID principles, specifically on "O". Why you should prefer composition to inheritance? To my knowledge there are specific cases when inheritance should be used there are another cases when composition should be used, the notion of "preference" is the sign of misunderstanding for a case when developer doesn't give a clue on why he is visiting his job. I'm hearing this idea for some time already mostly by devs who have unhealthy love to spaghetti. And no one can provide a reference or explanation on why such preference should happen in that way? — Lu4, Nov 17 '15 at 15:32

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Inheritance is an OOP concept, Angular is a javascript framework, these are different concepts, you should use OOP to parametrize your code, you should use angular to prevent yourself from writing custom DOM queries which is an overkill compared to MVVW frameworks. Consider Angular 2.0 it uses ES6 classes which come with full blown OOP concept. So my answer to your question feel free to use OOP with angular, learn Angular 2.0 and try using it's concepts in Angular 1.0...

Btw, consider the following question for your benefit: angularjs with oop inheritance in action

Is controller inheritance a good practice in AngularJS?

2 Answers2