• 追加された行はこの色です。
• 削除された行はこの色です。
• はじめてのAngular2/Componentを作る・利用する へ行く。
• はじめてのAngular2/Componentを作る・利用する の差分を削除

* Componentってなに [#tcfe4078]

Componentはビューとロジックをもった要素。

* Componentを作る [#x8d82e4a]

- @Component（デコレータ）をつけて
- @Component（メタデータ）をつけて
 @Component({
   selector: 'alert-button',
   template: `
     <button (click)="onClick()">Click me!</button>
   `
 })

- classをexportする
 export class AlertButtonComponent{
   onClick(): void {
     window.alert('Hello!!');
   }
 }

デコレータに名前（セレクタ）やテンプレート、スタイルを書きます。Javaでいうところのアノテーションみたいな感じですかね。書き方も似ていますし。classはそのまま、Java同様のクラスですね。そのコンポーネントの属性と振る舞いを書きます。
メタデータに名前（セレクタ）やテンプレート、スタイルを書きます。Javaでいうところのアノテーションみたいな感じですかね。書き方も似ていますし。classはそのまま、Java同様のクラスですね。そのコンポーネントの属性と振る舞いを書きます。

Componentを用意して組み合わせていくのが最近の向きらしいですね。プログラミングとして新しい概念ではありませんが、jQueryでDOM操作をガリガリするのがもう辛すぎたということでしょう。確かに辛かった。

* Componentを利用する [#e2292675]

- exportしたクラスをimportして
 import {AlertButtonComponent} from './alert-button.component';

- デコレータのdirectivesに追加して
- デコレータのtemplateで使う
- メタデータのdirectivesに追加して
- メタデータのtemplateで使う
 @Component({
   selector: 'my-app',
   template: `
     <h1>My First Angular 2 App R2</h1>
     <alert-button></alert-button>
   `,
   directives: [AlertButtonComponent]
 })

Componentはselectorで名前がついているので、使う側はその名前にてtemplateで使う。

* ソースコード [#u7db3f15]

- [[til/javascript/angular2/angular2-practical-ABC-r2 at master · fukuchiharuki/til>https://github.com/fukuchiharuki/til/tree/master/javascript/angular2/angular2-practical-ABC-r2]]

* 参考 [#xf87cf66]

- [[Angular2のコンポーネント、bootstrap関数の概要 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで>http://wordpress.honobono-life.info/code/angular2のコンポーネント、bootstrap関数の概要/]]