Angular 2 アーキテクチャ

Angular 2 アプリケーションは主に以下の 8 つの部分から構成されています：

  • 1、モジュール (Modules)
  • 2、コンポーネント (Components)
  • 3、テンプレート (Templates)
  • 4、メタデータ (Metadata)
  • 5、データバインディング (Data Binding)
  • 6、ディレクティブ (Directives)
  • 7、サービス (Services)
  • 8、依存性注入 (Dependency Injection)

次の図は、各部分がどのように連携するかを示しています。

図中のテンプレート (Templates) は Angular が拡張した HTML 構文で構成され、コンポーネント (Components) クラスはこれらのテンプレートを管理します。アプリケーションのロジック部分はサービス (Services) によって行われ、サービスとコンポーネントはモジュールにパッケージ化され、最後にルートモジュールをブートストラップしてアプリケーションを起動します。

次に、上記の 8 つの部分を個別に解説します。

モジュール

モジュールはコードの集まりで構成され、単純なタスクを実行するために使用できます。

Angular アプリケーションはモジュール化されており、独自のモジュールシステムである NgModules があります。

各 Angular アプリケーションには少なくとも 1 つのモジュール（ルートモジュール）が必要であり、通常は AppModule と名付けることができます。

Angular モジュールは @NgModule デコレーターを持つクラスであり、モジュールの属性を記述するメタデータオブジェクトを受け取ります。

いくつかの重要な属性は次のとおりです：

  • declarations （宣言）- このモジュールに属するビュークラス。 Angular には、コンポーネント、ディレクティブ、パイプの 3 種類のビュークラスがあります。

  • exports- 宣言（declaration）のサブセットで、他のモジュールのコンポーネントテンプレートで使用できます。

  • imports- このモジュールのコンポーネントテンプレートで必要となる、他のモジュールでエクスポートされたクラスのモジュール。

  • providers- サービスの作成者。このモジュールはそれらをグローバルなサービスリストに追加し、アプリケーションのどこからでもアクセスできるようにします。

  • bootstrap- アプリケーションのメインビューであり、ルートコンポーネントと呼ばれます。これは他のすべてのアプリケーションビューのホストです。ルートモジュールのみが bootstrap プロパティを設定する必要があります。

最も単純なルートモジュール:

app/app.module.ts ファイル：

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

次に、ルートモジュールをブートストラップしてアプリケーションを起動します。開発プロセスでは通常、main.ts ファイルで AppModule をブートストラップします。コードは次のとおりです：

app/main.ts ファイル：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

コンポーネント(Components)

コンポーネントは、アプリケーションと論理ページのビュー部分を処理するためのテンプレートのコントロールクラスです。

コンポーネントは Angular アプリケーションを構成する基礎であり中核であり、アプリケーション全体で使用できます。

コンポーネントは、自身のレンダリング方法と依存性注入の設定方法を認識しています。

コンポーネントは、プロパティとメソッドからなる API を介してビューと対話します。

Angular コンポーネントを作成する方法は 3 つのステップです：

  • @angular/core から Component デコレーターをインポートする
  • 通常のクラスを作成し、@Component で装飾する
  • @Component で selector を設定するカスタムタグ、および templateテンプレート

テンプレート(Templates)

Angular テンプレートのデフォルト言語は HTML です。

テンプレートを使用してコンポーネントのビューを定義することで、Angular にコンポーネントの表示方法を指示できます。以下は簡単な例です：

<div>
网站地址 : {{site}}
</div>

Angular では、デフォルトで二重波括弧を補間構文として使用します。波括弧の中の値は、通常はコンポーネントのプロパティの変数名です。

メタデータ(Metadata)

メタデータは、Angular にクラスの処理方法を指示します。

次の状況を考えてみましょう。Component というコンポーネントがあります。これはクラスですが、Angular にこれがコンポーネントであることを伝えるまでは単なるクラスです。

このクラスにメタデータを添付して、Angular に Component がコンポーネントであることを伝えることができます。

TypeScript では、デコレーター（decorator）を使用してメタデータを添付します。

例

@Component({
   selector : 'mylist',
   template : '<h2>サンプル</h2>'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component デコレーターは設定オブジェクトを受け取り、その直後のクラスをコンポーネントクラスとしてマークします。

Angular はこの情報に基づいてコンポーネントとそのビューを作成および表示します。

@Component の設定項目の説明：

  • selector- CSS セレクター。Angular に親 HTML 内で <mylist> タグを探し、そのタグ内にコンポーネントを作成して挿入するように指示します。

  • templateUrl- コンポーネントの HTML テンプレートのアドレス。

  • directives- このテンプレートが依存するコンポーネントやディレクティブを含む配列。

  • providers- コンポーネントが依存するサービスに必要な依存性注入プロバイダーを含む配列。

データバインディング(Data binding)

データバインディングは、データの表示とデータの対話のためのシンプルで一貫した方法をアプリケーションに提供し、アプリケーション内の値を管理するメカニズムです。

このメカニズムにより、HTML から値を取得したり代入したりできるため、データの読み書きやデータの永続化操作がより簡単かつ高速になります。

図に示すように、データバインディングの構文には 4 つの形式があります。各形式には方向があり、DOM から、DOM へ、双方向があり、図の矢印で示されています。

  • 補間: HTML タグ内にコンポーネントの値を表示します。

    <h3>
{{title}}
<img src="{{ImageUrl}}.html">
</h3>

  • プロパティバインディング: 要素のプロパティをコンポーネントのプロパティの値に設定します。

    <img [src]="userImageUrl">

  • イベントバインディング: コンポーネントのメソッド名がクリックされたときにトリガーされます。

    <button (click)="onSave()">保存</button>

  • 双方向バインディング: Angular の NgModel ディレクティブを使用すると、より簡単に双方向バインディングを行うことができます。

    <input [value]="currentUser.firstName"
       (input)="currentUser.firstName=$event.target.value" >

ディレクティブ（Directives）

Angular テンプレートは動的です。Angular がそれらをレンダリングするとき、ディレクティブに従って DOM を変更します。

ディレクティブは「ディレクティブメタデータ」を持つクラスです。TypeScript では、@Directive デコレーターを使用してクラスにメタデータを添付します。

Angular には次の 3 種類のディレクティブがあります：

  • 属性ディレクティブ：要素の属性として使用されるディレクティブ。
  • 構造ディレクティブ：DOM ツリーの構造を変更するために使用されます。
  • コンポーネント：ディレクティブの重要なサブクラスであり、コンポーネントは本質的にテンプレートを持つディレクティブと見なすことができます。
<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

*ngFor は、Angular に sites リストの各項目に対して <li> タグを生成するように指示します。

*ngIf は、選択された項目が存在する場合にのみ SiteDetail コンポーネントが含まれることを示します。

サービス(Services)

Angular 2 のサービスは、特定の機能をカプセル化し、注入によって他の人が使用できる独立したモジュールです。

サービスには多くの種類があり、値、関数、アプリケーションに必要な機能などが含まれます。

たとえば、複数のコンポーネントに重複コードがある場合、重複コードをサービスに抽出してコードの再利用を実現します。

以下はいくつかの一般的なサービスです：

  • ログサービス
  • データサービス
  • メッセージバス
  • 税額計算機
  • アプリケーション設定

以下の例は、ブラウザのコンソールにログを記録するログサービスです：

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

依存性注入

制御の反転（Inversion of Control、略して IoC）は、オブジェクト指向プログラミングにおける設計原則の 1 つで、コンピュータコード間の結合度を下げるために使用できます。その中で最も一般的な方法は依存性注入（Dependency Injection、略して DI）と呼ばれ、もう 1 つの方法は「依存性ルックアップ」（Dependency Lookup）と呼ばれます。

制御の反転により、オブジェクトが作成されるときに、システム内のすべてのオブジェクトを調整する外部エンティティが、そのオブジェクトが依存するオブジェクトの参照をオブジェクトに渡します。つまり、依存性がオブジェクトに注入されるとも言えます。

従来の開発モードでは、呼び出し側がすべてのオブジェクトの依存関係を管理する責任を負い、循環依存は常に悪夢でした。しかし依存性注入モードでは、この管理権は注入器（Injector）に委ねられ、ソフトウェアの実行時に依存オブジェクトの置き換えを担当します（コンパイル時ではなく）。この制御の反転（IoC）、実行時注入という特徴こそが依存性注入の真髄です。

Angular はコンストラクタのパラメータ型を確認することで、コンポーネントがどのサービスを必要としているかを知ることができます。例えば、SiteListComponent コンポーネントのコンストラクタは SiteService を必要とします:

constructor(private service: SiteService) { }

Angular がコンポーネントを作成するとき、まずコンポーネントが必要とするサービスのための注入器（Injector）を探します。

注入器はサービスインスタンスを管理するコンテナであり、以前に作成されたインスタンスを格納しています。

コンテナ内に要求されたサービスインスタンスがまだない場合、注入器はサービスインスタンスを作成し、コンテナに追加して、そのサービスを Angular に返します。

すべてのサービスが解決されて返されると、Angular はそれらのサービスを引数としてコンポーネントのコンストラクタを呼び出します。これが依存性注入です。

他の拡張機能