Angular2 DOC GUIDEを翻訳する[ARCHITECTURE OVERVIEW]

# トピック

[Angular2 CORE DOCUMENTATIONのGUIDE](https://angular.io/docs/ts/latest/guide/)の翻訳です。

- [DOCUMENTATION OVERVIEW - ドキュメント概要 -](http://qiita.com/Yamamoto0525/items/85667d0570d8dab8f95a)
- [ARCHITECTURE OVERVIEW - 構文概要 -](http://qiita.com/Yamamoto0525/items/cc727298fc892c23d99b)
- [DISPLAYING DATA - データ表示 -](http://qiita.com/Yamamoto0525/items/e3dd777dd00b7d2a47c7)
- [USER INPUT - ユーザー入力 -](http://qiita.com/Yamamoto0525/items/2040e8ef4acd296299a2)
- [FORMS - フォーム -](http://qiita.com/Yamamoto0525/items/1765c62e99dfab318660)
- [DEPENDENCY INJECTION - 依存性注入 -](http://qiita.com/Yamamoto0525/items/23a1756e9b32bfb6f328)
- [STYLE GUIDE -　スタイルガイド -](http://qiita.com/Yamamoto0525/items/e59551faf69775a7ad12)

注意1）ここに掲載されていない項目は、[Angular2 CORE DOCUMENTATIONのGUIDE](https://angular.io/docs/ts/latest/guide/)を直接参照してください。

注意2）2016年10月4日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっているような箇所がありましたらご指摘ください。

# ARCHITECTURE OVERVIEW - 構文概要 -

> Angularアプリケーションの基礎となる構成要素

AngularはHTMLとJavaScript、もしくはJavaScriptをコンパイルする言語（DartやTypeScript）といった、クライアントサイドのアプリケーションを構築するためのフレームワークです。

Angularはいくつかのコアとなるライブラリと、オプション的なライブラリから構成されています。Angularアプリケーションを作るときは、まずAngular化したマークアップによるHTML *テンプレート*を構成し、それらのテンプレートを管理する*コンポーネント*クラスを書きます。それから*サービス*にアプリケーションロジックを追加して、*モジュール*にコンポーネントとサービスを追加します。

そして*ルートモジュール*を*起動させ*、アプリが動き出せば、ブラウザで保持していた状態をあなたが発したユーザーインタラクションに引き継ぐようになります。

もちろん、Angularには抑えるべきことがまだまだあります。それをこれから、このページで詳しく学んでいきましょう。まずは全体像をお見せします。

![overview](https://angular.io/resources/images/devguide/architecture/overview2.png)

この構造図は、Angularアプリケーションのもつ８つの主要な構成要素からなっています。

- [Modules - モジュール -](#modules---%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB--)
- [Components - コンポーネント -](#components---%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88--)
- [Templates - テンプレート-](#templates---%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88-)
- [Metadata - メタデータ-](#metadata---%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF-)
- [Data binding - データバインディング-](#data-binding---%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-)
- [Directives - ディレクティブ-](#directives---%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96-)
- [Services - サービス-](#services---%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9-)
- [Dependency injection - 依存性注入-](#dependency-injection---%E4%BE%9D%E5%AD%98%E6%80%A7%E6%B3%A8%E5%85%A5-)

これらの構成要素を、あなたなりのやり方で学んでみてください。

> このページで参照されているコードは、[live example](https://angular.io/resources/live-examples/architecture/ts/plnkr.html)で利用できます。

## Modules - モジュール -

![Component](https://angular.io/resources/images/devguide/architecture/module.png)

Angularアプリはモジュール（組み立てられるもの）であり、Angularそれ自体も*Angular modules*もしくは*NgModules*と呼ばれるモジュラリティシステムです。

*Angularモジュール*はかなり大きなトピックなので、このページではモジュールの紹介に留めておきます。
[Angularモジュール](https://angular.io/docs/ts/latest/guide/ngmodule.html)のページで、もっと深く掘り下げます。

すべてのAngularアプリは、最低でも一つ、慣習的に`AppModule`と名付けられた*ルートモジュール*を持ちます。

小さなアプリケーションであれば、ルートモジュールがアプリ内で唯一のモジュールとなりますが、多くのアプリでは、それ以外にも多くの*機能モジュール*を持っています。機能モジュールは、それぞれがアプリケーション領域やワークフロー、または性能が密接に関連した機能に注力したコードの集合体となっています。

Angularモジュールは、*ルートモジュール*であれ*機能モジュール*であれ、`@NgModule`デコレータをもったクラスとなります。

> デコレータは、JavaScript のクラスを修飾する機能です。Angularには複数のデコレータが用意されていますが、それらはクラスが何を意味するのか、どんな働きをするのかがわかるように、メタデータをクラスに付随させます。[このサイト](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0)でデコレータについて学習してください。

`NgModule`はデコレータであり、モジュールであることを説明するプロパティをもった、たった一つのメタデータオブジェクトです。最も重要なプロパティを次にあげます。

- `declarations` - このモジュールに属する*ビュークラス*です。Angularは[components](#components---%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88--)、[directives](#directives---%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96-)、[pipes](https://angular.io/docs/ts/latest/guide/pipes.html)という3種類のビュークラスを持ちます。
- `exports` - ほかのモジュールにあるコンポーネント[テンプレート]()の中で、閲覧および使用を可能にするdeclarationsのサブセットです。
- `imports` - exportされたクラスを持ち、*この*モジュール内で宣言されたコンポーネントテンプレートに必要とされるほかのモジュールです。
- `providers` - オリジナルで作成した[サービス](#services---%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9-)を、このモジュールのグローバルコレクションサービスに追加します。これにより、そのサービスはアプリ内のどこからでもアクセスできるようになります。
- `bootstrap` - *ルートコンポーネント*と呼ばれるメインアプリケーションビューが、他のすべてのアプリケーションビューの基礎となります。bootstrapプロパティは、*ルートモジュール*でのみ設定するようにしてください。

以下は簡単なルートモジュールの例です。

```ts: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 { }
```

> `AppComponent`の`export`は、ただexportのやり方を見せるためだけの例なので、実際のところ、この例で使う必要はありません。
他のコンポーネントではルートモジュールを*import*する必要がないので、ルートモジュールは何も*export*することがないのです。

ルートモジュールを*起動*し、アプリケーションを動かしてみてください。開発中に`AppModule`を起動させるなら、`main.ts`ファイルを次のようにするといいかもしれません。

```ts:app/main.ts
COPY CODE
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
```

### Angular modules vs. JavaScript modules

Angular moduleは、`@NgModule`というデコレータをもつクラスであり、Angularの土台となる機能を担っています。

また、JavaScriptはそれ自体が、JavaScriptオブジェクトの集合体を管理するモジュールの仕組みをもっています
これはAngularのモジュールシステムとはまったく異なるものであり、関連性もありません。

JavaScriptは、それぞれの*ファイル*が1つのモジュールとなっており、全てのオブジェクトはそのモジュールをもつファイルの中で定義されています。
JavaScriptモジュールは`export`キーワードを使って、オブジェクトがpublicであることを宣言し、*importステートメント*を使って他のモジュールでpublicとなっているオブジェクトにアクセスします。

```ts
import { NgModule }     from '@angular/core';
import { AppComponent } from './app.component';
```
```ts
export class AppModule { }
```

> [このサイトでJavaScriptモジュールの仕組みについて学習してください。](http://exploringjs.com/es6/ch_modules.html)

Angularには、2つの異なる*相互補完的な*モジュールシステムがあります。あなたがアプリを作るときは、それらを使ってください。

### Angular libraries

![Component](https://angular.io/resources/images/devguide/architecture/library-module.png)

AngularはJavaScriptモジュールの集合体を積んでおり、それらをライブラリモジュールとして扱っています。

Angularライブラリの名称は、`@angular`という接頭辞で始まります。 

Angularライブラリはnpmパッケージマネージャーでインストールされ、JavaScriptのimportステートメントによってimportされます。

例として、`@angular/core`からAngularの`Component`デコレータをimportしてみます。

```ts
import { Component } from '@angular/core';
```
また、JavaScriptのimportステートメントを使って、Angular *ライブラリ*からAngular *モジュール*をimportすることもできます。

```ts
import { BrowserModule } from '@angular/platform-browser';
```
上記の簡易的なルートモジュールの例では、アプリケーションモジュールは`BrowserModule`からのデータを必要としています。
そのデータにアクセスするため、次のようにして`@NgModule`のメタデータである`import`に`BrowserModule`を加えます。

```ts
imports:      [ BrowserModule ],
```

このようにして、AngularとJavaScriptのモジュールシステムは、*同時に*使用することが可能です。

しかし、それらは「imports」と「exports」という同じ語彙を共有しているので、2つのシステムに対し混乱を招きやすくしています。
頑張ってください。これを理解するためには、時間と経験が必要です。

> [Angular modules](https://angular.io/docs/ts/latest/guide/ngmodule.html)のページでより深く学習してください。

## Components - コンポーネント -

![Component](https://angular.io/resources/images/devguide/architecture/hero-component.png)

*コンポーネント*は、*ビュー*と呼ばれる画面部分を管理します。

たとえば、次のような画面がコンポーネントによってコントロールされています。

- ナビゲーションリンクを伴うアプリのルート画面
- heroesのリスト
- heroの編集

ビューへのサポート内容を含んだコンポーネントのアプリケーションロジックを、クラスに定義する必要があります。そのクラスはAPIのプロパティとメソッドに対し、影響を与えるようになります。

たとえば、この`HeroListComponent`はサービスから要求されたときにheroesの配列を返す`heroes`プロパティを持っています。また、`HeroListComponent`は、ユーザーがheroListから１つheroを選んでクリックしたときに、`selectedHero`プロパティを設定する`selectHero()`メソッドも持っています。

```ts:app/hero-list.component.ts(class)
export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}
```

Angularはアプリケーション上のユーザーの動きに合わせて、コンポーネントを作成し、更新し、破棄します。上記で宣言されている`ngOnInit()`のように、任意の[ライフサイクルフック](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html)を使って、ライフサイクルのその時々にアクションを起こすことができます。


## Templates - テンプレート-

![Template](https://angular.io/resources/images/devguide/architecture/template.png)


コンポーネントのビューを定義するときは、それに対応する**テンプレート**の定義も必要です。
テンプレートは、コンポーネントのレンダリング方法をHTML形式でAngularに伝えます。

テンプレートは多少の違いを除けば、普通のHTMLと同じように見えます。
`HeroListComponent`では、次のようなテンプレートになっています。

```html:app/hero-list.component.html
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
```

このテンプレートでは、典型的なHTML要素である`<h2> `や `<p>`を使っていますが、いくつかの違いも含んでいます。`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`、`<hero-detail>`のようなコードは、＠Angularの[テンプレート文法](https://angular.io/docs/ts/latest/guide/template-syntax.html)を使っています。

このテンプレートの最後の行では、新しいコンポーネントである`HeroDetailComponent`を表示するために、`<hero-detail>`タグというカスタム要素を使っています。

`HeroDetailComponent`は、先にとりあげた`HeroListComponent`とは*異なる*コンポーネントです。`HeroDetailComponent`（コード出しません）は、`HeroListComponent`に表示されていたリストで、ユーザーが選択した特定のheroの情報を表示します。`HeroDetailComponent`は、`HeroListComponent`の**子**になります。

![Metadata](https://angular.io/resources/images/devguide/architecture/component-tree.png)


`<hero-detail>`が、ネイティブなHTML要素とすごく馴染んでいることに注目してください。カスタムコンポーネントは、同じレイアウト上でネイティブなHTMLとシームレスに混在しています。

## Metadata - メタデータ-

![Metadata](https://angular.io/resources/images/devguide/architecture/metadata.png)

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

`HeroListComponent`のコードを振り返ってみてると、`HeroListComponent`がただのクラスであることがわかると思います。それがフレームワークであるという証拠も、「Angular」であるということも、その中にはまったく記述されていません。

事実として、`HeroListComponent`は本当に*ただのクラス*です。*Angularにコンポーネントであると伝える*までは、コンポーネントではありません。

`HeroListComponent`がコンポーネントであるとAngularに伝えるためには、クラスに**メタデータ**をつける必要があります。

TypeScriptでは、**デコレータ**を使ってメタデータをつけることになります。`HeroListComponent`のメタデータは、次のようになります。

```ts:app/hero-list.component.ts(metadata)
@Component({
  moduleId: module.id,
  selector:    'hero-list',
  templateUrl: 'hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
```

ここでは`@Component`デコレータが、その下にあるクラスをすぐにコンポーネントクラスであると特定しています。

`@Component`デコレータは、Angularがコンポーネントおよびビューを作成し、表示させるために必要な情報として、必須となる構成オブジェクトです。

`@Component`で使用可能な、数少ない構成オプションは次の通りです。

- `moduleId`: `templateUrl`のようなモジュールに関連するURLのために、ベースとなるアドレス(`module.id`)のソースを設定します。
- `selector`: コンポーネントのインスタンスを作成し、挿入することをAngularに伝えるCSSセレクタです。*親*となるHTMLの中で`<hero-list>`タグを見つけるためには、ここで明示しておく必要があります。たとえば、もしアプリ内にあるHTMLが`<hero-list></hero-list>`を含んでいた場合、Angularはこのタグの間に`HeroListComponent`のビューインスタンスを挿入します。
- `templateUrl`: [上記のような](#templates---%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88-)、コンポーネントのHTMLテンプレートを紐づける、モジュールに関連するアドレスです。
- `providers`: コンポーネントが必要とするサービスを使うために、**Dependency Injectionプロバイダ**を列挙します。これはコンポーネントのコンストラクタが`HeroService`を要求することをAngularに伝える方法の１つであり、それによってheroesを表示するためのリストを取得できます。

![Metadata](https://angular.io/resources/images/devguide/architecture/template-metadata-component.png)

`@Component`にあるメタデータは、コンポーネントで明示されている重要な構成要素が、どこで取得できるかをAngularに伝えます。

テンプレート、メタデータ、コンポーネントは連動してビューを描画します。

Angularの振る舞いを決めるために、同じような形をとっている場合、他のメタデータのデコレータを使ってください。
`@Injectable`、`@Input`、`@Output`は、あまり多くはない、よく使われているデコレータです。

構築について総括すると、Angularに役割を伝えるためには、あなたの書いたコードにメタデータを加えなければならない、ということです。

## Data binding - データバインディング-

フレームワークがなかった場合、HTMLにデータの値を流し込み、ユーザー操作をアクションと値の更新に変換するといったコントロールを、あなたが担保する必要があります。
pushやpullのようなロジックを自分で書くのはひどく退屈で間違いやすく、どんな熟練したjQueryプログラマーであったとしても、それを読むことは悪夢だと証言するでしょう。

![Data Binding](https://angular.io/resources/images/devguide/architecture/databinding.png)


Angularは**データバインディング**という、コンポーネント部分とテンプレート部分を同調させるメカニズムをサポートしています。互いの接続方法をAngularに伝えるため、テンプレートHTMLにバインディングマークアップを加えてください。

図が示すように、データバインディングの文法には4つの記法があります。それぞれの記法が、「DOMへ」、「DOMから」、「両方向へ」という方向性を持っています。

`HeroListComponent`[テンプレートの例](#templates---%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88-)では、3つの記法を使っています。

```html:app/hero-list.component.html(binding)
<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
```

- `{{hero.name}}`は、`<li>`タグの中で、コンポーネントにある`hero.name`プロパティの値と[*置き換えて*](https://angular.io/docs/ts/latest/guide/displaying-data.html#!#interpolation)表示されます。
- `[hero]` [*プロパティバインディング*](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding)は、親である`HeroListComponent`から、子である`HeroDetailComponent`の`hero`プロパティに`selectedHero`の値を渡します。
- `(click)`[*イベントバインディング*](https://angular.io/docs/ts/latest/guide/user-input.html#!#click)は、ユーザーがheroの名前をクリックしたときに、コンポーネントにある`selectHero`メソッドを呼び出します。

**双方向バインディング**は、`ngModel`ディレクティブを使うときに、単一記法でプロパティとイベントのバインディングを結びつける重要な4つ目の記法です。
`HeroDetailComponent`テンプレートには、次のような例があります。

```html:app/hero-detail.component.html(ngModel)
<input [(ngModel)]="hero.name">
```
双方向バインディングでは、プロパティバインディングによって、コンポーネントからインプットボックスにデータプロパティの値を渡しています。また、ユーザーが値を変更すると、イベントバインディングによってその情報がコンポーネントへと伝わり、プロパティを最新の値へと再設定します。

Angularはアプリケーションコンポーネントツリーにあるルートから、すべての子コンポーネントを通して、１回のJavaScriptイベントサイクルにつき、*すべての*データバインディングを処理しています。

![Data Binding](https://angular.io/resources/images/devguide/architecture/component-databinding.png)

データバインディングは、テンプレートとコンポーネントが相互に対話するにあたって、重要な役割を担っています。

![Parent/Child binding](https://angular.io/resources/images/devguide/architecture/parent-child-binding.png)

データバインディングは親と子のコンポーネントが対話するときにも重要です。

## Directives - ディレクティブ-

![Parent child](https://angular.io/resources/images/devguide/architecture/directive.png)

Angularテンプレートは*動的なもの*です。Angularがテンプレートをレンダリングするとき、**ディレクティブ**によって与えられた指示によってDOMを変更します。

ディレクティブはディレクティブのメタデータをもったクラスです。TypeScriptでは、クラスにメタデータを付随させる`@Directive`デコレータを使ってください。

コンポーネントは、*テンプレートを持ったディレクティブ*です。`@Component`デコレータは、事実、テンプレートに関する機能を使って`@Directive`デコレータを拡張したものです。

> **コンポーネントは技術的にはディレクティブ**ですが、Angularアプリケーションの特徴的かつ中心的な機能であるため、このarchitectural overviewでは、ディレクティブとコンポーネントを区別して扱っています。

それ以外にも、2種類の*異なる*ディレクティブが存在します。*構造ディレクティブ*と、*属性ディレクティブ*です。

それらのディレクティブは、タグ要素の属性や、たまにタグ名称としても使われますが、代入やバインディングの対象となる場合がほとんどです。

**構造**ディレクティブは、DOMの要素を追加、削除、交換することで、レイアウトを変更します。

次の[テンプレートの例](#templates---%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88-)では、２つのビルトイン構造ディレクティブを使っています。

```html:app/hero-list.component.html(structural)
<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>
```

- `*ngFor`はheroesリストをまわして、heroごとに１つの`<li>`を出力するようAngularに伝えています。
- `*ngIf`は、選択されたheroが存在している場合のみ、`HeroDetail`コンポーネントを表示させます。

**属性**ディレクティブは、表示されている要素の振る舞い、もしくは表現を変更します。テンプレートでは、通常のHTML属性に似ているので、このように呼ばれています。

双方向バインディングを使用する手段として用いられる`ngModel`ディレクティブは、属性ディレクティブの1例です。`ngModel`は、表示している値のプロパティを設定したり、イベントを変更するよう指示したりすることで、表示されている要素の振る舞い（典型的な例としては`<input>`）を変更します。

```html:app/hero-detail.component.html(ngModel)
<input [(ngModel)]="hero.name">
```

それほど多くはないですが、Angularにはレイアウト構造を変更するディレクティブ（例：[ngSwitch](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngSwitch)）や、DOM要素やコンポーネントの様相を修正するディレクティブ（例：[ngStyle](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngStyle)や[ngClass](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass)）もあります。

もちろん、自分用のディレクティブを書くこともできます。`HeroListComponent`のようなコンポーネントは、カスタムディレクティブの1例です。

## Services - サービス-

![Service](https://angular.io/resources/images/devguide/architecture/service.png)

サービスは幅広く対応しているカテゴリーで、アプリケーションに求められる値、関数、機能のすべてを包括しています。

どんなものでも、サービスとなることができます。サービスは規模が小さく、よく使われる目的をもったクラスであることが多いですが、その目的はわかりやすく、よく練られたものであった方がよいでしょう。

サービスの例

- ログサービス
- データサービス
- バグ報告
- 税計算
- アプリケーション環境設定

*Angular*のサービスに、特別なことは何もありません。
サービスは何も定義されておらず、サービスの元となるクラスも、設置すべき場所も決まっていません。

しかし、サービスは全てのAngularアプリケーションの基礎となっています。それでいうと、コンポーネントはサービスのお得意様、ということになります。

ここで、ブラウザコンソールにログを表示させるサービスクラスの例を示します。

```ts:app/logger.service.ts(class)
export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}
```
次に、起動した[プロミス](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)で、herosにアクセスして返す`HeroService`をお見せします。`HeroService`はLogger serviceともうひとつ、サーバーとの対話というあまりやりたくない仕事をする`BackendService`に依存しています。

```ts:app/hero.service.ts(class)
export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}
```

サービスはどこにあっても構いません。

コンポーネントクラスの記述は少なくあるべきです。コンポーネントクラスで、サーバーのデータにアクセスしたり、ユーザー入力のバリデーションを行ったり、コンソールに直接ログを吐かせたりはせず、そういった作業はサービスにやらせてください。

コンポーネントがすべき仕事は、UXを可能たらしめること以外の何者でもなく、ビュー(テンプレートによってレンダリングされるもの)とアプリケーションロジック(*モデル*の概念としてよく使われるもの)の調整につとめるべきです。
コンポーネントは、データバインディングに使うプロパティとメソッドを持つものがよく、それによって重要なものをすべてサービスに任せることができます。

Angularはこういった原則を*強制*しません。あなたが3000行の「キッチンシンク」([なんでも入った多機能なものの暗喩](http://www.thefreedictionary.com/kitchen+sink))のようなコンポーネントを書いたとしても、とがめることはありません。

Angularは、アプリケーションロジックをサービスに取り入れやすくすることで、上記のような原則に*準拠しやすく*したり、*Dependency injection*を使って、サービスをコンポーネントで利用できるようにしたりする支援を行います。

## Dependency injection - 依存性注入-

![Service](https://angular.io/resources/images/devguide/architecture/dependency-injection.png)

*Dependency injection*は、クラスが必要とする依存性を完全な形で保ちつつ、クラスから新しいインスタンスをつくる手法です。クラスが依存するものの多くはサービスです。Angularは必要なサービスを持ったまま、新しいコンポーネントを作るためにDependency injectionを利用しています。

Angularでは、コンストラクタにあるパラメーターの型を見ることで、どのサービスが必要とされているか判別することができます。
以下の例では、`HeroListComponent`のコンストラクタは`HeroService`を要求しています。

```ts:app/hero-list.component.ts(constructor)
constructor(private service: HeroService) { }
```
Angularでコンポーネントが作られるとき、コンポーネントが要求するサービスの**インジェクタ**が最初に求められます。

インジェクタは、事前に作られたサービスインスタンスのコンテナを保持します。もし要求されたサービスインスタンスがコンテナになかった場合、インジェクタは新しくサービスを作って、Angularに返す前にコンテナに加えます。
要求されたサービスが全て実行され、返されたとき、それらのサービスを引数として受け取ったコンポーネントのコンストラクタを呼び出すことができます。これが*Dependency injection*です。

`HeroService` を注入する過程は、次のようになります。

![Service](https://angular.io/resources/images/devguide/architecture/injector-injects.png)

もしインジェクタが`HeroService`を持っていなかった場合、新しい`HeroService`の作り方はどのようにしてわかるのでしょうか。

簡単に言ってしまえば、そのインジェクタを持った`HeroService`の**プロバイダ**をあらかじめ登録しておく必要があります。プロバイダはサービス(大抵の場合は、そのサービス自身)を作るか、返す機能を持っています。

プロバイダはモジュール、もしくはコンポーネントに登録することができます。

同じサービスのインスタンスをどこからでも利用できるよう、プロバイダは基本的に[ルートモジュール]()に加えるようにしてください。

```ts:app/app.module.ts(module_providers)
providers: [
  BackendService,
  HeroService,
  Logger
],
```

その代り、コンポーネントレベルでは`@Component`メタデータにある`providers`プロパティの中に加えるようにしてください。

```ts:app/hero-list.component.ts(component_providers)
@Component({
  moduleId: module.id,
  selector:    'hero-list',
  templateUrl: 'hero-list.component.html',
  providers:  [ HeroService ]
})
```

コンポーネントレベルにプロバイダを登録することで、新しく作られたコンポーネントのインスタンスごとに、新しいサービスのインスタンスを取得することができるようになります。

忘れないように、Dependency injectionのポイントを挙げておきます。

- Dependency injectionはAngularフレームワークの中に張り巡らされていて、どこからでも利用てきる。
- *インジェクタ*が核となるメカニズムとなる。
    - インジェクタは作成したサービスインスタンスの*コンテナ*を保持する。
    - インジェクタは、プロバイダから新しいサービスのインスタンスを作成できる。
- プロバイダはサービスを作るときのレシピになる。
- インジェクタを持った*プロバイダ*を登録する。

## Wrap up　- 要約 -

Angularアプリケーションのもつ8つの主要な構成要素について、基礎的な部分を学習しました。

- [Modules - モジュール -](#modules---%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB--)
- [Components - コンポーネント -](#components---%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88--)
- [Templates - テンプレート-](#templates---%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88-)
- [Metadata - メタデータ-](#metadata---%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF-)
- [Data binding - データバインディング-](#data-binding---%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-)
- [Directives - ディレクティブ-](#directives---%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96-)
- [Services - サービス-](#services---%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9-)
- [Dependency injection - 依存性注入-](#dependency-injection---%E4%BE%9D%E5%AD%98%E6%80%A7%E6%B3%A8%E5%85%A5-)

これらはAngularアプリケーションにおけるすべての基礎であり、とっかかりとしては十分すぎる内容です。ただし、これであなたが学習すべきことをすべて終えたわけではありません。

ここで簡単に、Angularの主要な機能、サービスのアルファベット順リストを掲載します。
大事なもののほとんどは、次のドキュメントで網羅されています（もしくは近日中に網羅します）。

- [**Animations**](https://angular.io/docs/ts/latest/guide/animations.html): Angularのアニメーションライブラリを使えば、アニメーション技術やCSSの深い知識がなくてもコンポーネントの振る舞いに動きをつけられます。
- **Change detection**: Change detection（変更検知）のドキュメントでは、Angularがコンポーネントのもつプロパティの値の変化をどのようにして決め、どのタイミングで画面を更新しているかといったトピックを扱います。また、非同期で動いているものを中断し、その変更検知がもつ戦略を実行する**ゾーン**の使用方法についても扱います。
- **Events**: イベントのドキュメントでは、イベントを発行、購読するメカニズムを使って、コンポーネントやサービスでイベントを発火させる仕組みを扱っています。
- [**Forms**](https://angular.io/docs/ts/latest/guide/forms.html): HTMLベースのバリデーションとdirtyチェックで、複雑なデータ入力のシナリオをサポートします。
- [**HTTP**](https://angular.io/docs/ts/latest/guide/server-communication.html): HTTPクライアントを使ってサーバーサイドのアクションを引き起こし、データの取得、保存といったやり取りをサーバーと行います。
- [**Lifecycle hooks**](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html): ライフサイクルフックのインターフェースを実行すると、コンポーネントが生成されてから破壊されるまでの存続期間中に、キー入力のタイミングが利用できます。
- [**Pipes**](https://angular.io/docs/ts/latest/guide/pipes.html): 画面上にある値の変化によってUXを変更させるには、テンプレートでパイプを使うとよいです。次の例で、`currency`パイプの書き方を見てみましょう。
    - `price | currency:'USD':true`
    - これによって、"42.33"という値は `$42.33`と表示されます。
- [**Router**](https://angular.io/docs/ts/latest/guide/router.html): ブラウザを離れることなく、クライアントアプリケーション上でページからページへ遷移できます。
- [**Testing**](https://angular.io/docs/ts/latest/guide/testing.html): *Angularのテストプラットフォーム*を使って、あなたの作ったアプリケーションの部品が、Angularフレームワーク上でうまく機能しているかどうか、ユニットテストテストを行って試すことができます。

>
> **Next Step**
> [Displaying Data- データ表示 -](http://qiita.com/Yamamoto0525/items/e3dd777dd00b7d2a47c7)
>