こしあん日記 ~写真と猫とサッカーと~

子供たちの記録用にはじめたが、思春期になり写真を撮らせてもらえなくなる。写真と愛猫とサッカーが中心のブログです。

Angularを色々試してみる

■Angularのインストール

Angular2はCLIコマンドラインインターフェイス)でのインストールが必要

まずはAngularCLIのインストール npm install -g angular-cli

Angularのインストール ng new プロジェクト名

実行 プロジェクトフォルダ内に移動し ng serve で内部サーバを起動 http://localhost:4200 で実行確認

■Angularのコンポーネント指向

インストールしたAngularでコンポーネント指向の基本を確認 srcフォルダ内にindex.htmlとappフォルダがあります。 まずindex.htmlを確認。 見慣れないタグというものがある。

次にappフォルダ内のapp.component.htmlを確認すると h1タグがあり、その中に{{title}}という記述がある。 これはAngularJSでも見覚えのある、適宜した変数を表示するもの(インターポレーション)。 次にapp.component.tsを確認。 .tsはTypeScriptの拡張子。AngularではJSもTSも利用が可能

1行目のimportはモジュールの読み込み指示をしているもの。 @angular/coreというモジュールのComponentをロードしますという指示 次の行の@Componentというアノテーション(情報付加)のオブジェクト

@Componetでは 1.selector 2.templateUrl 3.styleUrls を引数おしてアノテーションします。 selectorがindex.htmlで使用されていた見慣れないタグだるカスタムタグを指定する部分です。 templateUrlは表示用テンプレートファイルを指定する部分 styleUrlsは使用するCSSファイルを指定する部分、Urlsと複数形になっているので、配列で複数指定が可能。

exportで作成したクラスに@Componentアノテーションを付与し外部利用をできるよにするものです。 AppComponentクラスにはtitle変数の情報が入り、@Componentで指定したテンプレートでtitle変数が利用できるという仕組み

AppComponentが呼び出されるまでの流れ scr直下のindex.htmlとmain.tsが読み込み

main.ts→app.module→app.component の順でimportされている

とりあえず超概要の覚書まで。