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

Ein neues Projekt mit Visual Studio anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der erste Schritt zur Single-Page-Anwendung besteht darin, dass Sie ein neues Projekt anlegen. In Visual Studio können Sie aus verschiedenen Projekttypen und Vorlagen wählen. Welche sich für eine Single-Page-Application eignet, erklärt dieser Film.
07:00

Transkript

Der erste Schritt bei der Erstellung meiner Single-Page-Application besteht für mich darin, dass ich zunächst einmal ein neues Projekt anlege. Visual Studio habe ich dazu bereits geöffnet und hier wähle ich jetzt unter dem Menü Datei den Unterpunkt Neu und lege hier ein neues Projekt an. Im Bereich Visual C# gehe ich jetzt in die Kategorie Web, und hier kann ich jetzt eine der drei Webvorlagen auswählen. Ich möchte ganz gerne eine ASP.NET-Core-Anwendung im Back-End haben. Und kann jetzt hier auswählen, ob die unter .NET Core laufen sollen oder unter dem vollen .NET Framework. Der Unterschied besteht darin, eine ASP.NET-Core-Anwendung, die unter dem vollen .NET Framework läuft, die läuft nur unter Windows, hat dafür aber einen sehr großen Funktionsumfang des .NET Frameworks im Zugriff. Wenn ich eine ASP.NET-Core-Anwendung für das .NET Core-Framework schreibe, dann läuft diese cross-Plattform, also auch unter Linux oder auf einem Mac. Dafür ist das .NET-Core-Framework noch nicht ganz so umfangreich im Bezug auf die Klassenbibliothek, wie das vor der .NET Framework. Für meine Anwendung reicht das .NET-Core-Framework jedoch bereits aus. Ich wähle also ASP.NET-Core-Anwendung, .NET Core und werde jetzt meinem Projekt einen Namen geben. Ich möchte eine Single-Page-Application schreiben für ein Restaurant das vegetarische, spanische Speisen später verkaufen wird und deswegen nenne ich das Ganze ElVegetarianoFurio, was soviel, wie der wütende Vegetarier heißt. Ich muss für mein Projekt jetzt nur noch ein Speicherort angeben. Ich habe mir schon einen kleinen Projektordner angelegt, den werde ich jetzt ganz schnell hereinwechseln. Außerdem gebe ich hier noch an, dass ein Projektmappenverzeichnis erstellt werden soll, und wenn ich möchte, dann könnte ich das Ganze auch zur Quellcodeverwaltung hinzufügen. Ich wähle jetzt hier erst einmal OK aus. Und jetzt kommt ein neuer Dialog, und mit dem kann ich auswählen, was für eine Vorlage ich denn für meine Webanwendungen benutzen möchte. Und hier gibt es aktuell folgende Möglichkeiten. Ich kann hier oben erst einmal die .NET-Core-Version auswählen. Ich entscheide mich hier für die zum Zeitpunkt der Aufnahme neueste, verfügbare Version. Das ist also die Version 1.1. Und jetzt kann ich hier eine leere Anwendung schreiben. Das ist tatsächlich eine ganz leere Webanwendung, die einfach nur Hello World herausgibt. Ich kann eine Web-API auswählen oder eine Webanwendung wählen. Unterschied zwischen Web-API und Webanwendung ist, bei der Webanwendung, da habe ich bereits ein Grundlayout der Basis von Bootstrap in meiner Anwendung. Darüber hinaus gibt es MVC-Controller-Methoden, die mir views rendern und so weiter. Für meine Anwendung ist es viel zu viel, denn ich möchte ja später das Front-End komplett über Angular steuern lassen, und deswegen wähle ich hier einfach Web-API aus. Hier rechts im Bereich Authentifizierung wähle ich den Punkt Keine Authentifizierung. Und jetzt kann ich das Ganze mit OK bestätigen, und Visual Studio wird nun das Projekt für mich anlegen. So es hat einen ganz kurzen Augenblick gedauert. Jetzt ist das Projekt da, und wenn Sie zum ersten Mal mit ASP.NET Core arbeiten, dann wird Ihnen auffallen, dass Sie hier etwas haben, was Sie normalerweise nicht kennen, Sie haben hier nämlich einen Ordner wwwroot. Die Grundidee ist, das in diesem Ordner alle statischen Dateien abgelegt werden. Bedeutet, Sie würden hier zum Beispiel Bilder oder Scripts oder irgendwelche HTML-Dateien ablegen. Darüber hinaus haben wir jetzt hier noch eine weitere wichtige Datei, nämlich die Startup.cs. Und die Startup.cs, das ist, wie der Name schon sagt, das ist die Klasse, die beim Starten Ihrer Anwendung erzeugt und ausgeführt wird. Und hier gibt es zwei wichtige Methoden. Hier gibt es die Methode ConfigureServices und die Methode Configure. In ConfigureServices können Sie alle Services, die Sie in Ihre Anwendung benutzen möchten registrieren. Und Services, das jetzt hier ein sehr weitläufiger Begriff. In unserem Beispiel wird hier schon einmal gesagt, dass wir gerne MVC benutzen möchten. Jetzt fragen Sie sich vielleicht: Warum MVC? Wir haben doch beim gesagt, wir machen eine Web-API-Projekt. Der Hintergrund ist, dass unter ASP.NET Core MVC-Controller und Web-API-Controller zusammengeführt worden sind. Und im MVC-Framework für ASP.NET Core, also ASP.NET Core MVS aufgegangen sind, und darum steht hier, dass wir MVC benötigen. Wir können hier später auch noch eigene Services registrieren. In der Methode Configure gehen wir außerdem hin und konfigurieren dann. Unsere App aktuell konfigurieren wir hier also, dass wir ganz gerne auf die Konsole loggen möchten, und dass wir MVC nicht nur hinzufügen, sondern auch benutzen möchten. Was es in Webanwendungen bis her auch nicht gab, war die Datei Program.cs, die kannte man aus Konsolenanwendungen. Wenn wir uns das hier einmal anschauen, dann sehen wir, wir haben hier eine static void Main, also genau so eine Methode, wie wir sie aus einer Konsolenanwendung kennen. Und der Hintergrund ist, dass jeder ASP.NET-Core-Anwendung eigentlich nur eine Konsolenanwendung ist. Und in dieser Konsolenanwendung wird jetzt hier gesagt, dass wir gerne den Kestrel-Webserver nutzen möchten und dass das Ganze in den IIC integriert werden soll, und dass unser Startup-Klasse die Klasse Startup ist. Was wir darüber hinaus haben, ist nun eine Datei appsettings.json, die ersetzt die Web.config, die Sie zuvor kannten, zumindest den Teil, indem Sie Ihre Anwendung selbst konfiguriert haben. Bedeutet also, was früher an eigenen Konfigurationseinträgen in der Web.config lag, zum Beispiel Datenbank, Verbindungszeichenfolge oder ähnliches, das kommt jetzt in die appsettings.json. Im Ordner Controllers sehen wir hier einen ValuesController. Dieser ValuesController, das ist ein ganz einfacher Controller, der uns HTTP-Endpunkte zur Verfügung stellt, die wir später aufrufen können. Zum Beispiel hier eine Methode, die uns einfach nur zwei Strings zurückgibt. Soweit also zu dem, was uns die Standardprojektvorlage erst einmal bietet. Wenn wir also ein neues Projekt anlegen wollen, dann können wir das in Visual Studio über Datei Neu Projekt erledigen, wir gehen dort dann in den Bereich Web herein. Ich zeige es noch mal schnell, also Datei Neu Projekt und im Bereich Web kann ich dann auswählen ASP.NET Core-Webanwendung, und wähle dann hier in meinem Fall das .NET Core-Framework aus. Anschließend habe ich die Möglichkeit zwischen verschiedenen Untervorlagen zu wählen, zwischen einer ganz leeren App. Und in der ganz leeren App, da hätte ich hier zum Beispiel den ValuesController nicht. Und in meiner Startup-Datei, da würde der Verweis auf das MVC-Framework fehlen. Da ich beides aber benutze, habe ich die Web-API-Vorlage gewählt. Die Webseiten-Vorlage habe ich nicht gewählt, weil ich zum jetzigen Zeitpunkt keine Oberfläche benötige.

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!