この素晴らしきフロントエンドに祝福を

アニヲタからフロントエンドエンジニアへ転身した私の備忘録。

angular2入門【コンポーネント編①】

ゼットンです。

前回はangular2入門【環境構築編】をお送りしました。
今回は【コンポーネント編】です。

前回、Hello worldならぬapp works!という1文が表示できましたが、
正直「へー」って感じだったと思います。

とりあえず下記のようなディレクトリ構成で出力されたかと思います。

https://www.evernote.com/l/AS1umj1FOa9AH4D4uVzUSwDrxUOayd3l_Y8B/image.png

今回はこの自動生成されたソースをいじりながら
angular2のコンポーネントのイメージをつけていきましょう。

https://www.evernote.com/l/AS3aPvVEMP1LQIE4-bZbTXSq5x7mcTREFhoB/image.png

うん、うん。
わかりますよ、妖精さん
まずは最初に表示されるindex.htmlを見てみましょう。

https://www.evernote.com/l/AS3UTWxPOMJG4oMGH6bXvJ0kft8Tz2YcJN8B/image.png

https://www.evernote.com/l/AS12CjXNi2lAlJJUDaTK2yZkbdGz-mn0KIUB/image.png

まあ落ち着いて、セラ。
こういうもんなんです。
さっきから言ってるコンポーネントはこれです。

https://www.evernote.com/l/AS1qM5E2PjxCLYhMYTItA1GChLX5cZUDDQoB/image.png

そう、タグなんです。
コンポーネントとは、独自定義のタグのことです。
独自タグを作り、それらを組み合わせてアプリを作っていくのが
angular2の開発スタイル。
コンポーネント志向ってやつです。

ではではこの<app-root>の中身は
どこで定義しているんでしょう。 ここです。

https://www.evernote.com/l/AS2GlSLbSTdA-bfxxtzzyh0bDXOJhsp3rOsB/image.png

TypeScriptのクラスの中に@Componentって形で
angular2の定義が挟まってます。
中にはタグの名前/HTML参照先/CSS参照先が
記述されています。
下の方では変数titleに文字列を格納してます。

https://www.evernote.com/l/AS34s7oqSF5NzoT7zcEexRe-kBgPJbKEhzoB/image.png

app.component.tsは何も記述されていないのでスルー
app.component.htmlを開けてみます。

https://www.evernote.com/l/AS3lJqb3DoFFG7GLQTKOdtczi3xJLbh9nD4B/image.png

{{ title }}の部分は、 app.component.tsにて宣言した 変数titleを表示しています。

1コンポーネントの中身が別ファイルに分割されると、 どうも見通しが悪いので下記のように書き換えてます。

https://www.evernote.com/l/AS1VK0hKYZNDFaWgxfJYwFCf3bL4EpgPeeYB/image.png

見慣れないうちは不自然極まりないですが、
公式サイトのチュートリアルもこの形でやっているし、
コード量が多くならない限りはこれでいいと思うってます。

とりあえず、今日はここまで(深夜アニメが始めってしまう)。
次回はここに新たなコンポーネントを追加してみます。

ちなみに私は、
これゾンのキャラの中ではとものりが断トツで好き。

https://www.evernote.com/l/AS31ddLQg_1EoKrMtTQSVPIrymRrbMUxbKQB/image.png