Vorgeschlagenes Setup für die AngularJS-Entwicklung in Visual Studio 2013 [geschlossen]

9

Ich fange mit AngularJS an. Das Backend wird die Web-API sein (was auch für mich neu ist) und ich möchte nur eine IDE verwenden. Daher versuche ich herauszufinden, wie ein Projekt in Visual Studio 2013 für AngularJS eingerichtet wird. Ich möchte es als separates Projekt behalten, um es lose an die API gekoppelt zu halten (oder die Benutzeroberfläche von der Web-API entkoppelt zu halten). Es fällt mir schwer herauszufinden, wie ich dieses Setup bekomme. Damit....

  • Welcher Projekttyp eignet sich am besten für ein reines AngularJS-Projekt (reines HTML 5)?
  • Wird empfohlen, Grunt zu verwenden? Oder ist MS Build besser für Build-Aufgaben geeignet? Ich denke hier, Flusen, Minimieren, Verketten von Dateien zu einer einzigen Verteilungsdatei, vielleicht Kopieren auf einen Webserver.
  • Wie führen Sie Tests durch? Gibt es ein Plugin zum Ausführen von Jasmin-Tests? Führen Sie Karma nur separat aus?
  • Gibt es gute Vorlagen für AngularJS? Verwenden Sie ngBoilerplate?

Jede Hilfe wäre dankbar.

visual-studio html5 angularjs Greg McGuffey
quelle
meta.programmers.stackexchange.com/questions/6483/…
Mücke
6
Ich habe ein kleines Problem damit, dass dies als zu weit gefasst angesehen wird. Ich bin in Bezug auf dieses Thema etwas verloren und daher ist es äußerst schwierig, mich auf meine Frage zu konzentrieren. Daher weiß ich an dieser Stelle nicht wirklich, wie ich eine spezifischere Frage stellen soll. Je mehr ich dies google, desto verwirrter werde ich ... :(
Greg McGuffey
1
Ich suchte nach einer einfachen Antwort auf dieselbe Frage. Vielleicht besteht der einzige Weg darin, die Frage vollständig zu vereinfachen. Ich werde eine einfachere Frage hinzufügen und auf diese verweisen.
Amelvin
2
Ich bin nicht einverstanden mit der Idee, dass diese Frage zu weit gefasst ist. Holen Sie sich zwei Programmierer in den gleichen Raum und sie würden eine ähnliche Frage. Tatsächlich habe ich genau die gleiche Frage, da wir im Begriff sind, eine Web-App mit denselben Frameworks zu starten.
schöner

Antworten:

7

Wir hatten die gleichen Entscheidungen zu treffen.

Wir haben uns enschieden :

  • Stellen Sie sicher, dass der gesamte Erstellungsprozess nicht von Visual Studio abhängt. Wir haben uns für Tools entschieden, die in der Welt der Winkelentwicklung als Mainstream gelten. Auf diese Weise ist es einfacher, Unterstützung von der Community zu erhalten.

  • Verwenden Sie Visual Studio-Erweiterungen, sofern verfügbar, um das Erlebnis nach Möglichkeit zu verbessern

Wie :

  • benutze gruntund karma. Wir haben ein Projekt mit einem Gerüst erstellt yeoman angularund dieses als Vorlage verwendet, um unseren eigenen Erstellungsprozess einzurichten. Unsere ist fast so wie sie ist.

  • Installieren Sie die Web Essentials 2013-Erweiterung . Die Erweiterung verwendet dieselbe .jscsund die .jshintrc, die Ihr gruntBuild verwendet. Wir haben beschlossen, die Web Essentials 2013-Erweiterung die .lessDateien beim Speichern verarbeiten zu lassen, damit auf sie verwiesen werden index.htmlkann main.cssund kein Erstellungsprozess erforderlich ist.

  • Stellen Sie sicher, dass unsere Einstellungen für den Visual Studio-Editor mit unseren .jscsund .jshintrcFormatierungsregeln (Abstand, Zeilenende usw.) übereinstimmen.

Ebenfalls:

  • Wir führen karma watch(oder grunt watch) die Befehlszeile für unsere Tests aus.

  • Das Anhängen an das Ausführen von Karma-Tests in Visual Studio funktioniert einwandfrei. Sie müssen Ihre Tests mit dem IE ausführen. Aber wir verwenden die Chrome-Entwicklungstools meistens.

  • Wir verwenden den Jasmin Web Runner überhaupt nicht. Karma hat alles was Sie brauchen.

  • Zur Vereinfachung befinden sich unsere App-Dateien in / static / in unserem WebAPI-Projekt. Auf diese Weise benötigen Sie keinen weiteren Server, um Ihre statischen Dateien bereitzustellen.

  • Sie können NTVS zum Debuggen gruntoder karmaeines anderen in Ihrem Erstellungsprozess enthaltenen Tools in Visual Studio verwenden.

  • Die Integration in unser CI (CCNet) war einfach. Rufen Sie einfach auf, grunt ciwo cisich eine Aufgabe befindet, die den Build ausführt , und führen Sie die Tests dann mit Reportern im Junit-Stil anstelle von Reportern vom Konsolentyp aus.

  • Wir haben auch sichergestellt, dass das Ausführen des Erstellungsprozesses optional ist. Der Erstellungsprozess bündelt Inhalte in einem distOrdner. Wir führen integrierte Tests für diesen Ordner durch, aber zur jsEntwicklungszeit werden Rohdateien (nicht minimiert oder verkettet) ausgeführt. Die yeoman angularVorlage hat uns leicht dorthin gebracht.

ich hoffe das hilft

Schlau
quelle
Vielen Dank! Das hilft sehr. Eine Folgefrage: Ich gehe davon aus, dass Sie MS Build für den Web-API-Teil verwenden und dann grunzen für die Benutzeroberfläche (in / static / folder) ausführen, oder?
Greg McGuffey
Was mir noch unklar ist, ist, welche Art von Projekt ich verwenden soll, wenn ich die AngularJS-Benutzeroberfläche von der Web-API trennen möchte. Ich verstehe, dass Sie sie zusammengestellt haben. Ich frage mich nur, wie ich es machen soll, wenn ich sie nicht zusammen haben möchte, wenn Sie Ideen dazu haben.
Greg McGuffey
Zu Ihrem ersten Kommentar: Ja. Zu Ihrem 2.: Wir haben sie nur in unserer Entwicklungsumgebung in das WebAPI-Projekt eingefügt. Zur Bereitstellungszeit werden sie an anderer Stelle bereitgestellt. Wenn Sie nicht über eine Pick Web Projektart dann bietet VS spezifisch für Web - Projekte werden nicht funktionieren (Go to Definition in einer Javascript - Datei zum Beispiel).
Schlauer
Option 1: Sie könnten ein leeres ASP.Net MVC-Projekt verwenden, Abhängigkeiten löschen und es würde Ihnen gut gehen. Die einzige Sache ist, dass das Ausführen dieses Projekts eine kompiliert /bin/project.dll, die nichts tut.
Schlauer
Option 2: Erstellen Sie ein neues Node.js-Projekt in VS (erfordert NTVS). Es verfügt über einen eigenen Webserver (in nodejs), der Ihre statischen Dateien bereitstellt. Ich habe es getestet und es funktioniert.
Sly