Angularのアーキテクチャ理解

[学習メモ](https://angular.io/guide/architecture)

Angularは、HTMLおよびTypeScriptでクライアントアプリケーションを構築するためのプラットフォームおよびフレームワークを指す。AngularはTypeScriptで書かれており、アプリにインストールするTypeScriptライブラリのセットとして、コアおよびオプション機能を実装する。

Angularアプリケーションの基本的な構成要素はNgModule

- Componentのコンパイルコンテキストを提供
- 関連するコードを機能セットに収集

Angularアプリは、NgModuleのセットによって定義されており、アプリには常に、ブートストラップを有効にするルートモジュールがあり、通常はさらに多くの機能モジュールがある。

<strong>Componentについて</strong>
・ビューを定義するもの
　→ビューは、Angularがプログラムロジックとデータに従って選択および変更できる画面要素のセット。
・ビューに直接関連しない特定の機能を提供するサービスを利用する。
　→サービスプロバイダーを依存関係としてコンポーネントに注入し、コードをモジュール化して再利用可能かつ効率的にすることができる。

コンポーネントとサービスはどちらも単なるクラスであり、タイプをマークし、Angularにそれらの使用方法を伝えるメタデータを提供するデコレーターを備えている。
・コンポーネントクラスのメタデータ
→ビューを定義するテンプレートに関連付ける。テンプレートは、通常のHTMLとAngularディレクティブおよびバインドマークアップを組み合わせて、AngularがHTMLを変更してから表示するようにする。
・サービスクラスのメタデータ
→Angularが依存性注入(DI)を通じてコンポーネントを利用できるようにするために必要な情報を提供する。

通常、アプリのコンポーネントは、階層的に配置された多くのビューを定義する。Angularは、Routerビュー間のナビゲーションパスを定義するのに役立つサービスを提供する。ルーターは、洗練されたブラウザ内ナゲーション機能を提供する。

#Moduleについて
NgModuleは、アプリケーションドメイン、ワークフロー、または密接に関連する昨日セット専用のコンポーネントセットのコンパイルコンテキストを宣言する。NgModuleは、コンポーネントをサービスなどの関連コードに関連付けて機能ユニットを形成できる。

全てのAngularアプリには、従来の名前が付けられたルートモジュール(AppModule)があり、これはアプリケーションを起動するブートストラップメカニズムを提供する。通常、アプリには多くの機能モジュールが含まれている。JavaScriptのモジュールと同様に、NgModuleは他のNgModuleから機能をインポートし、独自の機能を他のNgModuleでエクスポートして使用することができる。例えば、アプリでルーターサービスをしようするには、RouterNgModuleをインポートする。

コードを個別の機能モジュールに編成すると、複雑なアプリケーション開発をしたり、再利用を考慮した設計に役立つ。また、遅延読み込み、つまりオンデマンドでモジュールを読み込むことができ、起動時に読み込む必要のあるコードの量を最小限に抑えることができる。

#Componentについて
全てのAngularアプリケーションには、コンポーネント階層をページドキュメントオブジェクトモデル(DOM)に接続するルートコンポーネントが少なくとも一つはある。各コンポーネントは、アプリケーションデータとロジックを含むクラスを定義し、ターゲット環境で表示されるビューを定義するHTMLテンプレートに関連付ける。
デコレータは、成分としてその直下のクラスを識別し、テンプレートおよび関連するコンポーネント固有のメタデータを提供する。　@Component()

##テンプレート、ディレクティブ、およびデータバインディング
テンプレートは、HTMLを表示前にHTML要素を変更できるAngularマークアップと組み合わせる。テンプレートディレクティブはプログラムロジックを提供し、バインディングマークアップはアプリケーションデータとDOMを接続する。データバインディングには2つのタイプがある。
・イベントバインディングを使用すると、アプリケーションデータを更新することで、ターゲット環境でのユーザー入力にアプリが応答できる。
・プロパティバインディングを使用すると、アプリケーションデータから計算された値をHTMLに補完できる。

ビューが表示される前に、Angularはディレクティブを評価し、テンプレートのバインディング構文を解決して、プログラムデータとロジックに従ってHTML要素とDOMを変更する。Angularha双方向のデータバインディングをサポートしている。つまり、ユーザーの選択など、DOMの変更もプログラムデータに反映される。

#Serviceと依存関係の注入
特定のビューに関連付けられておらず、コンポーネント間で共有するデータまたはロジックの場合、サービスクラスを作成する。サービスクラス定義の直前には、デコレータがある。デコレータは、他のプロバイダーを依存関係としてクラスに注力できるメタデータを提供する。 @Injectable()

依存性注入を使用すると、コンポーネントクラスに無駄のない効率的な状態を保つことができる。サーバーからデータを取得したり、ユーザー入力を検証したり、コンソールに直接ログを記録したりない。そのようなタスクをサービスに委任している。

##ルーティング
AngularRouterNgModuleは、様々なアプリケーションの状態間のナビゲーションパスを定義し、アプリの階層を表示できるサービスを提供する。使い慣れたブラウザナビゲーション原則に基づいてモデル化されている。
・アドレスバーにURLを入力すると、ブラウザーは対応するページに移動する
・ページ上のリンクをクリックすると、ブラウザが新しいページに移動する
・ブラウザの戻るボタンと進むボタンをクリックすると、ブラウザは表示したページの履歴を前後にナビゲートする
ルーターは、URLのようなパスをページではなくビューにマップする。ユーザーがリンクをクリックす流など、ブラウザーに新しいページを読み込むアクションを実行すると、ルーターはブラウザの動作をインターセプトし、ビュー階層を表示または非表示にする。

現在のアプリケーション状態に特定の機能があり、それを定義するモジュールがロードされていないtルーターが判断した場合、ルーターはモジュールをオンデマンドで遅延ロードできる。
ルーターは、アプリのビューナビゲーションルールとデータ状態に従ってリンクURLを解釈する。ユーザーががボタンをクリックするか、ドロップボックスから選択するか、任意のソースから他の刺激に応じて、新しいビューに移動できる。ルータはブラウザの履歴にアクティビティを記録するため、戻るボタンと進むボタンも機能する。

ナビゲーションルールを定義するには、ナビゲーションパスをコンポーネントに関連付ける。パスは、テンプレート構文がビューをプログラムデータと統合するのとほぼ同じ方法で、プログラムデータを統合するURLのような構文を使用する。その後、ユーザー入力と独自のアクセスルールに応じて、プログラムロジックを適用して、表示または非表示にするビューを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374557/5fbe1d85-8986-94bb-070c-f2a5d0241fbc.png)