AngularJS Grundkurs

Dependency Injection

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Durch die Verwendung von Dependency Injection können Controller in AngularJS abhängig von bestimmten Werten innerhalb bestimmter Prozesse injiziert werden.
04:52

Transkript

Eines der wichtigsten Feature in AngularJS ist die dependency injection. Das heißt, die Abhängigkeit bedingte Initiierung von bestimmten Werten innerhalb bestimmter Prozesse. Um das Ganze einmal zu demonstrieren, möchte ich Euch einmal zeigen, dass wir diese dependency injection auch hervorragend in Kontext der Controller verwenden können. Im Kontext eines Models geht das natürlich auch und ist auch Bestandteil eines anderen Videos. Jetzt lasst uns einmal ganz schnell schauen, was es bedeutet, wenn wir jetzt eine dependency injection machen wollen innerhalb eines Controllers. Wir haben hier einen Controller erzeugt, der ganz normal da ist und der keinerlei Abhängigkeiten hat. Dieser Controller, sobald er initialisiert ist, legt hier ein console.log hin. Die erste dependency injection, die ich hier als allererstes machen möchte, ist $log. $log ist eine dependency injection, die wird von AngularJS zur Verfügung gestellt, um tatsächlich logs zur Verfügung zu stellen. Das Wichtige, dass wir logs in dieser Form zur Verfügung stellen, wie wir es jetzt hier sehen, ist darin zu sehen, dass wir natürlich darauf achten müssen, dass es bestimmte Browser gibt, die sehr empfindlich darauf reagieren, wenn man console.log verwendet, ohne dass es auch tatsächlich so eine Konsole gibt und $log macht dann diese Kontrolle, gibt es diese Konsole, kann ich die console.log dann entsprechend verwenden und delegiert das dann einfach durch. Während wir uns jetzt hier unterhalten haben, haben wir schon die erste dependency injection gemacht. Wir haben in den Parameter meines Konstruktors Controller einfach log eingebunden und anschließen wie selbstverständlich verwendet. Log selber haben wir aber zu keinem Zeitpunkt definiert. Das bietet mir AngularJS. Das heißt, ich hänge jetzt an meinem Controller eine Abhängigkeit log hinzu, die dann anschließend in der gesamten Controller Klasse eine Gültigkeit hat und dann auch verwendet werden kann und weiter genutzt werden kann. Ich kann das Ganze natürlich auch ein bisschen weiter treiben. So beispielsweise habe ich hier ein Model und dieses Model ist abgelegt in einem module, das sich app.model nennt. Ich beginne jetzt erst einmal damit, dass ich sage, dass mein Controller abhängig sein soll von diesem Model. Das heißt, ab diesem Moment ist es so, dass wenn dieses Controller Modul aufgebaut wird, dass das Model Modul automatisch dort mitinitiiert wird und zur Verfügung steht. Bedeutet aber, lasst uns noch mal dieses Model anschauen, hier gibt es unterschiedliche Werte, so beispielsweise einmal über die factory das Model selber, das ist über die Klasse hier erzeuge und aber auch Konstanten, die ich hier verwenden kann, um damit zu arbeiten. Was ich jetzt machen möchte, ist an dieser Stelle einfach mal das Model mit zu initiieren. Das heißt, genauso wie ich es hier definiert habe innerhalb der factory, gehe ich jetzt hier in meinen Controller hin und wende das Model hier an und kann dann anschließend dann hier zum Beispiel einen zweiten log machen und in dem zweiten log sorge ich dann dafür, dass innerhalb des Onescopes von dem Model die Methode getValue aufgerufen wird, indem ich dann einfach sage Model.getValue. Wenn wir das Ganze jetzt hier einmal aktualisieren, könnt Ihr wunderbar sehen, dass dann hier zurückgegeben wird Modelwert setzen. Diesen Modelwert setzen. Das haben wir schon in dem vorherigen Beispiel gesehen. Das sehen wir auch hier entsprechend in meiner HTML-Seite. Aber das, was tatsächlich passiert ist, ist, dass dieses getValue die headline zurückgibt. Die headline selber wurde in meinem Model Modul auch als dependency injection hier hinzugefügt und headline selber wurde als Wert hier definiert. Zu Beginn als AngularJS und dann anschließend nach der Initialisierung - der Initialisierungstand war hier – wurde dann der Wert auf Modelwert gesetzt. Das heißt, ganz wichtig, die Applikation startet. Im Model wird ein neuer Wert gesetzt. Der Controller selber bindet das Model und fragt dann diesen Wert erneut wieder ab und dann sehen wir auch, wie herrlich das ist. Das heißt, an unterschiedlichen Stellen passiert etwas. Alle Module arbeiten als kleine Boxen, aber durch die dependency injection ist immer die aktuellste Information, die ich in irgendeiner Form brauche, dann einfach direkt verfügbar und erreichbar, indem ich es einfach in die Abhängigkeit miteinbeziehe und dann entsprechend darstellen lassen kann. Das heißt, in diesem Video haben wir gelernt, wie wir in der Lage sind, einfach per dependency injection Informationen in unseren Ablauf zu bekommen. Sehr wichtig ist, dass das Ganze natürlich auch funktioniert mit einem Gültigkeitsbereich, nämlich dem Gültigkeitsbereich, womit sich dann anschließend eine Ansicht mit einem Controller zum Beispiel austauschen kann. Das werden wir zu einem späteren Zeitpunkt aber noch lernen.

AngularJS Grundkurs

Arbeiten Sie sich in AngularJS, einem JavaScript-Framework von Google, ein und sehen Sie, wie Sie mit MVC-Design-Pattern und Dependency Injection im HTML-Umfeld arbeiten können.

3 Std. 43 min (44 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!