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

Client-Anwendung anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Nachdem Sie alle notwendigen Einstellungen vorgenommen haben, integrieren Sie in Ihre ASP.NET-MVC-Core-Anwendung eine Angular-App. Dazu nutzen Sie das Angular CLI. Wie Sie genau vorgehen, erklärt der Trainer in diesem Video.
09:42

Transkript

In meiner ASP.NET-MVC-Core-Anwendung möchte ich nun eine Angular-App integrieren. Dazu werde ich das Angular Command Line Interface nutzen und gehe dazu wie folgt vor. Ich habe neben meiner Visual Studio Solution bereits den Windows Explorer geöffnet. Und hier bin ich in dem Überordner zu meiner Solution. Die Solution befindet sich also hier ElVegitarianoFurio und ich gehe einen Ordner höher. In diesem Ordner werde ich gleich einen Unterordner anlegen, indem ich meine Anwendung dann initial anlegen werde. Dazu gehe ich oben in die Adressleiste und tippe einfach einmal CMD ein. Jetzt erhalte ich eine Eingabeaufforderung, genau in diesem Ordner und jetzt kann ich über das ng-Kommando, das vom Angular Command Line Interface kommt, mit dem Argument new eine neue App anlegen. Per Standardkonvention nutzen wir den Kebab-Case. Pascal-Case bedeutet ja, dass wir mit einem großen Buchstaben, bei dem neuen Word dann auch wieder großer Buchstabe kommt, alles wird aber zusammen geschrieben. Dann haben wir Camil-Case, fängt mit einem kleinen Buchstaben an, es werden wieder alle Wörter zusammen geschrieben und es kommt ein großer Buchstabe fürs nächste Wort. Kebab-Case bedeutet, dass wir sämtliche Wörter mit einem Bindestrich trennen und alles klein schreiben. Meine App heißt also el-vegetariano-furio und im ersten Schritt möchte ich die abhängigen Node-Module noch nicht installieren, erklären wir gleich auch warum. Darum gebe ich noch das Argument skip-install ein. Meine Anwendung ist fertig, wir sehen jetzt also hier, dass wir diesen Ordner el-vegetariano-furio haben. Und in dem befindet sich jetzt meine Angular-Anwendung. Was machen wir nun als nächstes? Der nächste Schritt besteht jetzt für mich darin, dass ich in diesen Ordner wechsle und hier hole ich mir den Ordner e2e,für den n2n-Test ich hole mir den Ordner src, den Ordner angular-cli, außerdem karma.conf, package protractor.conf, dann teconfig und tskint Die werde ich mir jetzt also einmal kopieren. Und wechsle jetzt in den Ordner meiner Web-Anwendung herein und jetzt achten Sie mal parallel auf mein Visual Studio hier, wenn ich das mache, öffne also den Explorer und füge das Ganze hier einmal ein. Wie Sie sehen können, hat sich hier rechts im Projektmappen-Explorer die Ansicht sofort aktualisiert. In älteren Visual-Studio-Versionen mussten Sie hingehen und mussten neue Dateien immer explizit zu einem Projekt hinzufügen, ab Visual Studio 2017 brauchen Sie das für Asp.NetCore Projekt nicht mehr, alles was im Ordner ist, gehört auch zum Projekt. So, den Ordner src, den werde ich jetzt einmal im Client-App umbenennen. Hintergrund ist, dass normalerweise Angular-Apps immer in einem Ordner src leben, aber bei mir ist hier alles Source-Code, was ich hier habe und da finde ich es etwas einfacher, wenn ich den Ordner einfach ClientApp nenne, dann verstehe ich es besser während der Entwicklung, was da wohl so drin sein mag. Jetzt mache ich noch folgendes. Ich öffne die Datei angular-cli.json und diese Datei, die konfiguriert das Command Line Interface von Angular. Und die muss ich jetzt zum einen, den Eintrag root ändern, denn meine Source legen nicht mehr im Ordner src, sondern die liegen jetzt im Ordner ClientApp. Darüber hinaus soll mein outDir-Verzeichnis nicht mehr der Ordner dist sein, sondern ich möchte in den Ordner wwwroot gehen, also den Ordner, den auch später meine Web-Anwendung nutzen wird, um statische Dateien auszuliefern. Haben wir das auch erledigt, jetzt wo wir schon mal dabei sind in dem Schritt, werde ich noch eine Kleinigkeit machen, wenn ich mein Projekt gleich starte, dann wird man immer auf den API-Controller gehen und das möchte ich nicht so gerne, deswegen werde ich gleich einstellen, dass ich eine andere Startseite haben möchte, aber das kann ich natürlich nicht hier machen, das muss ich gleich nach dem down machen, aber das nur zum Hinweis. Down ist ein gutes Stichwort, ich gehe jetzt einmal in meine Kommandozeile und werde jetzt hier nmp install eintippen. Dadurch werden jetzt die abhängigen Node-Pakete für mein Ordner installiert. Natürlich muss ich in den richtigen Ordner gehen, denn ich muss hier erstmal in den Unterordner gehen, in dem sich meine Anwendung befindet und das ist jetzt genau dieser Ordner hier. Und hier kann ich npm install eintippen, was im Endeffekt passiert ist, dass die package.json, die wir hier sehen, die wird ausgelesen, die package.json. Und sämtliche Abhängigkeiten hier definiert sind, die werden dann nämlich automatisch installiert. Also wieder rüber und npm install. Das wird jetzt wieder einen Augenblick dauern, bis die ganzen Pakete installiert sind, deswegen werde ich das Video solange kurz pausieren, damit Sie mir dabei nicht zuschauen müssen. Die Installation ist durch und jetzt kann ich über das Kommando ng serve das Ganze auch einmal starten. Wir bekommen jetzt gleich eine Meldung, dass meine Anwendung auf dem Port 4200 läuft, ich muss hier einmal den Zugriff noch zulassen für Node.js beim erstem Mal Und hier ist die Meldung, meine Anwendung läuft jetzt auf dem Port 4200 und zwar unter der Adresse localhost. Was kann ich also machen, ich kann jetzt hier mal einen Browser öffnen und wechsle hier mal auf localhost und dann auf den Port 4200. Und hier sehen wir unsere App. Wenn wir diesen Weg wählen, das wir also über ng serve die App starten, dann wird meine Angular-Anwendung von einem anderen Webserver ausgeführt, als meine ASP.NET-Core-Anwendung. Das möchte ich allerdings nicht, deswegen werde ich hingehen und werde über ng build meine Anwendung bauen- Jetzt wird Sie übersetzt und ins Dateisystem geschrieben und zwar landet die dann gleich hier in meinem Ordner wwwroot. Das Ganze ist durch, der Ordner sieht jetzt auch ein bisschen anders aus, wie Sie sehen, das Symbol hat sich verändert. Und hier habe ich jetzt die kompilierte Angular-App. Jetzt habe ich hier die Möglichkeit, die Anwendung zu starten und mir vorher sogar den Browser auszuwählen, also ich sage hier zum Beispiel, ich möchte das Ganze gerne im Chrome öffnen und los geht´s. Hier wurde standardmäßig jetzt die URL api/values aufgerufen und das mache ich kurz weg, gehe auf die root-Seite und hier sehe ich jetzt meine Angular-Seite. So, hier muss natürlich noch ein wenig was dran gemacht werden, aber vom Grundprinzip her läuft das Ganze. Was wir noch als kleine Verbesserung machen können ist folgendes. ich kann die Anwendung nicht nur einmalig übersetzen und dann bei jeder Anwendung wieder händig übersetzen, sondern ich kann ng build auch mit --watch starten und dann wird bei jeder Änderung, die ich ausführe, wird dann meine Anwendung neu gebaut. Auch das können wir uns einmal kurz anschauen. Wen der jetzt hier gleich mit dem Kompilieren durch ist, dann ändere ich einfach mal schnell eine Datei und dann werden wir sehen, dass er hier direkt anfängt etwas neu zu übersetzen. So, also ich gehe mal in meinem Ordner ClientApp herein und öffne hier zum Beispiel die App component.html und hier schreibe ich jetzt herein Wilkommen statt Welcome. Speichern und wechseln mal schnell rüber in die Konsole und hier, da war es fast zu schnell, hier wurde also neu gebaut einmal, Sie sehen das, das erste mal hat etwas länger gedauert, das war dieser Vorgang hier und der zweite ging dann relativ schnell mit 324 Millisekunden. Die Anwendung ist jetzt, wenn ich sie hier jetzt aktualisiere, auch direkt aktualisiert, hier sehen wir also, Wilkommen zu app. Fassen wir noch einmal kurz die Schritte zusammen, die ich ausführen musste, um eine neue Angular-App in eine bestehende ASP.NET-MVC-Core-App zu integrieren. Schritt Nummer 1 bestand darin, dass ich über das Angular Command Line Interface mit dem Befehl ng new, eine neue Angular-App angelegt habe. Diese Angular-App, die habe ich dann kopiert, und zwar habe ich kopiert den Ordner src, den Ordner e2e außerdem angular.cli und karma.konf, package.json, die protector.conf, tsconfig.json und tslint. Anschließend habe ich in diesem Ordner, in einer Eingabeaufforderung über npm install die abhängigen Pakete installiert. Ich habe den Ordner src in ClientApp umbenannt und ich musste schlussendlich in der Datei angular-cli.json die Einträge root und outDir ändern, und zwar habe ich root von src auf ClientApp geändert und outDir habe ich von dist auf wwwroot geändert. Dann konnte ich mit ng build dann beziehungsweise ng build --watch meine Client-Anwendung übersetzen und dann auch im Browser später gemeinsam mit meiner Web-Anwendung ausführen.

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!