SPA mit ASP.NET Core und Angular

Grundlayout

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Momentan wirkt die Angular-App noch recht unspektakulär, weil bisher noch nichts am ursprünglichen Template verändert wurde. Das ändern Sie nun mit einem Oberflächen-Framework, das Ihnen ein modernes Layout als Grundgerüst liefert.
14:04

Transkript

Die Angular-App, die ich in meiner ASP.NET-MVC-Core- Anwendung integriert habe, die sieht aktuell noch relativ unspektakulär aus. Das liegt daran, dass ich bisher noch gar nichts am ursprünglichen Template verändert habe. Ich möchte das jetzt gerne ändern, zum einen werde ich hier diesen Standardinhalt entfernen, zum anderen möchte ich gerne ein Oberflächen-Framework installieren, welches mir zum einen ein modernes Layout als Grundgerüst liefern kann, zum anderen sollte dies aber auch sehr gut mit der Angular zusammenarbeiten. Und da bietet sich Angular-Material an. Sie können die Projektseite unter material.angular.io öffnen, und hier sehen Sie, allein schon an der URL, dass das Ganze vom Angular-Team direkt bereitgestellt wird. Was das Framework Ihnen bietet, das ist eine ganze Reihe an Komponenten, die auf die Zusammenarbeit mit Angular bereits abgestimmt sind. Und diese können Sie in Ihr Projekt einbinden, zum Beispiel können Sie hier einen Datepicker einbinden, Sie können aber meinetwegen auch einen Pop-up-Dialog einbinden, also im Endeffekt das, was man in modernen Anwendungen so benötigt, das haben Sie in diesem Framework drin. Sogar einen Grid, was Sie sortieren können oder was Sie auch blättern können zum Beispiel. Wenn wir Angular-Material in unserer Anwendung nutzen möchten, dann gibt es hier unter Guides einen Getting Startet Guide. Und hier sehen wir, wir müssen zunächst einmal hingehen und müssen zwei Abhängigkeiten installieren, nämlich Angular-Material und Angular-CDK. Ich kopiere mir jetzt einfach mal diesen Befehl in die Zwischenablage und wechsle jetzt in die Eingabeaufforderung. Die Eingabeaufforderung, die habe ich hier bereits in meinem Projektverzeichnis geöffnet, da war so noch der Build Wacher beschäftigt. Und hier in dieser Eingabeaufforderung, die sich zwingend im meinem Projektverzeichnis befinden muss, da werde ich jetzt den Befehl, den ich eben in der Zwischenablage kopiert habe einfügen und auch ausführen, sprich ich werde die Pakete Angular-Material und Angular-CDK installieren. Sie kennen das schon, wenn man Angular-Pakete installiert, das kann immer einen Augenblick dauern, deswegen auch an dieser Stelle hier pausiere ich das Video kurz, bis das Ganze fertig ist. Die Installation ist durch, damit ist das Ganze aber noch nicht abgeschlossen, denn das war nur der erste Schritt. Der zweite Schritt, er besteht darin, dass wir die Angular-Animations installieren. Auch das kopiere ich mir wieder in die Zwischenablage und füge das Ganze in meiner Eingabeaufforderung ein. So, jetzt sind auch die Angular-Animations installiert und ein weiterer Blick hinten auf die Webseite verrät uns, dass wir jetzt relativ fertig sind. Was wir jetzt noch machen müssen, ist, dass wir die verschiedenen Module, die wir benötigen importieren, und dass wir ein Theme einbinden. Ich werde in meinem Fall nicht das indigo-pink-Theme nehmen, sondern ich werde ein lila Theme nehmen, aber das im Endeffekt egal, welches Sie dort benutzen. Wichtig ist ich kopiere erstmal dieses Import-Statement hier. Und jetzt wechsle ich in Visual Studio da rein, und gehe hier einmal im Ordner app in die Datei styles.css. Und hier füge ich jetzt das, was ich gerade eben in die Zwischenablage kopiert habe ein, nämlich den Verweis auf mein Theme und ich ändere das jetzt hier von indigo-pink auf deeppurlple -amber. Es gibt einige vordefinierte Themes, welche das sind, das können Sie auf der Angular-Seite in der Dokumentation nachlesen und das zeige ich Ihnen gleich noch. Und Sie haben die Möglichkeit eins davon auszuwählen, können aber auch Ihre eigenen Themes natürlich benutzen. Was ich jetzt noch machen werde, ist, ich werde hier noch hammer js installieren. Das brauchen wir immer dann, wenn wir Gästen-Support bei einigen Komponenten später benötigen. Also auch hier gehe ich wieder in die Kommandozeile herein. Über npm install --save hammerjs werde ich das installieren und das muss ich dann gleich auch importieren. Und zwar importiere ich das in meiner app.module-Datei. Hier gehe ich also auch einmal ganz kurz herein in die Datei app.module, die befindet sich unter ClientApp, dort im Unterordner app. Und hier oben kann ich dann einfach hingehen und hammer js importieren. Damit sind wir immer noch nicht ganz fertig, sondern ich möchte auch ganz gerne Icons nutzen in meiner Anwendung. Und deswegen kopiere ich mir hier diese Material Icons Schriftart in die Zwischenablage und was jetzt passiert ist folgendes, ich füge jetzt in meine index.html herein, das ist also die Startseite meines Projekts. Und hier unter dem favicon-Eintrag, da füge ich einfach diesen Verweis hinzu. Was das Ganze ist, das ist eine Schriftart, die ganz viele Icons, die Sie benutzen können in Ihrer Anwendung, beinhaltet, und die binden wir jetzt hier über das Google API CDM ein. Auch jetzt sind wir immer noch nicht ganz am Ende, auch wenn wir schon relativ nah an dem sind, was wir, wenn wir erreichen wollen, was mir nämlich noch fehlt, ist, dass wir Schriftarten vernünftig darstellen können. Und da bin ich jetzt hier oben auf Guides gegangen und hier gibt es Using Angular Material´s Typography. Und wenn wir hier ein wenig runterscrollen, dann sehen wir, welchen Font wir denn einbinden müssen, damit wir auch die Angular-Material-Fonts benutzen können, also auch das kopiere ich mir jetzt einmal. Und auch das kommt wieder in meine Index-Seite herein. Sie sehen also, es ist eine ganze Menge an Schritten, die wir hier machen müssen. Und das speichere ich mir jetzt einmal und jetzt sind wir fast fertig. Daran mäßig werden normale Tags, sowie der H1-Tag oder ähnliches, die werden nicht gestylt, Sie sehen es hier als Beispiel, hier steht schon drin, es gibt keine globalen Stiele, die hier direkt angewendet werden, das ist ein bisschen anders, als bei Bootstap, dort werden ja direkt alle Standardelemente auch gestylt, bei Angular-Material passiert das nicht. Hier gehe ich einfach auf ein Oberelement, in meinem Fall nehme ich einfach das Body-Element gleich und vergebe hier die Klasse mat-typograpgy und das führt dann dazu, dass alle Unterelemente dann später auch automatisch gestylt sind. Also hier im body-Bereich, klar es ist gleich mat-typograpgy. Jetzt sind wir schon fast am Ziel. Ich werde jetzt noch einmal in die Datei app.module wechseln und hier werde ich jetzt noch ein weiteres Import-Statement hinzufügen. Und zwar, damit ich die Angular- Komponenten auch nutzen kann, beziehungsweise die Angular- Material-Komponenten, muss ich entweder jede Komponente einzeln importieren, so stand das eben in der Hilfe, ich zeige Ihnen auch gleich noch mal, wie das dort beschrieben war, oder aber ich gehe einfach hin und ich importiere das Material-Module. Dann habe ich alle Komponenten im Zugriff, aber natürlich bedeutet das auch, dass ich im Zweifelsfall eine zu große App später erzeuge, weil eben für alle Komponenten das CSS, das JavaScript und so weiter geladen werden muss. Also das ist immer so ein bisschen abwägen, zum Lernen ist das ganz gut. Wenn Sie das dann so machen, wie ich das hier mache, dass Sie einfach mal alle Komponenten hereinholen, und dann können Sie dann später diese Komponenten Schritt für Schritt einzeln hereinholen. Was meine ich mit, Sie können die Komponenten Schritt für Schritt einzeln hereinholen, das zeige ich Ihnen jetzt gleich in der Hilfe. Davor muss ich aber hier bei den Imports noch einen Import machen, zum einen auf das Material-Modul und zum anderen auf das BrowserAnimationsModule. DasBrowserAnimationsModule, dass kommt über die Angular Animations mit und das muss ich oben auch noch gleich importieren, heißt ich werde hier oben einmal diese Zeile schnell kopieren. Und dann füge ich hier hinten animations ein und importiere hier nicht mehr das Browser-Modul, sondern das BrowserAnimationsModule und das muss ich dann auch hier unten importieren. Diese Module sind dafür zuständig, dass wir halt Animationen im Browser auch erhalten, zum Beispiel bei Seitenübergängen oder ähnliches. Was meinte ich jetzt damit, dass Sie hier auch einzelne Komponenten statt des ganzen Material-Modules importieren können. Gehen noch mal zurück in die Dokumentation und hier auf den Bereich Guides Getting Startet. Wenn wir jetzt hier einmal etwas herunterscrollen, dann sehen Sie hier, dass Sie in Ihrer app.module-Datei auch zum Beispiel sagen können, Sie wollen nur den Button und die Checkbox, und die werden importiert Das führt dann dazu, dass alle anderen Komponenten eben später nicht mit Ihrer App ausgeliefert werden, Ihre Anwendung wird etwas kleiner, aber es ist eben auch ein bisschen aufwändiger während der Entwicklung. Ich habe deswegen einfach das MaterialModule importiert, wie Sie hier sehen, da sind dann alle Komponenten. So, was ich hier jetzt ganz gerne machen möchte ist, ich möchte auf meiner Startseite gerne eine Toolbar darstellen, also im Endeffekt soll das Ganze später ungefähr so aussehen, nur mit einer Zeile, wie wir das hier zum Beispiel sehen. Das Markup dafür, das ist relativ simple, ich habe also hier eine Komponente md-toolbar und das kopiere ich mir auch einmal. Und jetzt wechsle ich noch einmal in meine Datei app.compinent.html, das ist ja meine Startseite und alles was wir hier sehen, das markiere ich jetzt, Strg+A und lösche das. Und stattdessen füge ich einmal md-toolbar ein und hier oben gebe ich jetzt noch den Titel aus. Diesen Titel, den ich jetzt hier binde, der ist übrigens in der app.component.ts, die ich sehen kann, wenn ich das hier aufklappe, hinterlegt. Und aktuell heißt der Titel einfach app und ich kann das zum Beispiel El Vegetariano Furio nennen. Wenn wir jetzt einmal hingehen und über die Kommandozeile noch einmal das Ganze bauen werden, indem ich hier ng build -- watch eintippe und dann meine Anwendung starte, falls sie nicht schon gestartet ist, in meinem Fall ist sie schon gestartet. Dann werden Sie gleich sehen, dass ich jetzt oben so eine schöne Toolbar bekomme. Kurzen Augenblick warten, bis er hier fertig ist mit dem kompletten Bauen, das dauert immer ein kleines Bisschen. Da muss ich mich verschrieben haben, da ist eine l zu viel, bei deeppurple, also noch mal das war hier der Punkt in der styles.css, da habe ich hier ein l zu viel, darum konnte er das css gerade nicht laden. Noch mal schnell bauen und dann funktioniert das hier hoffentlich und ich kann Ihnen einmal das Endergebnis zeigen. Diesmal hat´s auch funktioniert, wir wechseln also mal in den Browser herein und ich aktualisiere meine Seite. Und jetzt haben wir hier oben diese Titelleiste mit der Überschrift. Ich kann jetzt auch hingehen und kann zum Beispiel sagen, Mensch, die hätte ich aber gerne in der Primärfarbe meines Designs, also genau in diesem dunklen Lila, was ich hier geladen habe. Dazu gehe ich nochmal in das HTML herein, sage hier für die Toolbar, dass ich ganz gerne die Farbe primery nutzen würde und primery das ist die Primärfarbe meines Themes oder besser gesagt meines Sytles. Ich speichere das Ganze, im Hintergrund läuft hier die Kompilierung schon wieder, Sie sehen das. Und jetzt kann ich im Browser meine Seite einmal aktualisieren. Und jetzt haben wir hier diesen schönen lila Baken oben. Auch wenn das nach nicht viel aussieht, was wir gerade gemacht haben, haben wir doch eine ganze Menge geschafft. Im Endeffekt haben wir ein UI-Framework, nämlich Angular-Material in unsere Anwendung integriert. Die Schritte dazu waren zugegeben aufwändig. Am einfachsten funktioniert das, wenn Sie das so machen wie ich, Sie folgen also dem Guide, den Sie unter material.angular.io/guides finden und hier unter Getting started steht Schritt für Schritt, welche Module Sie über den Node Package Manager installieren müssen. Hier steht darüber hinaus, welche Imports Sie in Ihrer app.module benötigen, und hier steht auch, wie Sie Themes einbinden können. Zu guter Letzt habe ich neben dem Icon Font, auch noch die normale Schriftart von Angular-Material, natürlich diese Robo-Schriftart installiert. Und das finden Sie im Bereich Angular Material Typography, wenn Sie hier ein bisschen runterscrollen, dann sehen Sie hier, wie Sie diese Roboto-Schrift installieren können. Im Endeffekt ist es nur ein Link, den Sie setzen müssen. Außerdem habe ich auch diesen Obereintag mat-typography gesetzt. Was wir uns jetzt kurz noch einsetzen können, ist der Bereich Theming Angular Material App. Hier sehen Sie, dass es einige vorgebaute Themes gibt, dass sind genau die, und für Ihre App können Sie sich natürlich das Theme aussuchen, was Ihnen am besten gefällt, oder wenn Ihnen gar keins gefällt, dann können Sie auch eins anpassen, da steht hier aus, in der Kombination alles drin.

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
Ihr(e) Trainer:
Erscheinungsdatum:25.09.2017
Laufzeit:5 Std. 21 min (36 Videos)

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!