Was ist Dependency Injection???

Letzte Woche habe ich einige Konzepte von Angular 2, die ich bereits gelernt habe, für mich zusammengefasst. Ein großes Konzept habe ich dabei ausgelassen, weil es mich völlig überfordert hat. Dieses möchte ich heute erläutern und versuchen zu verstehen. Es geht natürlich um Dependency Injection.

pfeildings

Eine hoffentlich leichte Erklärung

Um Dependency Injection zu verstehen muss man erst mal wissen was eine Dependency (Abhängigkeit) ist. Dazu ein kleiner Codeschnipsel:

export class Auto {

  public motor: Motor;

  constructor() {
    this.motor= new Motor();
  }

Hier sieht man eine Auto-Klasse, die aber auch noch einen Motor braucht. Das ist eine Dependency / Abhängigkeit.

Mit Dependency Injection darf nirgends das ’new‘ stehen. Der Motor wird zu einem Parameter im Konstruktor:

export class Auto {

  public motor: Motor;

  constructor(public motor: Motor) { }

}

Das ist eigentlich schon alles. Das ist Dependency Injection.

Auswirkungen

Wenn man nun ein neues Auto erstellt sieht das so aus:

let auto = new Auto(new Motor());

Das gute daran ist, wenn man nun den Motor erweitert, ist das nicht das Problem der Autoklasse. So lässt sich die Autoklasse viel leichter testen. In den Konstruktor lassen sich zum testen einfach Mocks eingeben, die dasselbe machen wie der Motor. Aber verschwinden tut das Problem auch nicht, es ist jetzt nur ein Level hochgewandert und das Problem des Autonutzers. Wenn der Motor sich jetzt ändert sieht das nämlich so aus:

let auto = new Auto(new Motor(mitTurboBoost));

Nochmal Dependency Injection in einem Satz:

Dependency Injection ist ein Coding pattern, bei welchem Klassen alle Abhängigkeiten von externen Quellen erhalten, anstatt sie selbst zu erstellen.

pfeildings

Was ist also mit dem Problem, dass der Autonutzer sich jetzt um die Teile des Autos kümmern muss? Manchmal schreibt man große Factory-Klassen für sowas, aber das wollen wir nicht, zu aufwändig. Was wir wollen ist etwas, das diese Parameter automatisch für uns herausfindet und einfügt.

//sowas in der Art wollen wir
let auto = injector.get(Auto);

Genau das macht das Angular Dependency Injector Framework.

Angular 2 Dependency Injection

Der Angular 2 Dependency Injector liefert uns all die tollen Vorteile, die oben schon mal genannt wurden. Skalierbarkeit, Testbarkeit und eine klare Trennung von Aufgaben.

Um den Dependency Injector in Angular 2 zu nutzen muss man prinzipiell drei Dinge tun:

  1. Den @Injectable() Decorator der Klasse/ dem Service hinzufügen.
  2. Den Injector davon erzählen, indem wir es als provider aufzählen.
  3. Die Dependency injecten
  1. @Injectable() importieren und nutzen: 
    import {Injectable} from './@angular/core';
    
    @Injectable()
    export class Auto{
    //...
    }
  2. Das Auto als provider registrieren. In main.ts: 
    //...
    import { Auto } from './auto';
    
    @NgModule({
      declarations: [],
      //...
      bootstrap: [AppComponent],
      providers: [Auto]
    
    )}
    class AppModule{ }
  3. Dependency injecten, da wo das Auto genutzt wird:
    import { Auto } from './auto';
    
    @Component({
    //...
    })
    export class AutoNutzer{
    //...
    menschen: Menschen[];
    }
    
    constructor(private auto: Auto) { }
    
    ngOnInit(){
    // Jetzt kann man das Auto hier einfach benutzen
    this.menschen = this.auto.getInsassen();
    }

Das war ein Minibeispiel zu Dependency Injection um die drei großen Schritte zu zeigen. Meist werden Services injected. Services sind Klassen, die genutzt werden um Code in einer App aufzuräumen und teilen. Oft werden sie für Datenzugriffe genutzt. 

Einfach immer an die drei Punkte oben denken.

pfeildings

Dependency Injection ist ein schweres, gruseliges Thema, also keine Sorge wenn du es nicht sofort verstehst. Schau dir das Video unten in den Quellen nochmal an, das bringt das Grundkonzept auch gut rüber. Wenn du dann noch viel zu viel Freizeit hast, lies den Artikel in den Angular 2 Docs.

Quellen

Die Hauptvorlage findet sich hier: https://angular.io/docs/ts/latest/guide/dependency-injection.html

Und hier noch ein ganz nützliches, knappes Video: https://www.youtube.com/watch?v=IKD2-MAkXyQ

pfeildings

Hoffentlich vergesse ich das nicht wieder bis nächste Woche, war echt schwer das so richtig zu verstehen. Falls du noch einen Fehler entdeckst sag bescheid :p

*bestaunt Wüstenrennmäuse*