Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

Service erstellen: Decorator

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video demonstriert, wie der @Injectable Decorator verwendet wird, um Services in ein Service zu injizieren.
05:36

Transkript

Wie wir in der Lage sind Services zu generieren, und anschließend die generierten Services per Dependency Injection zu nutzen, haben wir bereits gelernt, für den Fall das wir eine Komponente erstellen. Wie sieht es aber aus, wenn ein Service selber in die Lage versetzt werden soll, einen anderen Service zu injizieren, also per Dependency Injection einzubeziehen. ^Nun, das ist im Wesentlichen eigentlich gar nicht so kompliziert denn das einzige, was ich hierfür machen muss, damit mein Service weiß, dass es auch injizierbare Elemente haben kann, ist es, dass ich hier per Decorator Injectable einfach einbinde "Injectable" ist ein Decorator, welcher sich im core-Modul befindet, das heißt, der automatische Import hat hier nicht funktioniert, deswegen übernehme ich das ganz schnell. Und zwar hole ich mir vom Angular von "angular/core" das "Injectable". Großartig. Mit dem Injectable, das ich jetzt hier vor eine Service-Klasse setze, bin ich dann in der Lage, dass wenn ich jetzt hier ein Konstruktor nutze auch ich in diesem Konstruktor dann Dependency Injection verwenden kann. Hierfür möchte ich euch ein kleines Beispiel demonstrieren. Bislang haben wir es so gemacht, dass wir innerhalb der UserData die Liste von Usern vorgehalten haben, welche wir einfach ganz hart in dem Javascript-Modul exportiert haben und eingebunden haben. Im nächsten Schritt möchte ich nun dafür sorgen, dass diese Variable nicht mehr exportiert wird. Und deswegen wird auch gleich die Kompilierung von TypeScript in Javascript nicht mehr zu einem vernünftigen Erfolg führen. Es bleibt hier alles leer. Stattdessen möchte ich nähmlich Folgendes tun: Ich möchte wieder einen Service erzeugen, und dieser Service den erzeuge ich über ein "export class" "UseDataService". Großartig. Und dieser UserDataService, der soll eine Methode haben, "getUserList". Und getUserList ist im Grunde genommen relativ primitiv, denn er gibt genau diese Liste hier zurück. Hierfür schnappe ich mir dann auch noch den Typ und mache ein "return" hier von der UserData. Aufgrund der Tatsache, dass wir hier nur eine normale Variable erstellt haben, könnt ihr euch sicher sein, dass es dann auch woanders nicht zugänglich ist, das heißt, dadurch dass es in dem Modul nicht exportiert wurde, ist das in diesem lokalen Kontext, und deswegen kann auch nur "userData" diese Information zur Verfügung stellen. Jetzt möchte ich euch zeigen, dass ich auch "UserDataService" dann andschließend im UserService verwenden kann. Denkt aber bitte daran, damit ich diesen Service nutzen kann, muss auch dieser Service zwingend natürlich im Modul einmal in den Provider rein, sonst ist der entsprechend nicht für den Compiler erkennbar. Ab jetzt weiß der Compiler, dass es den "UserDataService" gibt. Und den findet er dann entsprechend hier. Und in meinem "user.service" selber da werde ich jetzt ganz einfach einen Parameter hier im Konstruktor verwenden. Für die Dependency Injection nehme ich den "private userDataService". vom Typ "UserDataService" und erzeuge dann hier eine Methode "getUserList". Und die Methode "getUserList" gibt eine Liste von "IUserVO"-Objekten zurück. Und wie soll es anders sein? Diese hole mich mir, indem ich vom UserDataService, den ich mir jetzt per Dependency Injection geholt habe, "getUserList" entsprechend hole. Mir ist vollkommen klar, dass dieses Beispiel jetzt natürlich etwas in Frage zu stellen ist. Da werden einige von euch sagen, wieso hat er denn hier die Liste noch zusätzlich erzeugt, die hat er schon im anderen Service gehabt. Jungs und Mädels, ich weiß das. es geht mir halt tatsächlich nur darum, euch zu zeigen, dass ich jetzt hier über "Injectable" in die Lage versetzt werde, hier in dem Konstruktor ebenfalls Dependency Injection zu nutzen. Wow. Jetzt muss ich eigentlich nur noch dafür sorgen, dass das Ganze wieder funktioniert, also gehe ich hier in die "app.component" zurück. Und in der "app.component" selber seht ihr, dass userData hier mal importiert wurde. Das kann jetzt natürlich nicht mehr funktionieren. ich muss also dafür sorgen, dass ich jetzt hier anders agiere. "userData" war früher hier ein Element. Also werde ich jetzt "userData" vom Import entfernen Großartig. Und stattdessen werde ich jetzt im Konstruktor selber dafür sorgen, dass "this.UserList" befüllt wird vom "userService". Und dieser userService verfügt ja jetzt über die "getUserList". Und denkt bitte nochmal dran, die getUserList wiederum holt sich die Information über den DataService und so habe ich dann halt quasi den Beweis dafür, dass die Dependency Injection in meinem UserService wunderbar funktioniert hat. In diesem Video habt ihr gelernt, wie ihr in die Lage versetzt werdet, innerhalb vo Services auch Dependency Injection im Konstruktor zu nutzen.

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!