Angular 2 Grundkurs

Dependency Injection (DI)

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dependency Injection ermöglicht es, Services zu instanziieren und zu nutzen. Das Video erklärt zudem das Grundprinzip der DI.
04:03

Transkript

Ein wichtiger Punkt in der Angular-2-Architekturwelt ist die Dependency Injection; kurz auch DI genannt. Mit der Dependency Injection seid ihr in der Lage, automatisiert Objektinstanzen zu erzeugen und diese dann nach Abhängigkeit oder Bedarf z.B. in Konstruktoren zu hinterlegen. Wie sieht das Ganze aus? Ich mache mit der Dependency Injection eine abhängigkeitsgebundene Objektinstanziierung und -zuweisung. Hört sich wahnsinnig an, oder? Es bedeutet aber ganz einfach: Ich bin innerhalb eines Komponenten-Konstruktors in der Lage, einen Parameter zu definieren. Dieser Parameter heißt zum Beispiel formBuilder und ist vom Typ "FormBuilder". Erinnert euch bitte daran: Der Konstruktor einer Komponente ist etwas, was ihr eigentlich, im Grunde genommen, nie ansprecht, sondern die Komponente werden ja einfach mittels Selector auf die Bühne gelegt und der Konstruktor selber wird im Kontext von Angular aufgerufen. Was macht also Angular in diesem Kontext? Es erkennt: Im Konstruktor wird der formBuilder benötigt. Er guckt es in einem Injector-Objekt für die Komponente nach. Hey, gibt es eigentlich einen Service, einen Provider, der formBuilder heißt, den ich dann hier initiieren kann? Sollte das der Fall sein, wird er automatisch hier als Parameter übergeben. Dieser ist im Kontext des Injectors auch eine Singleton. Und mein console.log sagt dann: Hey, die app.component.ts sagt hier aus: der formBuilder wurde injected als formBuilder-Objekt, genauso, wie ich es verlangt habe. Entscheidend ist, dass, wenn ich den formBuilder verwenden möchte, ich den Provider zunächst einmal anmelden muss. Das heißt, ich muss, bevor ich eine Dependency Injection nutzen kann, eine Einbindung des Providers machen. Auch das hört sich wild an, bedeutet aber nichts Anderes, als dass ich hingehen muss, in der "bootstrap"-Anweisung mit der ich ja in der Lage bin, die Root-Komponente zu definieren. Zusätzlich noch zu sagen: Hey! Ich möchte, dass die gesamte Anwendung in der Lage ist, mit dem FormularService und dem DatenService zu arbeiten. Ab diesem Moment bin ich dann in der Lage, so etwas wie einen formBuilder und Ähnliches einfach als Dependency Injection zu benutzen, weil ich es hier quasi ankündige und damit auch die Injector-Instanz von meiner Applikations-Komponente, die als Root-Komponente alle anderen Komponenten [unverständlich], die im Verlaufe noch in mein Projekt hinzukommen, dann hinterlege. Das bedeutet auch, dass ich ohne Probleme in der Lage bin, in jeder Kindskomponente auf diese FormularServices oder auch DatenServices zurückgreifen zu können. Das Tolle dabei ist, dass es immer pro Injector eine Singleton gibt. Ich bin aber auch in der Lage, individuell für eine Komponente Provider zu definieren. So kann ich mit der Metadaten-Eigenschaft "providers" eine Liste übergeben von den provider-Objekten, die meistens auf Services referenzieren, die ich in der Komponente nutzen will. Wichtig dabei anzumerken ist, dass in der Injektor-Instanz von dieser Komponente wiederum ein Singleton ist. Das bedeutet aber, ich hätte jetzt schon zwei Singletons. Eines, das global, über den bootstrap initialisiert wurde und einen über den Provider für den Component. Also: Provider werden in Injectoren hinterlegt. Und ganz wichtig ist: Der Injector stellt eine Singleton-Instanz für die Dependency Injection bereit. Dabei ist es so: Dass diese Singleton-Instanz, die zur Verfügung gestellt wird, pro Injector dann abgelegt wird, benutze ich also einen Provider zweimal. So werde ich dann auch zwei Instanzen des DatenServices bekommen. Benutze ich es nur einmalig, wäre das z.B. auch ein supertoller Weg, um Informationen zwischen unabhängigen Komponenten hin- und her zu tauschen, indem man den DatenService beispielsweise als Brücke zwischen den Komponenten benutzt. In diesem Video haben wir die Dependency Injection kennengelernt.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!