Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

SPA mit ASP.NET Core und Angular

Einträge bearbeiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film zeigt der Trainer Ihnen, wie Sie die Detailseite Ihrer Anwendung durch ein Eingabeformular erweitern, mit dem die Detaileinträge bearbeitet werden können.
15:41

Transkript

In meiner Anwendung habe ich aktuell eine Startseite und eine Detailseite. Die Detailseite zeigt aktuell die Details zu einer Speise an und diese Seite möchte ich nun gerne erweitern. Und zwar hätte ich hier gerne ein Eingabeformular, um diese Daten nicht nur anzeigen, sondern sogar bearbeiten zu können. Wenn ich Daten bearbeiten möchte, dann brauche ich in der Regel eine Zwei-Wege-Datenbindung. Damit diese funktioniert muss ich zunächst noch das FormsModul importieren, was Standardmäßig nicht von Angular importiert wird. Bedeutet: Ich gehe in meine app.module-Datei und hier oben, wo ich bereits ng-module aus Angular Core importiere, werde ich jetzt auch gleich noch das FormsModul importieren. Dieses Modul, das befindet sich in angular/forms. Bedeutet also ich sage hier import { FormsModule } from @angular/forms. Dieses FormsModul, das muss ich im nächsten Schritt dann auch in meine Imports mit aufnehmen. So. Und zwar an der Stelle hier. Anschließend kann ich mich jetzt ganz um meine Komponente kümmern, und zwar um die Dish-Detail-Komponente. Aktuell habe ich hier oben einen Spinner stehen und der wird solange angezeigt, wie ich noch keine Speise geladen habe. Ich möchte das ganz gerne erweitern. Und zwar soll der solange angezeigt werden, wie ich noch keine Speise habe. Oder auch solange wie ich noch keine Kategorie geladen habe und also not categories. Im Gegenzug sage ich dazu, das dieser Teil hier erst angezeigt werden soll, wenn ich sowohl Kategorien als auch das Gericht habe. Allerdings möchte ich hier keinen p-Tag nutzen, sondern ich würde hier ganz gern ein Formular anzeigen, denn ich möchte ja Daten editieren. Dieses Formular, das erhält von mir CSS-Klasse, nämlich dish-form. Damit werde ich die Breite des Formulars gleich noch einschränken. Das mache ich aber in einem nächsten Schritt. Anschließend werde ich nun hingehen und werde für die Eingabefelder sogenannte md-input-container definieren. Diese md-input-container, die dienen dazu, um einen Rahmen um ein Eingabefeld zu packen. Und zwar jetzt nicht einen Rahmen im bildlichen Sinne, sondern es umrahmt das Ganze. Diese bekommt von mir auch eine Klasse. Und zwar nenne ich diese Klasse full-width, weil ich hier gleich eine Breite von 100 Prozent geben möchte, aber auch das werde ich gleich erst machen. So jetzt kommt mein erstes Input-Feld. Und Input-Felder, die ich mit Angular Material speziell aussehen lassen möchte, die bekommen das mdInput-Attribut. Ich kann hier jetzt einen Placeholder setzen. Zum Beispiel name, denn hier soll ja der Name des Gerichtes eingegeben werden. Und ich kann darüber hinaus eine Datenbindung herstellen. Und zwar binde ich das ng-module an dish.name. Wenn ich jetzt so eine Bindung mache, dann muss ich zunächst sagen, geht das in den Controller rein oder aus dem Controller raus. So. Wenn ich eine Bindung machen möchte von meinem Formular in die Komponente herein, dann nutze ich runde Klammern. Möchte ich von der Komponente in mein Formular hereinbinden, nutze ich eckige Klammern. Und möchte ich eine Zwei-Wege-Bindung haben, dann benutze ich eckige Klammern um runde Klammern herum. Man spricht in diesem Zusammenhang auch von dem Banana-in-the-Box-Binding, denn wenn ich hier einmal das ng-module rausmache, dann sieht das halt aus, wie so eine Banane in einer Box. Andere sagen auch, das Runde muss ins Eckige. Sie können sich das also merken, wie sie wollen. Auf jeden Fall müssen außen die eckige und innen die runden Klammern stehen. So binde ich also meine Eigenschaft name und anschließend setze ich noch eine Maximallänge von 100. Jetzt möchte ich dem Benutzer ganz gerne mitteilen, dass es diese Maximallänge gibt und deswegen werde ich hier zum einen noch die name-Eigenschaft setzen. Zum anderen werde ich hier unten noch ein hint-Feld hinsetzen. Und zwar soll das rechts stehen. Es wird ein Hinweisfeld in dem also steht wie viel noch gefüllt werden kann. Ganz konkret werde ich hier also die Länge des Namens angeben und werde einfach dahinter schreiben von 100. Also zum Beispiel zehn Buchstaben von Hundert. Ganz ähnlich wie jetzt hier mit dem Namen werde ich mit der Beschreibung vorgehen. Nur das wir hier eine textarea haben. Und textarea... Das mache ich hier hinten mal komplett zu. Und wir haben hier eine Länge von 250 gehabt bei der Beschreibung. Überall wo jetzt name stand, das werde ich jetzt durch description ersetzen. Außer natürlich beim Placeholder, da soll Beschreibung stehen. Die Länge hier das waren 250. Und das ist natürlich hier dish.description. So, anschließend brauchen wir noch ein Feld für den Preis. Das ist ein input vom type number. Der Placeholder ist Preis. Mein Module ist dish.price. maxlength habe ich jetzt hier an dieser Stelle nicht. Aber ich habe wieder ein name, nämlich price. Und als hint möchte ich diesmal vorne demjenigen, der die Speisekarte editieren wird, einen Hinweis geben. Nämlich das hohe Preise die Kunden vergraulen. Also: "Hohe Preise verärgern die Kundschaft." So, zu guter Letzt benötige ich nun noch ein Auswahlfeld für meine Kategorien. Und Auswahlfelder, die können wir auch mit Angular Material erstellen. Dazu nutzen wir das Element md-select. Und auch das bekommt die Klasse full-width. Das bekommt einen Placeholder-Text von Kategorie. Das bekommt ein ng-module. Und wie denken wir daran? Außen eckig, innen rund. Und hier binden wir dish.categoryId. Wir müssen natürlich auch hier einen Namen vergeben. Das ist jetzt der äußere Rahmen für mein Auswahlfeld. Jetzt brauche ich noch Optionen, die ich auswählen kann und die kann ich mit md-option einpflegen. Und hier kann ich jetzt ngFor benutzen, um diese Optionen für alle möglichen Optionen zu wiederholen, und wir möchten hier Kategorien aus den categories wiederholen. Und hier gibt es jetzt zwei Dinge, die ich binden möchte. Zum einen den value. Das ist category.id. Und zum anderen möchte ich natürlich eine Anzeige haben und das ist category.name. Zu guter Letzt benötigen wir nur noch etwas, um dieses Formular auch abzuschicken. Und dazu nutze ich einen Button. Und der bekommt das Attribut md-button, damit der im Angular-Material-Design ist. Und wenn ich hier klicke, dann möchte ich die Methode save aufrufen, die ich jetzt gleich noch schreiben werde. Und der Text ist Speichern. So jetzt bin ich hier auch schon fast fertig. Das Endergebnis können wir uns gleich ansehen. Davor muss ich allerdings noch in mein CSS-Datei hereingehen und muss noch zwei Klassen anlegen. Nämlich einmal dish-form als CSS-Klasse und dish-form ist wie folgt definiert. Ich habe hier einfach eine Breite von 500 Pixeln und dann hätten wir noch die Klasse full-width und die setze ich auf eine Breite von 100 Prozent. Dann brauchen wir, damit wir gleich keine Fehlermeldung erhalten, auch noch die Methode save in unserer Komponente. Die kann ich hier unten anlegen. Also save ist vom Typ void und save wird Folgendes machen. Save wird hingehen und auf unserem vegiService eine Methode saveDish aufrufen. Diese Methode, die muss ich schnell implementieren in meinem vegiService. Also habe ich hier saveDish und ich übergebe ein dish vom Typ Dish und zurück kommt ein Promise vom Typ Dish. Diesmal müssen wir über http.put unsere API aufrufen, weil wir ja etwas aktualisieren möchten. Die URL kann ich genauso zusammenbauen, wie hier oben. Und auch den Rest kann ich mir entsprechend kopieren. Nur das ich hier noch meinen Objekteintrag übergeben muss und das ich hier dish.id sage. Wie funktioniert also dieser Aufruf? Im Endeffekt mache ich ein http.put auf api/dishes, sondern die Id. Ich übergebe mein dish, also meinen Eintrag, und gebe dann das Objekt an sich zurück. Innerhalb meiner Komponente kann ich also jetzt den vegiService aufrufen und sage hier saveDish und übergebe meinen dish und wenn das Ganze fertig ist, dann möchte ich ganz gerne Folgendes machen. Dann möchte ich gerne zurücknavigieren auf die Startseite. Um zurücknavigieren zu können muss ich den router importieren aus angular/router und muss mir diesen hier injizieren -- private router: Router -- und kann dann hier unten sagen: this.router.navigate. Und als Parameter übergebe ich an navigate einfach nur die Startroute. So hier muss ein this vor das dish. Dann wird auch mein Feld genommen, was ich hier oben definiert habe. Hier fehlt noch ein Semikolon. Und damit sind wir soweit jetzt fertig und können das Ganze einmal ausprobieren. Dazu wechsel ich in den Browser, gehe einmal auf die Homepage. So. Gehe dann hier auf meine Formularseite. Das lädt ein wenig lange. Keinen Fehler. Ich schaue mal ganz schnell in meine Seite herein. Vielleicht habe ich hier einen Fehler bei der Benamung gemacht. Also meiner Dinge die ich Abrufe, das sind einmal die categories. Und hier fehlte die Zuweisung beim laden. Darum wurde das nicht ausgeblendet hier oben. Also noch mal. So, und das sieht schon etwas besser aus. Wir haben also jetzt hier unser Eingabeformular. Und wenn Sie sich das mal kurz anschauen, dann sehen Sie: Aha, ich habe hier oben "Ensalada de Casa" stehen. Wenn ich jetzt hier etwas tippe, dann sehen Sie das hier unten sich diese Anzeige entsprechend erhöht. Außerdem habe ich diese leichte Animation, sobald ich in ein Feld herein klicke. Ich habe hier auch mein Hinweistext: "Hohe Preise verärgern die Kundschaft." Und hier unten ist mein Button. Aktuell wird mein Drop-down leider hier herein gerendert und das ist in der aktuellen Version ein kleiner Fehler in den Styles von dieser Select-Komponente. Das können wir aber relativ einfach selbst beheben, indem ich in meine CSS-Datei hereingehe und einfach eine Klasse mache. Die nenne ich select-fix. Und diese Klasse, die macht Folgendes. Die setzt einfach mal eine margin von 30 und dann 0 und dann noch mal 10 und dann noch mal 0. Und das Ganze darf natürlich nicht als String verpackt werden. So. Wenn wir das gemacht haben und ich jetzt meinem Element diese Klasse gebe -- hier dem md-select neben full-width auch select-fix -- dann... Na, der braucht natürlich beide. Dann sollte das etwas besser aussehen. Wechseln wir noch einmal zurück. Gehen hier schnell heraus. Und wir gehen hier mal auf den Ensalada furia. Und jetzt sehen wir auch hier, dass das Ganze nach unten gewandert ist. Jetzt kann ich das auch mal editieren und sag zum Beispiel, der Salat ist nicht nur scharf, der ist sehr scharf und speichere. Ich bin zurück auf die Startseite geleitet worden und hier steht nun auch "sehr scharf". Was waren also die Schritte, die ich erledigen musste. Punkt Nummer eins war, ich musste das Forms-Modul importieren, in meiner App module-ts. Ohne das Forms-Modul funktioniert diese Zwei-Wege-Datenbindung nicht zwischen unserer Modellklasse, die wir ja hier haben. Nämlich ist das hier ein Objekt vom Typ Dish und unserem Markup. In meinem Markup, in dem HTML meiner Komponente habe ich Komponenten von Angular Material genutzt, und zwar md-input-Komponenten und md-select. Eine Liste der Komponenten inklusive Beispielen, bei denen auch erklärt wird, wie auch das Markup zu benutzen ist, die finden Sie in der Dokumentation von Angular Material übrigens. Da können Sie sich das noch mal in Ruhe alles anschauen. Ansonsten habe ich meinen Service noch erweitert um eine Methode zum Speichern, habe den Button hier unten einen Event-Handler verpasst und damit bin ich jetzt in der Lage, Daten nicht nur zu laden und in einem Eingabeformular darzustellen, sondern auch wieder an meine API zurückzuschicken und zu speichern.

SPA mit ASP.NET Core und Angular

Lernen Sie die Bestandteile von modernen Webanwendungen kennen und nutzen.

5 Std. 21 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.09.2017

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!