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

Liste aller Einträge anzeigen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In Ihrer Single-Page-Anwendung können Sie nun eine Speisekarte mit Katgorien und zugehörigen Speisen anzeigen. Auch Beschreibung und Preis sollen nun angezeigt werden. Dazu nutzen Sie das sogenannte Flex-Layout von Angular.
08:56

Transkript

In meiner Single Page-Anwendung, die Sie hier sehen, kann ich aktuell eine Speisekarte darstellen. Die Daten ruf ich dazu von einer WebAPI ab und bekomme hier Kategorien und Speisen angezeigt. Neben den Speisenamen und -nummern, die wir hier sehen, bekomm ich darüber hinaus aber auch noch eine Beschreibung und einen Preis mitgeliefert. Und beides will ich jetzt ganz gern anzeigen, und zwar unter der Speise, aber nebeneinander. Dazu können wir unter Angular das sogenannte Flex-Layout benutzen. Das Flex-Layout, das ist also ein Grid-ähnliches Layout, was allerdings nicht direkt mit Angular Material mitkommt, sondern wir müssen das separat nachinstallieren. Darüber hinaus gibt es noch eine Kleinigkeit, die mich ein wenig stört, nämlich wenn ich die Seite neu lade, dann kommt hier oben der Header und dann dauert das immer ein Augenblick, bis die Inhalte kommen, je nachdem wie schnell die API antwortet, wenn die jetzt lange braucht, dann steht Speisekarte hier, das ist einfach leer, und zwar für eine ganze Weile. Und hier möchte ich dem Benutzer ganz gerne eine Anzeige geben, damit er weiß, hier passiert irgendetwas. Fangen wir einmal mit dieser Anzeige an. Was ich hier implementieren möchte, ist Folgendes: Ich geh mal kurz auf material.angular.io, und hier möchte ich ganz gern eine Komponente einbauen, nämlich eine Komponente, die einen Progress-Kreis anzeigt, so einen Progress spinner. Wie funktioniert das Ganze? Wir können uns das hier also anschauen, von der Grundidee her habe ich hier die Möglichkeit einen nicht-deterministischen oder einen deterministischen Progress spinner zu benutzen, da ich nicht weiß, wie weit die API ist, nämlich eine nicht-deterministische, und den bekomm ich am einfachsten, indem ich einfach nur md-spinner in meine Webseite einfüge. Also kopier ich mir das einmal schnell und wechsel in meine Menü- Komponente herein und hier oben füge ich jetzt diesen Spinner ein. Jetzt ist es so, dass ich diesen Spinner natürlich nicht immer darstellen will und was mach ich jetzt hier? Ich sag einfach Folgendes: Ich kann hier sagen, dass ich den Bereich hier nur anzeigen möchte, und das kann ich über einen ngIf sagen, wenn categories nicht da sind, also if not categories, sprich, solange die noch null sind, solange möcht ich das anzeigen und danach nicht mehr. Hier unten kann ich es auch umgekehrt machen, hier kann ich sagen: "Diesen Bereich hier, den will ich erst bei mir überhaupt im DOM haben, wenn die Kategorien gefüllt sind. So, und da JavaScript evaluiert ja alles, was null oder undefined ist zu einem falsy-Wert, darum muss ich hier nicht irgendwie so etwas in der Richtung reinschreiben, sondern kann einfach nur sagen: "if categories und if not categories". Gucken wir uns das Ergebnis schon einmal an, ich speichere das ganz kurz, wechsel in den Browser herein und dann aktualisieren wir hier einmal, und da haben Sie es ganz kurz vielleicht gesehen, da war für einen kurzen Augenblick dieser Spinner da, und ich kann das einfach mal schnell simulieren, indem ich mal in meine API hereingehe, und zwar hier in den CategoriesController, und hier einfach einen Breakpoint setze, dann sollte der Spinner eine ganze Weile da sein. Also einmal aktualisieren, so, da ist der Spinner und jetzt nehm ich den Breakpoint hier heraus und geh auf Weiter und jetzt sind die Daten da und der Spinner ist weg. So weit, so gut. Das Nächste besteht also jetzt für mich darin, dass ich hier den Preis und die Kategorie anzeigen möchte. Wie gehen wir hier vor? Die Grundidee dabei ist folgende: Ich möchte hier ganz gerne angular flex benutzen. Angular Flex, das ist das Flex-Layout für Angular, also eine Layout-Engine, die uns in die Lage versetzt, unser Layout in Form eines Grids darzustellen und das Ganze natürlich auch responsive. So es gibt jetzt, wenn wir hier unter github.com/angular/flex-layout ein wenig herunterscrollen, dann gibt es hier einen Link Integration with Angular CLI. Das Ganze ist also relativ simpel: Wir sollen erst einmal die Angular CLI installieren, dann wieder neu installieren. Das liegt daran, dass wir vielleicht eine alte Version haben. Ich habe meine Angular CLI aber erst kürzlich installiert, deswegen mach ich das hier nicht, stattdessen geh ich mal zu dem interessanteren Bereich, nämlich zu diesem hier, ich möchte ganz gerne Angular Flex installieren. Ich wechsle dazu in eine Eingabeaufforderung, die ist auch in meinem Projektverzeichnis aktuell. So. Und hierfür geb ich jetzt das ein, was ich mir hier in die Zwischenablage kopiert habe, heißt, ich installiere jetzt in meinem Projekt das Flex-Layout. Wenn ich das installiert habe, dann muss ich noch etwas machen, und zwar muss ich in meiner app.module.ts das Flex-Layout importieren, also hier einmal kopieren, dann wechsel ich in meinen Source Code, in die Datei app.module, die ist im Ordner ClientApp. Dann gib es hier die app.module.ts und hier muss ich jetzt das Flex-Layout einmal importieren und dann bei den Imports das Ganze auch angeben: FlexLayoutModule. So, schauen wir mal, wie weit die Installation ist, das ist hier auch so weit durchgelaufen, bedeutet, ich kann schon mal wieder die Anwendungen bauen im Watch Mode und kann jetzt in meine Menü-Komponente wechseln, denn das ist ja die, die mir hier diese Darstellung macht, und da geh ich in mein Template herein. Und im Template werde ich jetzt hingehen, das ist ein menu.component.html hier, hier werde ich jetzt hingehen und werde das Flex-Layout benutzen. Wie funktioniert das von der Grundidee her? Ich habe hier meine Speise und das ist eine einzelne Zeile. Ich werde jetzt über div md-line eine weitere Zeile hinzufügen und in dieser Zeile möchte ich jetzt nebeneinander Preis und Beschreibung haben. Dazu brauch ich jetzt noch ein div, und dieses div, das bekommt jetzt das Attribut fxLayout auf row gesetzt, weil wir hier ein zeilenbasiertes Layout haben und die Inhalte, die wir jetzt hier hereinpacken, sind Spalten. Und zwar soll die erste Spalte 90 Prozent einnehmen, und da soll dann drinstehen unsere Beschreibung. Dann haben wir die zweite Spalte, die soll dann dementsprechend 10 Prozent einnehmen und da soll dann der Preis stehen. So, aktualisieren wir die Seite einmal, und das sieht doch ganz gut aus. Wir haben jetzt hier Nummer und Name der Speise, hier sehen wir die Beschreibung und hier rechts haben wir den Preis. Der Weg dahin, der bestand jetzt für uns darin, dass wir das Flex-Layout installieren mussten. Im Gegensatz zu anderen Frameworks wie zum Beispiel Bootstrap bringt AngularUI erst mal kein Grid-System mit, das müssen wir nachinstallieren, und zwar über die Installation des NPM-Paketes angular/flex-layout. Anschließend können wir das Ganze benutzen. Ich hab jetzt hier natürlich nur ein kleines Beispiel gezeigt, wenn Sie weitere Beispiele sehen wollen, dann können Sie unter github.com/angular/flex-layout in den Bereich Demos klicken. Und hier sehen Sie jetzt verschiedene Demos des Flex-Layouts, also Sie können sich hier zum Beispiel anschauen, "Aha, wie sieht das aus, wenn ich den ersten Bereich mit 20 und dann den nächsten mit 60 und den Rest einfach auffüllen will?". Sie können sich hier mehrzeilige Layouts anschauen und so weiter, und sehen dann hier jeweils dann auch einen Verweis auf den Source Code zu diesen Demos. Ansonsten habe ich noch einen kleinen Spinner eingebaut, der ein bisschen Komfort für den Anwender bietet, der also zeigt, hier passiert gerade was, und das war relativ simpel, hier habe ich einfach nur ein MD-Spinner-Element von Angular Material benutzt und habe dann über ein ngIf gesteuert, der soll nur angezeigt werden, solange die Kategorien noch nicht befüllt sind. Und das funktioniert deswegen, weil in meiner Komponente die Kategorien erstmal nur deklariert, aber nicht initialisiert werden; initialisiert werden die erst, wenn hier eine Antwort vom Service gekommen ist.

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!