title: How to use typescript inheritance with angular dependency injection
body: <p>I'm building an application with angular and recently switched to TypeScript. The core of my application consists of multiple actual classes that interact with eachother (so not just global services). The way I did this is as follows:</p>
  
  <pre><code>class Person {
      constructor(private $http, public name: string) {
          // ... use this.$http for some task
      }
  }
  
  class PersonFactory {
      static $inject = ['$http'];
  
      constructor(private $http) {}
  
      create(name: string) {
          return new Person(this.$http, name);
      }
  }
  
  angular.module('app').service('personFactory', PersonFactory);
  </code></pre>
  
  <p>So if some other class needs to create a <code>Person</code> object, it needs to get injected with <code>PersonFactory</code> and call its <code>create</code> method. This works ok, even though it requires some boilerplate.</p>
  
  <p>My main problem arises when I want to subclass Person:</p>
  
  <pre><code>class Student extends Person {
      constructor(private $http) {
          super(this.$http, 'Some actual name')
      }
  }
  </code></pre>
  
  <p>I could follow the same pattern as above, but then I need to, again, create a <code>StudentFactory</code> that passes the required services like $http to the class constructor, which in turn passes it to the constructor of the super method. If I now had multiple such extending classes and would change the base class <code>Person</code>, I had to change every extending class and their factories. Is there a better way to approach this problem? Might it be better to just remove all dependencies on angular services in my core application and just use angular for the UI code?</p>
  
  <p><strong>Solution</strong></p>
  
  <p>As suggested in the answers, I added the $injector service to the window, like this:</p>
  
  <pre><code>module('app').run(['$injector', function($injector) {
      window.$injector = $injector;
  }]);
  </code></pre>
  
  <p>The service can now be used in any class to get other services like $http.
  This didn't work for unit tests though, so I had to put the injector on the global scope again:</p>
  
  <pre><code>// MyClass.test.js
  var $injector;
  
  describe('My class', function() {
      beforeEach(module('app'));
  
      beforeEach(inject(function(_$injector_) {
          $injector = _$injector_;
      }));
  
      ...
  });
  </code></pre>