[まとめ] Angular プロジェクトを管理するための 5 つのヒント

Angular プロジェクトを整理するにはどうすればよいですか?次の記事では、Angular プロジェクトを管理するための 5 つの重要なヒントをまとめています。

新機能のリリースにより、Web アプリはますます大きくなっています。この種のリリース変更は、企業の DevOps プロセスで毎日発生します。

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

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

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

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

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

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

この方法を使用すると、プログラムが読みやすくなり、保守しやすくなります。また、アプリケーション内の指定された機能を簡単に見つけることもできます。 [関連するチュートリアルの推奨事項: angular チュートリアル 、プログラミング教育 ]

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

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

2. Angular モジュールの

モジュールにコードをバインドします。 は 1 つの原則の実装です。 Angular では、各モジュールは個別の独立した機能を表します。

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

Core

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

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

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

フィーチャー

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

共有

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

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

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

共通の構造に従わない場合、スタイル ファイルはすぐに整理されなくなる可能性があります。 7 フォルダーと 1 ファイルを使用する一般的なベスト プラクティス パターン 7-1 パターンは次のとおりです。

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

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

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

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

• Layout - が含まれます。サイト レイアウトの定義に必要なスタイル ヘッダーやフッターなどのファイル

• #Pages - 特定のページごとのスタイルが含まれます

• Vendors - このオプションのフォルダーは、プロジェクトで使用されるブートストラップ フレームワーク (bootstrap

など) に適しており、すべてのプラグインが含まれます。それぞれの特定のフォルダー内に新しい all.scss ファイルを作成します。

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

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

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

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

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

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

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

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

ディレクトリ構造が 3 つまたは 4 つのレベルを超えて大きくなり始めると、import ステートメントが非常に長くなり、読みにくくなる可能性があります。

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

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

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

この記事は意訳による翻訳です。元のアドレス: Angular プロジェクトを整理する方法 | トップ 5 のヒント

プログラミング関連の知識の詳細については、次を参照してください: プログラミング ビデオ ! ！

以上が[まとめ] Angular プロジェクトを管理するための 5 つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。