Angularjs Typescript Controller Inheritance and Dependency Injection

Question

I am trying to create a set of Controller classes which are derived from a base class that have many dependencies. Every time I want to create a derived class I have to copy the base class constructor dependencies into the derived class constructor. This seems particularly ugly and repetitive. See below;

module MyModule
{    
     export class ParentCtrl
     {
         constructor($http, $provide, $scope,$compile,MyService,$parse,$timeout)
         {
             console.log('parent');
         }

         FunctionA(){...}
         ...
         FunctionZ(){...}
     }

     export class ChildCtrl extends ParentCtrl
     {
         constructor($http, $provide, $scope,$compile,MyService,$parse,$timeout)
         {
           super($http, $provide, $scope,$compile,MyService,$parse,$timeout);
           console.log('child');
         }
         FunctionA(){ console.log('Override A'); }
     }

     export class GrandChildCtrl extends ChildCtrl
     {
         constructor($http, $provide, $scope,$compile,MyService,$parse,$timeout)
         {
           super($http, $provide, $scope,$compile,MyService,$parse,$timeout);
           console.log('grandchild');
         }
         FunctionB(){ console.log('Override B'); }
     }
 }

I have removed the type definitions from the constructor parameters for ease of reading.

Is there a way to avoid these lengthy constructor being duplicated? I had thought of having a function in the base/Parent controller which is called from the constructor to inject the required types. This would mean dependencies would be confined to the base class.

Has anyone successfully tried this before?

basarat · Accepted Answer · 2014-08-21 12:53:49Z

5

Angular is not friendly to controller inheritance. It favors composition. Consider factoring out the utility code into an Angular Service : https://docs.angularjs.org/guide/services (which are singletons) or just another typescript utility class.

If you must you could just inject the $injector in the base : https://docs.angularjs.org/api/auto/service/$injector and use that to load what you need inside the base constructor.

edited Aug 21, 2014 at 12:53

answered Aug 21, 2014 at 10:53

basarat

278k60 gold badges475 silver badges528 bronze badges

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

4 Comments

devman81 Over a year ago

Basarat many thanks for your feedback. The $injector is the preferred approach for which I have not been able to get the $injector to work. I've not been sure how to get the correct injector in attempts so far. Also do you foresee any problems with this approach?

basarat Over a year ago

You can get $injector same as e.g. $http. Foresee : if it works for you go for it :)

neoselcev Over a year ago

@devman81 I know, this i pretty old tree, but... I can't get in working (injecting straight into a base controller). Can you please give an example?

devman81 Over a year ago

export class ParentCtrl      {          protected $http;          constructor($injector)          {              console.log('parent');              this.$http = $injector.get('$http');          }           FunctionA(){...}                }       export class ChildCtrl extends ParentCtrl      {          constructor($injector)          {            super($injector);            console.log('child');          }          FunctionA(){ console.log('Override A'); }      }

user5347735 · Accepted Answer · 2015-09-17 18:29:20Z

-4

Just inject the dependencies in the base class and store them publicly. Derived class will be able to access them.

answered Sep 17, 2015 at 18:29

user5347735

1

Collectives™ on Stack Overflow

Angularjs Typescript Controller Inheritance and Dependency Injection

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related