Wie starte ich mit Angular und dem Visual Studio?

Hallo Zusammen

Ich war längere Zeit nicht mehr mit Webentwicklung beschäftigt habe zwar hin und wieder etwas mit MVC entwickelt würde jetzt aber bei Angular 4 gerne wieder einsteigen.

Ich habe mich heute schon ein wenig damit auseinander gesetzt nur finde ich nicht wirklich den richtigen Start in die Materie.

Welchen Projekttyp verwendet ihr im Visual Studio für Angular früher bei Version 1 hat man ja das ganze noch per nuget nach installiert das fehlt mir jetzt komplett auch habe ich gelesen man soll das Controller Projekt vom Frontend (CSS, Views, Typescirpt, Javascript) trennen... Installier ich jetzt nodejs für das Frontend und lade mir die ganzen Abhängigkeiten über die angular cli? Ich hab leider keinen guten Leitfaden gefunden. Könnt ihr mir hier etwas empfehlen?

Vielen Dank
live2

Visual Studio Code (Editor) und nicht Visual Studio 2017 (IDE) verwenden.
Hier ist TypeScript und Angular um Welten besser unterstützt (mit Extensions) als in VS2017.

Dass Du keinen Leitfaden gefunden hast, bei der aktuell aller angesagtesten Technologien im Web, halte ich für fraglich 😉
Aber ja, Angular CLI ist ein (guter) Anfang.

Hallo live2,

ja, es hat sich ein wenig getan in der Welt. Ich entwickle das Frontend gar nicht mehr mit Visual Studio, sondern mit VSCode und habe die "Projekte" strikt getrennt. Kommuniziert wird über REST/ HTTP.

Leitfaden gibt es wie Sand am Meer, aber das ist auch so ein bisschen das Problem. Jeder macht es eben anders. Die Angular CLI (Es heisst übrigens nur noch "Angular" ohne die Versionsangabe, wenn du nicht von AngularJS sprichst. Sonst wird AngularJS explizit angegeben) ist ein Start, jedoch werden Anfänger mit extrem vielen Files und extrem viel Magic überschüttet. Wenn du jetzt die Frage stellt "Wofür sind all die Sachen?" dann ist die Einstiegshürde eventuell noch ein wenig grösser. Wenn du eher sagst "Ich nehme das so und nutze die Magic erstmal" und dann mit der Zeit dahinterkommst, was die Files für Aufgaben haben, dann ist die CLI schon ein sehr guter Start.

Ich trenne Frontend-Code vom Backend-Code auch Foldermässig auf dem System. Somit hat der Client keine Ahnung, dass er mit Technologie A redet (bspw. ASP.NET Core) und dsa Backend hat keine Ahnung, dass die Requests von einer Angular-Anwendung kommen. Somit bist du da maximal flexibel, hast getrennte Builds, Tests etc. Das Frontend ist eben ein eigener Bereich geworden.

Projekttyp im VS wäre dann eine ASP.NET Core Webanwendung und Clientseitig lädst du dir alle Abhängigkeiten mit Node bzw dem Node Package Manager (npm). Du kannst dir auch einen kleinen Webserver installieren (node serve, lite-server, webpack-dev-server, ...) mit dem du dann clientseitig entwickeln kannst. Das einzige, was dein Client vom Server kennt ist dann die URL.

Ich hoffe das bringt ein wenig Licht in die Ganze Sache.

Beispiel von einem Talk von mir gestern, ohne die CLI: https://github.com/FabianGosebrink/.NETDay-2017

Gruss

Coffeebean

Projekttyp im VS wäre dann eine ASP.NET Core Webanwendung und Clientseitig lädst du dir alle Abhängigkeiten mit Node bzw dem Node Package Manager (npm). Du kannst dir auch einen kleinen Webserver installieren (node serve, lite-server, webpack-dev-server, ...) mit dem du dann clientseitig entwickeln kannst. Das einzige, was dein Client vom Server kennt ist dann die URL.

Oder:

Kommandozeile, Templates installieren:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Kommandozeile, Verzeichnis anlegen...
mkdir MyNewAngularProject
cd MyNewAngularProject

Kommandozeile, Angular-Projekt erzeugen
dotnet new Angular

Erzeugte Projektmappe dann im VS2017 öffnen und warten, bis er die Abhängigkeiten aktualisiert hat. Dann kannst du wie gewohnt im VS loslegen.

LaTino
EDIT: Quelle und mMn mit großem Abstand bestes verfügbares Angular-mit-asp.net-core-Tutorial:
https://jonhilton.net/2017/02/21/create-a-vs2017-angular-2-and-net-core-site-using-the-command-line/

Gut gemeinter Rat: vermeidet die unnötigen Dependencies auf die Microsoft Packages und orientiert euch direkt an Angular.

Hallo Zusammen

Vielen Dank für die Informationen, ich bin nun auch schon ein wenig weitergekommen beim einarbeiten.

Folgende 2 Möglichkeiten finde ich interessant:

1. Die Lösung von LaTino, hier bekommt man ein angular Projekt der aktuellen Version 4 und das ganze in ein Visual Studio Projekt verpackt mit asp.net Controller Anbindung und schon einem kleineren Seiten Aufbau als Demo Anwendung sowie man es sich bei MVC gewöhnt war. Über den Umweg das Projekt per Command Line zu generieren.

2. Visual Studio Code installieren, NodeJS installieren und dann per "npm install -g @angular/cli" die angular-cli installieren. Hier kann dann auch wieder per Command Line ein Projekt erstellt werden das aber kein Visual Studio Projekt ist sondern ein Ordner mit ein paar configs und allen benötigten Dateien. Das Projekt wird dann mit "ng new PROJECT-NAME" erstellt und gestartet wird das ganze dann auch per "ng serve". Das Webprojekt was man hier erhält ist sehr bescheiden ein einfacher Demo Text fertig...

Um angular Component, Directive, Pipe, ... zu erstellen arbeitet man auch wieder in der Command Line und gibt hier die befehle ein, die dann die benötigten Dateien und Ordner erstellen.

Wobei ich derzeit eher auf Vorschlag 2 tendiere da man hier mehr Beispiele findet. Auch ist Visual Studio Code echt sehr flott. Und man somit auch eine klare Trennung zwischen dem Frontend und dem Backend hinbekommt. Ich werde sobald ich noch mehr Erfahrungen gesammelt hab hier nochmal meine Erfahrung posten.