Aus dem Kurs: Angular Grundkurs 2: Projektsetup
Die Bedeutung der einzelnen Ordner
“
Lasst uns nun gemeinsam einen ersten Blick in ein Projekt-Setup werfen, das Angular CLI für uns erzeugt hat. Ihr könnt Euch vielleicht erinnern, wir haben je gemeinsam das Projekt LinkedIn erzeugt und in diesem LinkedIn-Projektverzeichnis befinde ich mich jetzt hier. Im Root des Projekverzeichnisses findet Ihr drei weitere Ordner. Der e2e-Ordner, der ist dafür da, dass Sie n2n-Tests machen könnt mithilfe von Protractor. Entsprechend sind hier die Definitionen der Tests, die Protractor-Konfiguration und die TypeScript-Konfiguration für n2n zu finden. Protractor ist ein Hilfsmittel, das auf Basis von SE-Linien in der Lage ist, automatisch ein Browser zu öffnen und einen automatisierten Test innerhalb des Browsers durchzuführen auf Basis Euer UI, ist also wirklich ein sehr schickes Feature. Weiter findet Ihr hier ein node_modules-Ordner. Bitte denkt dadran, dass dieser node_modules-Ordner nur dann sichtbar wird, wenn Ihr ein npm install ausgeführt habt. Solltet Ihr auch zum Beispiel beim Erstellen des Projektes mit New die Option skip install verwenden, wird dieses node_modules-Verzeichnis nicht existent sein. Was ist in dem node_modules- Verzeichnis drin? Im Wesentlichen sind hier alle Bibliotheken drin, die Ihr benötigt, um Euer Projekt-Setup dann entsprechend vollständig zu haben, da sind auch Hilfsmittel drin, mit dem Ihr Typsicherheiten generieren könnt, da sind Hilfsmittel drin, mit dem Ihr Veröffentlichungen durchführen könnt, Tests durchführen könnt und so weiter und so weiter. Das sind also alles ganz viele Module, die Euch NPM automatisch im Rahmen des Gesamtsetups dann heruntergeladen hat und zur Verfügung stellt. Im Regelfall habt Ihr mit diesem Ordner aber wirklich gar nichts zu tun. Also Ihr müsst Euch keine Sorgen machen, dass Ihr jetzt Euch genötigt fühlt, jetzt die einzelnen Ordner hier im Detail zu verstehen oder zu analysieren. Ihr habt mit diesem Ordner kein weiteres Business und alles weitere wird von Angular CLI für Euch entsprechend umgesetzt. Weiter habt Ihr hier das Source-Verzeichnis, hier sind die Quellen Eures gesamten Projektes drin. Und diese Quellen sind unterteilt in drei weitere Ordner, einmal das Applikationsverzeichnis und innerhalb des Applikationsverzeichnisses findet Ihr zum einen natürlich die Applikationskomponente, damit startet später Euer gesamtes Projekt, inklusive dem Applikationsmodul und einem Routingmodul. Und dieses Routingmodul ist für Single-Page-Applications, wenn Ihr beim Erstellen des Projektes Routing nicht auf to setzt, fehlt dieses Routingmodul. Entscheidend für Euch ist eigentlich zu wissen, dass ab jetzt im Grunde genommen alle weiteren Komponenten, Direktiven, Pipes et cetera, die Ihr erstellt, in diesem App-Verzeichnis landen, das heißt, Euer gesamtes Projekt lebt im Wesentlichen hier im App-Verzeichnis, außer natürlich die Index-Datei und der main.ts, sowie der styles.ts, die global gültig sind für das Environment und um Angular. Weiter haben wir hier noch ein Assets-Ordner. Entscheidend ist, dieser Assets-Ordner, so wie er ist, wird bei der Veröffentlichung automatisch mit exportiert und die Inhalte dann auch eins zu eins mit exportiert. Der Vorteil bei der ganzen Konstellation ist es dann, dass ich in diesem Assets-Ordner Ressourcen hineinpacke, die ich in meinem Projekt benötige. Im Wesentlichen ist das fast immer SVG-Dateien, Image-Dateien und so weiter und so weiter und so weiter. Sollte dieses Assets-Verzeichnis leer sein, wird es auch beim Veröffentlichen nicht mitkopiert, also nicht wundern, dass es dann entsprechend nicht existent ist. Tut mir auch einen riesengroßen Gefallen bitte, in dieses Assets-Verzeichnis gehören keine Skripte rein, also keine Fremdbibliotheken in irgendeiner Form dort, hier in den Scriptsverzeichnis unterspeichern und dann in der Index-HTML referenzieren. Das ist nicht schick und das ist nicht nett. Besser ist das, wenn wir das Ganze später in Kombination mit Angular CLI und Webpack dann hineinkonfigurieren, dann ist das ein eindeutig sauberes Konstrukt. Last but not least haben wir hier das Environment-Verzeichnis und in diesem Environment-Verzeichnis gibt es zwei Dateien. Die Dateien sind sehr, sehr ähnlich und werden in unterschiedlichen Situationen benutzt. Veröffentlicht Ihr beispielsweise während der Entwicklung, wird die normale environment.ts verwendet, veröffentlicht Ihr für den Produktionsbetrieb, also um eine Release-Build zu erzeugen, dann wird environment.prod.ts hier verwendet. Für Euch wichtig zu wissen ist, dass innerhalb der Environments-Dateien Konstanten hinterlegt sind, die Ihr in Eurem Quellcode entsprechend auslesen könnt und dann abhängig davon, ob Ihr im Development- oder im Production-Betrieb seid, unterschiedliche Prozesse abarbeiten könnt in Eurem Projekt. Ein einfaches Beispiel ist zum Beispiel, dass, wenn ich im Production-Build bin, dass ich alle Konsolen-Logs deaktivieren will. Dann kann ich das relativ einfach mit einem Flag dann überprüfen. So ein Flag kann in diesem Fall zum Beispiel ganz einfach darin zu erkennen sein, dass die Konstante-Production auf true gestellt ist, während das beim normalen Development-Betrieb auf false gestellt ist. In diesem Video haben wir uns jetzt gemeinsam einen sehr schönen Überblick darüber verschaffen, welche Ordner es im Projekt-Setup mit Angular CLI gibt.