[Zusammenfassung] 5 beste Tipps für die Verwaltung von Angular-Projekten

Wie organisiert man Angular-Projekte? Der folgende Artikel fasst 5 Top-Tipps für die Verwaltung von Angular-Projekten zusammen. Ich hoffe, er wird Ihnen hilfreich sein!

Mit der Veröffentlichung neuer Funktionen wird die Größe von Web-Apps immer größer. Im UnternehmenDevOps Diese Versionsänderung erfolgt jeden Tag. Web apps 的体积越发大。在公司 DevOps 的过程中，这种发布变更每天都发生。

在如此高速的发布周期中，代码很快会变得笨拙。特别是基于 JavaScript 开发的项目，比如 NextJS 或者 Angular。

下面是我们在管理 Angular 项目中 5 个最好的实践，以达到最大的可读性，可维护性和可扩展性。

1. 准守单一职责原则

很多单应用程序核心是具有臃肿类的代码库。从本质上讲，这些臃肿的程序很难维护。从某种意义上讲，他们很脆弱，脆弱到更改一行代码可能对到整个程序产生灾难的影响。single responsibility principle 能阻止这些问题。

单一职责原则意味着组件有且仅有一个功能。

使用这种方法构建应用程序会产生一个模块化框架，其中应用程序是通过这些代码块串联在一块的。

使用这种方法能够让程序更易读和更好维护。也能够在应用中很好定位指定的功能。【相关教程推荐：angular教程、编程教学】

为了确保你的代码能够满足这种要求，你可以问自己一个问题：这代码是干什么的？如果自己的回答包含 and 这个关键字，那么你需要将你的代码重构为单一职责的代码。

构建 Angular 应用程序并对其扩展是一种持续性的练习。在不断的练习中，使用单一职责原则组织你的项目，将使你的应用程序干净，可读和可维护。

2. 绑定代码到模块中

Angular 中的 modules 是单一原则的实施。在 Angular 中，每一个模块代表一个分离的和独立的功能。

Angular 中提供了几种类型模块去指定如何对它们进行逻辑分组或组织。

Core

Core 模块是一个 NgModule，用来实例化应用并加载全局使用的核心功能。

所以，任何单例服务都应该在核心模块中实现。页头，页脚或者导航栏都是这种类型的模块。

每个应用程序有且只有一个实例的所有服务（单例服务）都应该在核心模块实现。例如鉴权服务或者用户服务。

Feature

功能模块代表构建应用程序功能的代码。比如，在一个线上购物的应用中，我们会有将商品添加到购物车的功能和用于付款的单独模块。

Shared

共享模块由可以被组合以创建新功能的模块组成。比如，搜索函数在平台中可以被用于多个功能。

以这种方式构建代码使事情更加容易定位并增加代码可重用性的机会。

3. 组织 SCSS 文件

如果不遵循通用结构，样式文件很快就会变得杂乱无章。一般最佳实践的模式 7-1 模式，该模式使用 7 个文件夹和 1

In einem so schnellen Release-Zyklus kann Code schnell unhandlich werden. Insbesondere Projekte, die auf Basis von JavaScript entwickelt wurden, wie z. https://www.adservio.fr/post/why-nextjs-is-awesome" ref="nofollow noopener noreferrer">NextJS oder Angular. 🎜🎜Hier sind unsere 5 Best Practices für die Verwaltung von Angular-Projekten für maximale Lesbarkeit, Wartbarkeit und Erweiterbarkeit. 🎜

1. Halten Sie sich an das Prinzip der Einzelverantwortung

🎜 Viele Ein einzelner Anwendungskern ist eine Codebasis 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. Prinzip der Einzelverantwortung kann diese Probleme verhindern. 🎜🎜Das Single-Responsibility-Prinzip bedeutet, dass eine Komponente eine und nur eine Funktion hat. 🎜🎜Das Erstellen von Anwendungen mit diesem Ansatz führt zu einem modularen Framework, in dem die Anwendung durch diese Codeblöcke aneinandergereiht wird. 🎜🎜Mit dieser Methode kann das Programm lesbarer und wartbarer werden. Außerdem können bestimmte Funktionen in der Anwendung problemlos gefunden werden. [Empfohlene verwandte Tutorials: Angular-Tutorial, Programmierunterricht]🎜🎜Um sicherzustellen, dass Ihr Code diese Anforderung erfüllen kann, können Sie sich eine Frage stellen: Was macht dieser Code? Wenn Ihre Antwort das Schlüsselwort und enthält, müssen Sie Ihren Code in Code mit einer einzigen Verantwortung 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. 🎜

2. Binden Sie den Code an das Modul

🎜 modules ist die Umsetzung eines einzelnen 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. 🎜

Core

🎜Core-Modul ist ein NgModule, das für die Instanziierung von Apply verwendet wird und laden Sie Kernfunktionen für den globalen Einsatz. 🎜🎜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. 🎜

Feature

🎜Feature-Module 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. 🎜

Gemeinsam genutzt

🎜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. 🎜🎜Eine solche Strukturierung Ihres Codes erleichtert das Auffinden von Dingen und erhöht die Wahrscheinlichkeit einer Wiederverwendbarkeit des Codes. 🎜

3. SCSS-Dateien organisieren

🎜Style-Dateien sind schnell, wenn Sie nicht folgen Eine gemeinsame Struktur wird unorganisiert. Ein allgemeines Best-Practice-Muster ist das 7-1-Muster, das 7-Ordner und 1-Dateien wie folgt verwendet: 🎜

• App – Der Hauptordner des Projekts

• Abstract – Der abstrakte Abschnitt, der alle Variablen, Mixins und ähnlichen Komponenten enthält

• Core – Enthält die Typografie, Resets und Boilerplate für gesamter Site-Code

• Components – Enthält die Stile für alle Komponenten, die für eine Website erstellt werden sollen, wie z. B. Schaltflächen, Registerkarten und Modalitäten

• Layout – Enthält die Dateien, die zum Definieren des Layouts der Website erforderlich sind B. Kopfzeile und Seite Boots

• Pages – Enthält jeden spezifischen Seitenstil

• Vendors – Dieser optionale Ordner eignet sich für das vom Projekt verwendete Bootstrap-Framework, z. B. bootstrap<code>bootstrap

为包含该特定文件夹所有代入的在每个文件夹中新建一个 all.scss 文件。

4. 将私有服务放到组件中

许多服务都被设计全局范围内运行。然后，在某些情况下，一个组件需要一个服务。传统的编码组件实践推荐单一责任原则。

在这种方法下，服务和组件被编写为单独的项目。

但是，考虑下入锅删除这些服务的组件会发生什么？你最终得到的是死代码，只会使得仓库变得更加混乱。在这种情况下，最佳实践是将服务放在组件内部。

这样，维护组件和服务就更加容易了。

5. 简化导入的 Angular 最佳实践

嵌套文件结构本质上比将所有代码文件都放在一个目录中的平面文件系统更加容易导航。

然而，随着项目的方法，项目的文件结构可能变得相当复杂。虽然这使得定位代码变得更加容易，但是当它在编写导入语句时提出了挑战。

当一个目录结构开始超过三个或者四个级别的时候， import 语句就会变得非常长并且难以阅读。

解决这个问题的，我们可以在 tsconfig.json 文件中配置路径的别名。在这个文件中，有个名为 compilerOptions 的数组。这个是你在应用程序中配置路径别名。

当代码编译后，在该数组中定义的路径别名会替换成真实的路径。每个路径的值是一个包含实际路径和别名的键值对对象。

构建 Angular

Erstellen Sie in jedem Ordner eine neue all.scss-Datei, die alle Zuweisungen für diesen bestimmten Ordner enthält.

4. Fügen Sie private Dienste in Komponenten ein

Viele Dienste sind global konzipiert Reichweite. 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 wird die Wartung von Komponenten und Diensten einfacher.

5. Angular Best Practices zur Vereinfachung von Importen

🎜Verschachtelte Dateistruktur wesentlich 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 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-Anweisungen sehr lang und schwer lesbar werden. 🎜🎜Um dieses Problem zu lösen, können wir tsconfig.json🎜 Alias ​​​​für den Konfigurationspfad in der Datei. In dieser Datei gibt es ein Array mit dem Namen compilerOptions. Dies ist der Pfadalias, den Sie in Ihrer Anwendung konfigurieren. 🎜🎜Wenn der Code kompiliert wird, werden die in diesem Array definierten Pfadaliase durch den tatsächlichen Pfad 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. 🎜🎜🎜Dieser Artikel ist eine Übersetzung in Form einer kostenlosen Übersetzung. Ursprüngliche Adresse: 🎜So organisieren Sie Angular-Projekte |. TOP 5 Tipps🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt von[Zusammenfassung] 5 beste Tipps für die Verwaltung von Angular-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!