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されている

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

このエントリーをはてなブックマークに追加

にほんブログ村 IT技術ブログ IT技術メモへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です