myCSharp.de - DIE C# und .NET Community
Willkommen auf myCSharp.de! Anmelden | kostenlos registrieren
 
 | Suche | FAQ

» Hauptmenü
myCSharp.de
» Startseite
» Forum
» FAQ
» Artikel
» C#-Snippets
» Jobbörse
» Suche
» Regeln
» Wie poste ich richtig?
» Forum-FAQ

Mitglieder
» Liste / Suche
» Wer ist wo online?

Ressourcen
» openbook: Visual C#
» openbook: OO
» Microsoft Docs

Team
» Kontakt
» Übersicht
» Wir über uns

» myCSharp.de Diskussionsforum
Du befindest Dich hier: Community-Index » Diskussionsforum » Entwicklung » Web-Technologien » Wie starte ich mit Angular und dem Visual Studio?
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | Thema zu Favoriten hinzufügen

Antwort erstellen
Zum Ende der Seite springen  

Wie starte ich mit Angular und dem Visual Studio?

 
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
live2 live2 ist männlich
myCSharp.de-Mitglied

Dabei seit: 14.11.2005
Beiträge: 33


live2 ist offline

Wie starte ich mit Angular und dem Visual Studio?

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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
Neuer Beitrag 23.05.2017 18:57 E-Mail | Beiträge des Benutzers | zu Buddylist hinzufügen
Abt
myCSharp.de-Team

avatar-4119.png


Dabei seit: 20.07.2008
Beiträge: 14.202
Herkunft: Stuttgart/Stockholm


Abt ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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.
Neuer Beitrag 23.05.2017 21:26 Beiträge des Benutzers | zu Buddylist hinzufügen
Coffeebean Coffeebean ist männlich
myCSharp.de-Team

avatar-3295.gif


Dabei seit: 25.08.2011
Beiträge: 2.202
Entwicklungsumgebung: VS 2005-2017, VS Code
Herkunft: Deutschland/Schweiz


Coffeebean ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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
Neuer Beitrag 24.05.2017 08:07 E-Mail | Beiträge des Benutzers | zu Buddylist hinzufügen
LaTino LaTino ist männlich
myCSharp.de-Poweruser/ Experte

avatar-4122.png


Dabei seit: 03.04.2006
Beiträge: 2.999
Entwicklungsumgebung: Rider / VS2019 / VS Code
Herkunft: Thüringen


LaTino ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

Zitat von 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:

Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
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-...e-command-line/

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von LaTino am 24.05.2017 09:54.

Neuer Beitrag 24.05.2017 09:50 E-Mail | Beiträge des Benutzers | zu Buddylist hinzufügen
Abt
myCSharp.de-Team

avatar-4119.png


Dabei seit: 20.07.2008
Beiträge: 14.202
Herkunft: Stuttgart/Stockholm


Abt ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

Gut gemeinter Rat: vermeidet die unnötigen Dependencies auf die Microsoft Packages und orientiert euch direkt an Angular.
Neuer Beitrag 24.05.2017 10:07 Beiträge des Benutzers | zu Buddylist hinzufügen
live2 live2 ist männlich
myCSharp.de-Mitglied

Dabei seit: 14.11.2005
Beiträge: 33

Themenstarter Thema begonnen von live2

live2 ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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.
Neuer Beitrag 24.05.2017 20:14 E-Mail | Beiträge des Benutzers | zu Buddylist hinzufügen
Baumstruktur | Brettstruktur       | Top 
myCSharp.de | Forum Der Startbeitrag ist älter als 3 Jahre.
Der letzte Beitrag ist älter als 3 Jahre.
Antwort erstellen


© Copyright 2003-2020 myCSharp.de-Team | Impressum | Datenschutz | Alle Rechte vorbehalten. | Dieses Portal verwendet zum korrekten Betrieb Cookies. 27.09.2020 03:19