SPA mit ASP.NET Core und Angular

Oberflächenelemente erzeugen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film erstellen Sie die Oberflächenelemente für Ihre Client-Anwendung. Sie verwenden dazu sogenannte Angular-Components.
15:59

Transkript

Nachdem ich in meiner Anwendung jetzt bereits einen Angular-Service angelegt habe, der in der Lage ist, mit meiner Web-API zu sprechen, möchte ich nun auch gerne, eine Oberfläche dafür anlegen. Solche Oberflächenelemente, die wir jetzt hier benutzen möchten, die packt man in Angular in sogenannte Components. Wie sieht das konkret aus? Ich werde mir jetzt hier einen Unterordner menu anlegen, weil ich ganz gerne die Speisekarte, also das Menü, darstellen möchte. Ich sage also Hinzufügen im Unterordner app und gebe hier "menu" ein. In diesen Unterordner kommt jetzt eine TypeScript-Datei, und zwar eine TypeScript-Datei für meine Komponente. Sie können sich vorstellen, jedes Oberflächenelement, was Sie später einmal darstellen möchten in einer TypeScript-Anwendung, also jeder Bildschirmbereich oder jedes Widget wird später einmal eine Komponente sein. Also, Hinzufügen Neues Element und im Bereich ASP.NET Core Web wähle ich TypeScript-Datei und jetzt ist die Konvention wie folgt: Ich benenne meine Komponente nach dem Namen, wie sie heißen soll, also menu zum Beispiel und dann .component.ts. So, in so einer Komponente ist das Erste, was wir machen müssen, wir müssen das Component-Attribut importieren aus angular/core. Also: import { Component } from '@angular/core'; Das erlaubt uns jetzt, dass wir eine Klasse, die ich hier schnell schreibe, nämlich die export class MenuComponent, dass wir diese Klasse entsprechend mit einem Component-Dekorator annotieren können. Also schreibe ich hier @, dafür dass es eine Annotation ist, Component und jetzt Klammer auf und so eine Component, die muss ich jetzt entsprechend konfigurieren, konfigurieren über ein Objekt. Also geschweifte Klammer auf für ein JavaScript-Objekt und es gibt jetzt hier verschiedene Eigenschaften. Zum Beispiel kann ich einen Selector angeben. Also was ist der HTML-Tag beziehungsweise das Element, was ich später in meiner Webseite nutzen muss, um später auch mein Menü darzustellen. Und hier tippe ich einmal vegi-menu ein. Als Nächstes kann ich wahlweise ein Template-Inline in diese Komponente schreiben, sprich, ich schreibe alles HTML hier in die TypeScript-Klasse rein. Das mag ich persönlich nicht sonderlich gerne und deswegen gebe ich stattdessen lieber eine templateUrl an, also eine Adresse, wo das Template gefunden wird. Und auch hier gibt es wieder eine Konvention, und zwar liegt das Template normalerweise im selben Ordner wie meine Komponente und heißt auch genau so, nur mit der Endung .html. Also meine Template-URL lautet ./ -- für derselbe Ordner -- und dann menu.component.html. Ich habe auch die Möglichkeit, und das möchte ich Ihnen hier nur ganz kurz demonstrieren, sogenannte Style-URLs anzugeben. Heißt also, hier ist es nicht eine URL, sondern hier sind es mehrere. Ich kann also die URLs zu mehreren Stylesheets hier angeben. Und deswegen ist das auch hier ein Array. Und ich leg schon mal ein Stylesheet an, auch wenn ich im Moment das noch nicht gebrauchen werde, und zwar ist das dann das Stylesheet menu.component.css. Zu guter Letzt sage ich hier noch, dass ich ganz gerne meinen VegiService benutzen möchte. Und das kann ich angeben, indem ich hier den providers-Eintrag setze und hier angebe, dass ich als Provider ganz gerne meinen VegiService nutzen möchte. Diesen VegiService, den muss ich jetzt zum einen gleich injizieren, zum anderen muss ich ihn aber auch importieren, also kann ich hier sagen import { VegiService } from, das ist in einem Ordner drüber, '../vegi-service'; So. Dann ist auch hier die Meldung verschwunden beziehungweise das Unterkringelte und jetzt habe ich die Möglichkeit, diesen VegiService in meine Klasse zu injizieren. Wie mache ich das? Relativ einfach. Ich lege mir einen Konstruktor an und dieser Konstruktor, der erhält jetzt als Argument übergeben meinen VegiService. Ich nenne das Objekt auch selber vegiService und das ist vom Typ VegiService. So. Darüber hinaus lege ich hier oben schon einmal ein Feld vom Typ Kategorien-Array an, also private categories vom Typ Category[]. Und auch das muss ich jetzt auch wieder importieren, weil das kennt er so erstmal nicht. Und das Ganze befindet sich in categories/category. Ich habe jetzt hier einmal Alt+Enter oder wahlweise auch Strg+Punkt gedrückt und dann kann Visual Studio das für mich automatisch hier oben importieren. Ja, wo rufen wir jetzt unseren Service auf? Unser Service, der hat ja eine Methode getCategories und jetzt ist man natürlich immer gewillt, das Ganze im Konstruktor aufzurufen. Da jetzt aber bei so einem HTTP-Aufruf relativ viel schief gehen kann und wir das Erzeugen unserer Klasse nicht in Gefahr bringen möchten, deswegen werden wir uns in den Angular-Lebenszyklus einklinken und sagen, beim Initialisieren der Komponente rufen wir den Service auf und nicht beim Erzeugen des Services. Wie mache ich das, mich hier einzuklinken? Dazu muss ich hier oben neben Component auch noch OnInit importieren. OnInit ist also ein Lebenszyklus-Event und das wird dann später für mich in Form einer Methode aufgerufen. Dazu muss ich hier angeben, dass meine Klasse MenuComponent OnInit implementiert. Jetzt sehen Sie, hier ist alles schon wieder rot, und zwar liegt das aktuell daran, weil er sagt, ich hab ja hier gar kein OnInit drin. Also sagen wir ihm hier, dann implementier die Schnittstelle doch bitte, und das macht jetzt Visual Studio standardmäßig ganz oben. Und ich hab das mal über Strg+X ausgeschnitten, füg das etwas weiter hier unten ein. Laut Konvention sollten nämlich die privaten Eigenschaften alle nach oben kommen, auch natürlich die öffentlichen, dann der Konstruktor und dann die Methoden. So, was machen wir jetzt in OnInit? In OnInit sage ich, dass ich ganz gerne meinen VegiService benutzen möchte und dass ich hier die Methode getCategories aufrufen möchte. getCategories gibt mir ein Promise zurück. Und an einem Promise kann ich die Methode then aufrufen, die also besagt: Wenn das fertig ist, was passiert dann? Na ja, ich bekomme dann zurückgegeben ein Array von Categories. Und hier benutze ich jetzt eine Error-Function oder einen Lambda-Ausdruck, heißt also, ich sage, categories gehen herein. Und was möchte ich mit denen machen? Na ja, ich möchte diese Kategorien meinem Array von Kategorien, also this.categories, zuweisen. So, damit haben wir jetzt den Code-Teil unserer Komponente so gut wie fertig angelegt. Was jetzt noch fehlt, ist, dass wir in unsere Datei app.module gehen und unsere Komponente auch importieren. Ich muss also hier sagen, direkt unter dem import { AppComponent } sage ich hier: import { MenuComponent } from './menu/menu.component'; So. Das reicht noch nicht ganz aus. Ich muss das hier auch noch in die Deklarationen herein bringen, andernfalls würde meine Angular-App später nicht laufen. Was jetzt darüber hinaus noch fehlt, damit meine Komponente funktionieren wird, ist das Template und eine leere Stylesheet-Datei. Wie lege ich die an? Vom Prinzip her relativ simpel. Ich leg hier erst mal die Stylesheet-Datei an. Ich sage also auf meinem Ordner app/menu Hinzufügen Neues Element, wähle hier im Bereich Web ein Stylesheet aus und das muss dann menu.component.css heißen. Und das können wir erstmal leer machen, da muss erstmal gar nichts großartig drinstehen. Und jetzt lege ich noch das Template an. Das Template, das ist eine HTML-Datei und die heißt dann menu.component.html. So, was mache ich jetzt in diesem Template? Na ja, ich schreibe erst mal eine Überschrift oben rein, also ein h2-Element. Und dieses h2-Element, das bekommt den Inhalt Speisekarte. Anschließend möchte ich ganz gerne meine Speisekarte in einer Liste darstellen. Und da gibt es eine ganz tolle Komponente von Angular Material, nämlich das ist die Komponente md-list. Und diese Komponente, die kann unter anderem einfache Listen darstellen, die kann aber auch geschachtelte Listen darstellen. Ich möchte ganz gerne eine geschachtelte Liste darstellen, sprich, ich möchte ganz gerne die Kategorien haben und dann darunter jeweils die Speisen und dann einen Trennstrich. Wie mache ich das? Na ja, ich fange damit an, dass ich ein ng-container-Element nehme, und hier über ein Attribut ngFor dieses Element wiederholen lasse für alle Kategorien, die es in der Liste categories gibt. Die Syntax dazu ist also, dass ich... Ähnlich wie bei einer For-Schleife in C#, wo ich sagen würde: foreach (var categorie in categories), sage ich hier: ngFor und dann let -- das ist das Pendant zu var -- category und dann -- statt in -- of categories. Dieses ng-container-Element, das ist übrigens ein Element, was ich immer dann verwenden kann, wenn ich einen kompletten Block wiederholen möchte, ohne ein äußeres Element zu haben. Ich erkläre ihnen gleich auch den Unterschied, wenn wir mal an die einzelnen Speisen kommen. So, innerhalb meiner Liste hätte ich jetzt ganz gerne einen Subheader. Und in diesen Subheader möchte ich ganz gerne reinschreiben den Namen der Kategorie und dahinter in Klammern die Description. Das mache ich deswegen, weil der Name immer auf Spanisch dadrin stand und dann die Beschreibung, die war dann deutsch, und wir möchten ja ganz gerne, dass hier jeder die Karte verstehen kann. So, das ist jetzt die Überschrift. Dann habe ich gesagt, wenn die Kategorie zu Ende ist, dann hätte ich ganz gerne einen Trennstrich, das ist dann ein md-divider. Aber dazwischen, da fehlt natürlich noch was. Da fehlen jetzt meine eigentlichen Einträge. Und hier benutze ich jetzt ein md-list-item und dieses md-list-item, das wird so oft wiederholt, wie ich Einträge habe. Also kann ich hier sagen: ngFor="let dish of categorie.dishes". Bedeutet also, für die aktuelle Kategorie, in der ich mich gerade befinde, möchte ich gerne alle Speisen iterieren. Jetzt noch mal zu dem Unterschied zwischen ng-container und md-list-item. Hier wiederhole ich das md-list-item. Das wird also später wirklich ein Element in meinem DOM auch für mich sein. Hier oben bei den Kategorien habe ich keine Möglichkeit, irgendein äußeres Element mehrfach wiederholen zu lassen. Deswegen nutze ich hier ng-container als Platzhalter. So, was kommt jetzt hier in meine Speisekarte für die einzelnen Speisen herein. Hier sagen wir jetzt, dass wir ganz gerne eine Überschrift von der Ebene h4 haben wollen und das ist eine md-line. Und zwar kommt hier als Inhalt herein, zunächst einmal die Nummer, also die id, und dann der Name. So. Das soll soweit jetzt für den ersten Schritt einmal reichen. Also probieren wir das Ganze jetzt einmal aus. Ich mache Folgendes: Ich gehe einmal in meine Kommandoeingabeaufforderung und gucke hier einmal, ob es irgendwelche Fehlermeldungen gibt. Das sieht erst mal bis hier hin ganz gut aus. Ich werde trotzdem noch mal neu kompilieren -- vorsichtshalber --, da ich relativ viel geändert habe. Und werde parallel dazu meine Anwendung jetzt einmal im Chrome starten. Was mich übrigens die ganze Zeit stört beim Starten meiner Anwendung, ist, dass er automatisch immer auf die URL api/values geht. Das möchte ich nicht so gerne. Also gehe ich zuvor einmal in die Projekteigenschaften und im Bereich Debuggen kann ich hier die Start-URL auf / oder einfach auf leer ändern; speichere das Ganze. Und jetzt gucke ich noch mal, ob die Kompilierung durchgelaufen ist. Das sieht sehr gut aus. Also kann ich jetzt meine Anwendung starten und dann gucken wir mal, wie unsere Speisekarte jetzt aussieht. Beziehungsweise im Moment sehen wir die noch gar nicht, fällt mir ein, denn ich muss unsere Speisekarte auch noch benutzen. Ich habe ja extra in meiner Komponente einen Selector hinterlegt, und zwar an der menu.component. Ich zeige Ihnen das schnell. Das war dieser hier. Und diesen Selector, den muss ich jetzt auch benutzen, weil ansonsten sehen wir im Moment noch gar nichts. Also gehe ich einmal in die Datei app.components. Das ist die Datei, die hier den Titel bisher definiert hat, und schreibe hier herein, dass ich hier das vegi-menu sehen möchte. So. Und einmal die Seite neu laden. Und hier... Das hat ein Augenblickchen gedauert. Hier ist jetzt unsere Speisekarte. Hier haben wir also Name und Beschreibung der Kategorien. Dann sehen wir hier unten die einzelnen Einträge, dann den Trennstrich, nächste Kategorie und so weiter. Der Weg dahin war, dass ich eine Komponente angelegt hab. Eine Komponente, das ist erst mal eine TypeScript-Klasse. In dieser TypeScript-Klasse, die ich exportieren muss, die muss ich darüber hinaus auch mit dem Component-Decorator dekorieren. Dazu muss ich Component dann zunächst auch importieren aus angular/core. So eine Komponente, die bekommt einen Selector, damit wir sie benutzen können, die bekommt eine Template-URL, die bekommt Style-URLs und gegebenenfalls einen Provider für unseren Service, den wir hier oben benutzen. Wenn ich direkt bei der Initialisierung Daten abrufen möchte, dann gehe ich darüber hinaus hin und importiere OnInit und lasse meine Klasse auch OnInit implementieren. Und im OnInit-Aufruf kann ich dann meinen Service aufrufen. Innerhalb meines Layouts kann ich dann ganz normale HTML-Elemente benutzen wie h2 oder halt auch zum Beispiel Angular Material-Elemente wie ng-container und md-list, wenn ich Angular Material in meine Webseite eingebunden hab, so wie das bei mir der Fall war. Dann fehlte noch, damit das Ganze auch funktioniert, ein Eintrag in der app.module-Datei, und zwar ein Import-Statement und darüber hinaus noch eine Declaration. Und dann sieht meine Seite so aus wie hier.

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!