Angular プロジェクトを管理するための 5 つの実践的なヒント (概要の共有)

Angular プロジェクトを編成するにはどうすればよいですか?次の記事では、Angular プロジェクトを管理するための 5 つの実践的なヒントをまとめて共有しています。

新機能のリリースにより、Web アプリはますます大きくなっています。この種のリリース変更は、企業の DevOps プロセスで毎日発生します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

このような高速リリース サイクルでは、コードはすぐに扱いにくくなります。特に、NextJS や Angular などの JavaScript に基づいて開発されたプロジェクト。

ここでは、可読性、保守性、拡張性を最大限に高めるために Angular プロジェクトを管理するための 5 つのベスト プラクティスを紹介します。

1. 単一責任の原則を遵守する

単一アプリケーション コアの多くは、肥大化したクラスを含むコード ベースです。その性質上、これらの肥大化したプログラムは維持するのが困難です。コードを 1 行変更すると、プログラム全体に壊滅的な影響を与える可能性があるという意味で、脆弱です。 単一責任原則により、これらの問題を防ぐことができます。

単一責任の原則とは、コンポーネントが 1 つの機能しか持たないことを意味します。

このアプローチを使用してアプリケーションを構築すると、アプリケーションがこれらのコード ブロックを通じて結び付けられたモジュール式フレームワークが作成されます。

この方法を使用すると、プログラムが読みやすくなり、保守しやすくなります。また、アプリケーション内の指定された機能を簡単に見つけることもできます。

コードがこの要件を満たしていることを確認するには、次のように自問してください。このコードは何をするのですか? 回答にキーワード と が含まれている場合は、コードを単一責任コードにリファクタリングする必要があります。

Angular アプリケーションの構築と拡張は継続的な作業です。単一責任の原則を使用してプロジェクトを整理すると、時間が経つにつれて、アプリケーションがクリーンになり、読みやすく、保守しやすくなります。

2. Angular のモジュール

#modules にコードをバインドするのは単一です。原則の実施。 Angular では、各モジュールは個別の独立した機能を表します。

Angular は、論理的にグループ化または編成する方法を指定するいくつかの型モジュールを提供します。

Core

Core モジュールは NgModule で、アプリケーションをインスタンス化し、コア関数をロードするために使用されます。世界中で使用できるように。

したがって、シングルトン サービスはコア モジュールに実装する必要があります。ヘッダー、フッター、またはナビゲーション バーは、このタイプのモジュールです。

アプリケーションごとにインスタンスが 1 つだけあるすべてのサービス (シングルトン サービス) は、コア モジュールに実装する必要があります。たとえば、認証サービスやユーザー サービスなどです。

フィーチャー

フィーチャー モジュールは、アプリケーションの機能を構築するコードを表します。たとえば、オンライン ショッピング アプリケーションには、ショッピング カートに商品を追加する機能と、支払い用の別のモジュールがあります。

共有

共有モジュールは、組み合わせて新しい機能を作成できるモジュールで構成されます。たとえば、検索機能はプラットフォーム内の複数の機能に使用できます。

このようにコードを構造化すると、見つけやすくなり、コードを再利用できる可能性が高まります。

3. SCSS ファイルを整理する

共通の構造に従わない場合、スタイル ファイルはすぐに整理されなくなる可能性があります。

7 フォルダーと 1 ファイルを使用する一般的なベスト プラクティス パターン 7-1 パターンは次のとおりです。

• App - プロジェクトのメイン フォルダー

• Abstract - すべての変数、ミックスイン、および同様のコンポーネントを含む抽象部分

• コア - サイト全体のレイアウト、リセット、定型コードが含まれます

• コンポーネント - 含まれますボタン、タブ、モーダルなど、Web サイト用に作成されるすべてのコンポーネントのスタイル

• Layout - サイト レイアウトを定義するために必要なファイルが含まれています。ヘッダーおよびフッターとして

• #Pages

  - それぞれの特定のページ スタイルが含まれます

• #Vendors - このオプションのフォルダーは、bootstrap

など、プロジェクトで使用されるブートストラップ フレームワークに適しています。 ## 各フォルダーに、その特定のフォルダーに対するすべての割り当てを含む新しい

all.scss ファイルを作成します。

4. プライベート サービスをコンポーネントに組み込む

多くのサービスはグローバルに実行するように設計されています。さらに、場合によっては、コンポーネントにサービスが必要になります。従来のコーディング コンポーネントの実践では、単一責任の原則が推奨されています。

このアプローチでは、サービスとコンポーネントは別のプロジェクトとして記述されます。

しかし、これらのサービスのコンポーネントを削除することを検討するとどうなるでしょうか?最終的にはデッドコードとなり、倉庫がさらに乱雑になるだけです。この場合、ベスト プラクティスは、サービスをコンポーネント内に配置することです。

これにより、コンポーネントとサービスの保守が容易になります。

5. インポートを簡素化するための Angular のベスト プラクティス

ネストされたファイル構造は、すべてのコード ファイルを 1 つのディレクトリに配置するよりも本質的に優れています フラット ファイル システムナビゲートが簡単になります。

ただし、プロジェクトが近づくにつれて、プロジェクトのファイル構造は非常に複雑になる可能性があります。これによりコードの検索が容易になりますが、インポート ステートメントを作成する際に課題が生じます。

ディレクトリ構造が 3 つまたは 4 つのレベルを超えて大きくなり始めると、

import ステートメントが非常に長くなり、読みにくくなる可能性があります。

この問題を解決するには、

tsconfig.json ファイルでパスのエイリアスを構成します。このファイルには、compilerOptions という名前の配列があります。これは、アプリケーションで設定するパス エイリアスです。

コードがコンパイルされると、この配列で定義されたパス エイリアスは実際のパスに置き換えられます。各パスの値は、実際のパスとエイリアスを含むキーと値のオブジェクトです。

Angular アプリケーションの構築と拡張は継続的な作業です。

この記事は意訳による翻訳です。

元のアドレス: https://www.adservio.fr/post/how-to-organize-angular-project-top-5-tips

その他のプログラミング関連の知識 、

プログラミングビデオにアクセスしてください。 ！

以上がAngular プロジェクトを管理するための 5 つの実践的なヒント (概要の共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。