Angular Projektstruktur

1. Best Practice für eine Angular Projektstruktur
2. So definieren Sie einen hochskalierbaren Projektordner
3. Abschluss

Es ist keine Untertreibung, wenn man sagt, dass Organisation einer der Grundwerte eines Programmierers ist. Neben dem Schreiben von sauberen und prägnanten Codes ist es eine ausgezeichnete Praxis, die Gewohnheit zu pflegen, Projekte mit gut strukturierten Komponentenordnern zu erstellen.

Best Practice für eine Angular Projektstruktur

Warum ist es gut, eine hervorragende Ordnerstruktur für Angular-Projekte beizubehalten?

1. Das Aufrechterhalten einer organisierten Ordnerstruktur stellt Sie als erfahrenen Programmierer dar, der den Wert der Organisation kennt.
2. Eine gute Struktur ist einfach zu lesen und zu pflegen, besonders wenn Codes geteilt oder Projekte erstellt werden; es macht es jedem leicht, Dateien zu finden, an denen wir arbeiten möchten.
3. Es erleichtert das Erkennen und Korrigieren von Fehlern in unseren Anwendungen.
4. Ein organisierter Projektordner ist ideal, wenn Sie umfangreiche Anwendungen erstellen; In diesem Szenario ist es äußerst wichtig, dass wir eine gut organisierte Projektstruktur beibehalten, da wir Hostdateien, Komponenten und Dienste erstellen werden. Und der Versuch, eine bestimmte Datei in einem Heuhaufen unorganisierter Ordner zu finden, kann höllisch und frustrierend sein.

Normalerweise sollte der von Angular CLI bereitgestellte Standardordnerbaum für einfache Anwendungen ausreichen, aber wie erstellen wir eine skalierbare Dateistruktur, wenn wir eine umfangreiche Anwendung erstellen?

So definieren Sie einen hochskalierbaren Projektordner

1. Organisieren Sie Ordner und Unterordner nach Funktionen

   Anwendungen, die wir erstellen, haben verschiedene Komponenten, die verschiedene Funktionen ausführen; Wir sollten versuchen, Ordner entsprechend der Funktion jeder Komponente zu erstellen.

   Wenn wir beispielsweise einen Dienst in eine Anwendung einfügen, sollten wir einen Dienstordner erstellen; Wenn wir eine App haben, mit der sich Benutzer anmelden können, sollten wir einen Anmeldeordner erstellen, der sich mit Benutzeranmeldungen befasst.

   Wenn wir einige andere Komponenten erstellen müssen, die sich direkt auf den Anmeldeordner beziehen, ist es ratsam, einen Unterordner innerhalb der Anmeldeordner zu erstellen.

2. Dateien und Ordner benennen

   Wenn wir in irgendeiner Situation nach Dateien suchen, sehen wir uns zuerst die Namen von Ordnern an, die eng mit diesem Dateinamen zusammenhängen.

   Wenn Sie nach Musikdateien suchen, sollten wir uns zuerst den Musikordner ansehen. Dasselbe Szenario gilt für die Benennung unserer Dateien und Komponenten.

   Beim Erstellen von Komponenten in einem Ordner können wir die Dateien im Bindestrichstil benennen. Wenn wir beispielsweise Dateien in einem Aufgabenlistenordner erstellen, können wir die Datei edit-todo.component.ts nennen.

   Auf diese Weise ist es für uns einfach, die Dateien zu verschieben, wenn wir einen Fehler beheben möchten; Es erleichtert unseren Mitarbeitern auch das Durchsehen unserer Codes.

3. Entwerfen Sie eine flache Ordnerstruktur

   Obwohl es sich bewährt hat, Unterordner für eng verwandte Komponenten zu erstellen, sollten wir versuchen, die Unterordner so gering wie möglich zu halten.

   Wir sollten so viel wie möglich versuchen, sicherzustellen, dass die Unterordner neun Unterordner nicht überschreiten. Zahlen darüber werden uns schnell ermüden, wenn wir die Komponenten kombinieren.

4. Bootstrapping

   Eine weitere zu berücksichtigende Sache, um einen hochskalierbaren Projektordner zu erhalten, ist die Platzierung der Bootstrapping-Logik in der Datei main.ts der Projektanwendung.

   Vermeiden Sie es, die Anwendungslogik in die Datei zu platzieren. Die Fehlerbehandlung kann auch in der Bootstrap-Logik platziert werden.

Abschluss

Idealerweise gibt es keinen universellen Ansatz zum Einrichten einer effektiven Ordnerstruktur für ein Angular-Projekt, aber die oben genannten Schritte können übernommen werden.