Angular 2 Grundkurs

Service erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video zeigt der Trainer, wie Sie einen eigenen UserService erzeugen, um im LocalStorage Daten zu hinterlegen.
03:29

Transkript

In diesem Video möchte ich gemeinsam mit euch unseren ersten Service erzeugen. Services dienen dazu, view-unabhängige Businesslogiken zu speichern oder zu verwalten. Zum Beispiel ist eine view-unabhängige Businesslogik das Laden oder Speichern von Informationen. Das Laden und Speichern von Informationen ist deswegen unabhängig einer View, weil es ja sein kann, dass ich in unterschiedlichen Views diese Logik wieder aufgreifen möchte. Also gehört es schlicht und ergreifend nicht in die View rein, sondern wird per Dependency Injection immer dann geholt, wenn ich sie brauche. Was möchte ich den speichern? Lasst uns doch hier in unserem Beispiel dafür sorgen, dass der selektierte User gespeichert wird. Denn mache ich hier ein Reload, ist mein selektierter User immer weg und das finde ich blöd. Ich beginne also jetzt damit, einen eigenen Service zu machen. Ein eigener Service muss innerhalb einer eigenen Klasse definiert sein. Also mache ich jetzt hier New TypeScript und erzeuge erstmal eine neue TypeScript-Datei. "user.service" Okay. Die Service-Datei ist geöffnet und im nächsten Schritt lösche ich den Kommentar. Und beginne damit, hier "export class" "UserService" zu erzeugen. Die Klasse selber soll über eine Methode verfügen, "setSelectedUser". Die erwartet von mir ein User-Objekt vom Typ "IUserVO". Wird automatisch hier in WebStorm von mir importiert. Und Rückgabewert gibt es nicht, stattdessen machen wir Folgendes: Wir schnappen uns den "localStorage" und sagen "setItem". Und dieses Item speichern wir mit dem Keyword "selected", das heißt, im localStorage soll der selektierte User unter dem Variablennamen "selected" gespeichert sein. Ich kann im localStorage nur Strings speichern, aber ich habe hier ein komplexes Objekt. Also werde ich die Json-Klasse benutzen. Und mittels "stringify" sorge ich nun dafür, dass der User in ein string umgewandelt wird, also in ein Json-String. Danach brauche ich eine Methode, die mir den gespeicherten User auch wieder zurückgibt. Dafür nehme ich getSelectedUser. "getSelectedUser" bekommt natürlich kein Parameter. Stattdessen ist der Rückgabewert "IUserVO". Statt "set" benutze ich "getItem". Der Name des Items muss genauso heißen. Ganz wichtig: Ich bekomme nur einen String und kein Objekt, also benutze ich "JSON", um mit Json dann anschließend ein Pass zu machen. Dadurch wird aus dem String ein Objekt. Dieses Objekt caste ich dann als "IUserVo" und habe an dieser Stelle dann ordnungsgemäß ein IUser-Objekt, das ich zurückgeben kann. Perfekt. Wir haben jetzt also unseren ersten Service angelegt. Und dieser Service macht nichts anderes, als zwei Methoden zur Verfügung zu stellen, SelectUSer und getSelectedUser. Und dieses SelecteUser, "setSelectedUser" schreibt ins localStorage und "getSelectedUser" liest es entsprechend aus. Ihr seht, dass ich ansonsten keine Besonderheit habe, es ist also eine ganz normale Klasse. Und im nächsten Schritt müssen wir diese jetzt einfach auch anwenden. In diesem Video haben wir erstmal gelernt, wie wir für ein localStorage einen Service anlegen.

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!