Angular Project-Architektur

[Marck]

Ich verwende für generische Frontend-Projekte eine auf Basis von Grunt und Bower eigens geschriebene Tool-Chain, welche Modernizr, Bootstrap, FontAwesome, Sass, Compass und jQuery einbindet, die üblichen Grunt-Tasks durchführt und einen Production-Build erstellt. Dabei werden die JS Vendor Libabries/Plugins und die selbst geschriebenen Scripte zu jeweils einer Datei kompiliert und am Fuß der Seite eingebunden.

Nun stehe ich davor, mein erstes Angular-Projekt umzusetzen und brauche zusätzlich angularjs, kharma, protractor, etc. Leider bietet Yeoman keinen Generator, der alle von mir benötigten Tools vereinbart, und ich habe auch sonst nichts Passendes gefunden.

Wie gehe ich das am besten an: Soll ich die obens erwähnte Tool-Chain mit Angular oder einen vorhandenen Angular-Generator mit zusätzlichen Libraries ausbauen. Und wichtiger noch: Wie konkateniere ich die JS Dateien für einen optimierten Production Build? Jeweils eine Datei für Controller, Direktiven, Services, usw., oder alles zusammen?

[lottikarotti]

Komischerweise antwortet keiner der angular fetischisten

Schon zur Stelle! Allerdings haben die Fragen des TE weniger mit AngularJS im Speziellen zu tun.

Nun stehe ich davor, mein erstes Angular-Projekt umzusetzen und brauche zusätzlich angularjs, kharma, protractor, etc. Leider bietet Yeoman keinen Generator, der alle von mir benötigten Tools vereinbart, und ich habe auch sonst nichts Passendes gefunden.

Dann erstelle einen. Ich persönlich nutze für diverse Anwendungsfälle eigene Projekt-Vorlagen.

Wie gehe ich das am besten an: Soll ich die obens erwähnte Tool-Chain mit Angular oder einen vorhandenen Angular-Generator mit zusätzlichen Libraries ausbauen. Und wichtiger noch: Wie konkateniere ich die JS Dateien für einen optimierten Production Build? Jeweils eine Datei für Controller, Direktiven, Services, usw., oder alles zusammen?

Während der Entwicklungsphase lasse ich - je nach Projektgröße - die JavaScript-Dateien gerne automatisiert und separiert in die index.html einbinden. Für den Produktivbetrieb jage ich mein Projekt dann durch einen Build-Prozess, der alle relevanten JavaScript-Dateien in einen Topf wirft und dessen Inhalt anschließend zusammenstampft. Das Ziel davon ist ja schließlich HTTP-Request zu sparen - deshalb macht es im Produktivbetrieb wenig Sinn, deine Komponenten in unterschiedliche JavaScript-Dateien auszulagern, außer diese werden - kontextabhängig - zu einem späteren Zeitpunkt geladen (was bei sehr großen Projekten der Fall sein kann). Auch das von rkr erwähnte Grunt-Plugin solltest du dir zu Gemüte führen.

Viele Grüße,
lotti

[rkr]

Und wichtiger noch: Wie konkateniere ich die JS Dateien für einen optimierten Production Build? Jeweils eine Datei für Controller, Direktiven, Services, usw., oder alles zusammen?

Das hier schon gesehen?
Ansonsten ist es natürlich richtig, alles in eine große Datei zu packen. Abhängig von der Größe deiner Anwendung kann später auch eine Strategie greifen, die unterschiedlichen, hart trennbaren Anwendungsteile in separate, aber zusammengefasste Javascript-Files zu setzen. Kommt dann natürlich auch drauf an, ob du beispielsweise den Router verwendest.

Komischerweise antwortet keiner der angular fetischisten, machen wohl in selbsthilfegruppe.

Ganz schön große Töne für jemanden, der stets seinen Anfängerstatus betont..

Komischerweise antwortet keiner der angular fetischisten, machen wohl in selbsthilfegruppe.

das haste sicher auch schon gefunden und durchgearbeitet:
http://www.yearofmoo.com/2013/09/adv...angularjs.html

jedoch wird hier und an anderen stellen immer wieder betont:
"Protractor and Karma should not be used together"

https://github.com/angular/protracto...mment-19927049
https://github.com/angular/protracto...mment-19931154