コンポーネントアーキテクチャの理解：Angularアプリのリファクタリング

このチュートリアルは、モノリシック角アプリケーションをよりモジュール式コンポーネントアーキテクチャにリファクタリングする方法を示しています。 単一のコンポーネントをより小さく、再利用可能なコンポーネントに分解し、保守性と理解を向上させます。

重要な改善：

強化された保守性：
• 小さいコンポーネントにリファクタリングすると、コードが理解し、変更し、デバッグしやすくなります。 再利用可能性：
より小さなコンポーネントは、アプリケーションのさまざまな部分で再利用できます。
• より明確な構造：構造化されたコンポーネントツリーは、コードの全体的な組織と読みやすさを向上させます。
• スマート対ダムコンポーネント：アプローチでは、「スマート」コンポーネント（データとロジックの管理）と「ダム」コンポーネント（プレゼンテーションの取り扱い）を使用し、懸念のきれいな分離を促進します。
効率的な通信：
• コンポーネントカスタムイベントとプロパティバインディングを使用して効果的に通信し、緊密な結合を回避します。 スケーラビリティ：
プロバイダーを
• プロバイダーに移動すると、アプリケーション全体のサービスの可用性が保証され、将来の成長と怠zyな負荷がサポートされます。 テスト可能性：
モジュラー設計により、単体テストが簡素化されます
• パート1の要約： TodoDataServiceパート1は、Angular CLIを使用してTODOアプリケーションのセットアップを取り上げ、AppModuleクラス、
サービスを作成し、UIに対して
• を使用しました。 アプリケーションのアーキテクチャは、単一の大きい。でした

パート2のリファクタリング：

この部分は、次のように作成してリファクタリングします

Todo TodoDataService AppComponentAppComponent：新しいtodosを作成する処理

：todosのリストを表示します

：単一のtodoアイテムを表示します。

：残りのtodosの数を示しています。

AppComponent

• TodoListHeaderComponent
学習目標：
• TodoListComponent
• 角度コンポーネントアーキテクチャを理解しています。TodoListItemComponent
プロパティバインディングを使用してデータをコンポーネントに渡します。
• イベントリスナーを使用して、コンポーネントで放出されるイベントを処理します TodoListFooterComponentより小さく、再利用可能なコンポーネントの利点。

スマートコンポーネントとダムコンポーネントの違い。

始めましょう：

1. 最新のAngular CLIをインストールします：npm install -g @angular/cli@latest（または以前のバージョンを削除するにはnpm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latestを使用してください）。
リポジトリをクローンします：
2. git clone git@github.com:sitepoint-editors/angular-todo-app.git
依存関係のインストール：
3. cd angular-todo-app; npm install
パート1のチェックアウト：
4. git checkout part-1
アプリを実行します：
5. ng serve

元のappComponent：

オリジナル

には、すべてのアプリケーションのロジックとUIが単一のコンポーネントに含まれていましたが、これはメンテナンス性には理想的ではありません。 AppComponent

新しいコンポーネントの作成：

チュートリアルの詳細は、角度CLI（

）を使用して各新しいコンポーネントの作成、関連するHTMLおよびロジックを

から新しいコンポーネントに移動することを詳述しています。 データのバインディングとイベント処理のためのng generate component <component-name></component-name>およびAppComponentデコレータの使用を強調し、新しいコンポーネントを「馬鹿げた」と再利用可能にします。 @Input()@Output()移動

：

TodoDataServiceプロバイダーは

から

に移動して、アプリケーション全体のアクセシビリティを確保します。 TodoDataServiceAppComponent概要：AppModule

この部分は、アプリケーションを正常にリファクタリングし、Angularコンポーネントアーキテクチャのベストプラクティスを実証します。 次の部分では、REST APIを統合します。 すべてのコードはGitHubで利用できます。 この記事には、Angularコンポーネントアーキテクチャの重要な概念に対応するFAQセクションも含まれています。

以上がコンポーネントアーキテクチャの理解：Angularアプリのリファクタリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。