Wie organisiere ich Angular-Projekte? Im folgenden Artikel werden fünf praktische Tipps für die Verwaltung von Angular-Projekten zusammengestellt und weitergegeben. Ich hoffe, dass er für alle hilfreich ist. 
Front-End-Einstieg (vue) zum Mastery-Kurs: Einstieg ins Lernen
Mit der Veröffentlichung neuer Funktionen werden Web apps immer größer. Auf der DevOps- Reise eines Unternehmens kommt es jeden Tag zu solchen Release-Änderungen. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]
In einem so schnellen Release-Zyklus kann Code schnell unhandlich werden. Insbesondere auf JavaScript basierende Projekte wie NextJS oder Angular.
Hier sind unsere 5 Best Practices für die Verwaltung von Angular -Projekten für maximale Lesbarkeit, Wartbarkeit und Skalierbarkeit.
Viele einzelne Anwendungskerne sind Codebasen mit aufgeblähten Klassen. Diese aufgeblähten Programme sind naturgemäß schwer aufrechtzuerhalten. Sie sind in dem Sinne fragil, dass die Änderung einer Codezeile katastrophale Auswirkungen auf das gesamte Programm haben kann. Das Prinzip der Einzelverantwortung kann diese Probleme verhindern.
Das Single-Responsibility-Prinzip bedeutet, dass eine Komponente genau eine Funktion hat.
Durch die Erstellung von Anwendungen mit diesem Ansatz entsteht ein modulares Framework, in dem die Anwendung durch diese Codeblöcke aneinandergereiht wird.
Die Verwendung dieses Ansatzes kann die Lesbarkeit und Wartbarkeit von Programmen verbessern. Außerdem können bestimmte Funktionen in der Anwendung problemlos gefunden werden.
Um sicherzustellen, dass Ihr Code diese Anforderung erfüllt, stellen Sie sich diese Frage:这代码是干什么的？ Wenn Ihre Antwort das Schlüsselwort and enthält, müssen Sie Ihren Code in einen Single-Responsibility-Code umgestalten.
Das Erstellen und Erweitern von Angular Anwendungen ist eine fortlaufende Aufgabe. Wenn Sie Ihre Projekte nach dem Prinzip der Einzelverantwortung organisieren, werden Ihre Anwendungen im Laufe der Zeit sauber, lesbar und wartbar.
Module in Angular sind die Umsetzung des Single-Prinzips. In Angular stellt jedes Modul eine separate und unabhängige Funktionalität dar.
Angular bietet mehrere Typmodule, um anzugeben, wie sie logisch gruppiert oder organisiert werden.
Kern
Das Core -Modul ist ein NgModule , das zum Instanziieren der Anwendung und zum Laden von Kernfunktionen für die globale Verwendung verwendet wird.
Daher sollte jeder Singleton-Dienst im Kernmodul implementiert werden. Kopfzeile, Fußzeile oder Navigationsleiste sind Module dieses Typs.
Alle Dienste (Singleton-Dienste), die eine und nur eine Instanz pro Anwendung haben, sollten im Kernmodul implementiert werden. Zum Beispiel Authentifizierungsdienst oder Benutzerdienst.
Besonderheit
Funktionsmodule stellen den Code dar, der die Anwendungsfunktionalität erstellt. In einer Online-Shopping-Anwendung hätten wir beispielsweise die Funktion, Artikel in den Warenkorb zu legen, und ein separates Modul für die Zahlung.
Geteilt
Gemeinsam genutzte Module bestehen aus Modulen, die kombiniert werden können, um neue Funktionen zu schaffen. Beispielsweise kann die Suchfunktion für mehrere Funktionen in der Plattform genutzt werden.
Wenn Sie Ihren Code auf diese Weise strukturieren, können Sie Dinge einfacher finden und die Wahrscheinlichkeit einer Wiederverwendbarkeit des Codes erhöhen.
Stildateien können schnell unorganisiert werden, wenn sie keiner gemeinsamen Struktur folgen. Allgemeines Best-Practice-Muster 7-1 Muster, das 7 Ordner und 1 Datei verwendet, wie unten gezeigt:
App – der Hauptordner des Projekts
Zusammenfassung – Der abstrakte Abschnitt, der alle Variablen, Mixins und ähnlichen Komponenten enthält
Kern – Enthält Layout-, Reset- und Boilerplate-Code für die gesamte Site
Komponenten – Enthält Stile für alle Komponenten, die für eine Website erstellt werden sollen, z. B. Schaltflächen, Registerkarten und Modalitäten
Layout – Enthält die Dateien, die zum Definieren des Layouts der Site erforderlich sind, z. B. Kopf- und Fußzeilen
Seiten – Enthält Stile für jede bestimmte Seite
Anbieter – Dieser optionale Ordner eignet sich für das vom Projekt verwendete Bootstrap-Framework, z. B. bootstrap
Erstellen Sie in jedem Ordner eine neue all.scss -Datei, die alle Zuweisungen für diesen bestimmten Ordner enthält.
Viele Dienste sind für die globale Ausführung konzipiert. Dann erfordert eine Komponente in manchen Fällen einen Service. Herkömmliche Codierungskomponentenpraktiken empfehlen das Prinzip der Einzelverantwortung.
Bei diesem Ansatz werden Dienste und Komponenten als separate Projekte geschrieben.
Aber was passiert, wenn Sie erwägen, die Komponenten dieser Dienste zu entfernen? Das Ergebnis ist toter Code, der das Lager nur noch unübersichtlicher macht. In diesem Fall besteht die beste Vorgehensweise darin, den Dienst innerhalb der Komponente zu platzieren.
Auf diese Weise ist die Wartung von Komponenten und Diensten einfacher.
Eine verschachtelte Dateistruktur ist von Natur aus einfacher zu navigieren als ein flaches Dateisystem, das alle Codedateien in einem Verzeichnis ablegt.
Je näher das Projekt rückt, desto komplexer kann die Dateistruktur des Projekts jedoch werden. Dies erleichtert zwar das Auffinden des Codes, stellt jedoch beim Schreiben von Importanweisungen Herausforderungen dar.
Wenn eine Verzeichnisstruktur über drei oder vier Ebenen hinauswächst, können import sehr lang und schwer lesbar werden.
Um dieses Problem zu lösen, können wir den Alias des Pfads in der Datei tsconfig.json konfigurieren. In dieser Datei gibt es ein Array mit dem Namen compilerOptions . Dies ist der Pfadalias, den Sie in Ihrer Anwendung konfigurieren.
Beim Kompilieren des Codes werden die in diesem Array definierten Pfadaliase durch echte Pfade ersetzt. Der Wert jedes Pfads ist ein Schlüsselwertobjekt, das den tatsächlichen Pfad und Alias enthält.
Das Erstellen und Erweitern von Angular Anwendungen ist eine fortlaufende Aufgabe.