angular2入門【コンポーネント編①】
ゼットンです。
前回はangular2入門【環境構築編】をお送りしました。
今回は【コンポーネント編】です。
前回、Hello worldならぬapp works!という1文が表示できましたが、
正直「へー」って感じだったと思います。
とりあえず下記のようなディレクトリ構成で出力されたかと思います。
今回はこの自動生成されたソースをいじりながら
angular2のコンポーネントのイメージをつけていきましょう。
うん、うん。
わかりますよ、妖精さん。
まずは最初に表示されるindex.htmlを見てみましょう。
まあ落ち着いて、セラ。
こういうもんなんです。
さっきから言ってるコンポーネントはこれです。
そう、タグなんです。
コンポーネントとは、独自定義のタグのことです。
独自タグを作り、それらを組み合わせてアプリを作っていくのが
angular2の開発スタイル。
コンポーネント志向ってやつです。
ではではこの<app-root>の中身は
どこで定義しているんでしょう。
ここです。
TypeScriptのクラスの中に@Componentって形で
angular2の定義が挟まってます。
中にはタグの名前/HTML参照先/CSS参照先が
記述されています。
下の方では変数titleに文字列を格納してます。
app.component.tsは何も記述されていないのでスルー
app.component.htmlを開けてみます。
{{ title }}の部分は、 app.component.tsにて宣言した 変数titleを表示しています。
1コンポーネントの中身が別ファイルに分割されると、 どうも見通しが悪いので下記のように書き換えてます。
見慣れないうちは不自然極まりないですが、
公式サイトのチュートリアルもこの形でやっているし、
コード量が多くならない限りはこれでいいと思うってます。
とりあえず、今日はここまで(深夜アニメが始めってしまう)。
次回はここに新たなコンポーネントを追加してみます。
ちなみに私は、
これゾンのキャラの中ではとものりが断トツで好き。