Angular2 基本練習

Angular2のコンポーネントについての説明

投稿日:2017年3月25日 更新日:

当セクションではAngular2のコンポーネントについて説明します。Angular2はコンポーネント指向なので、いつくかのコンポーネントを作成し、そららのコンポーネントを組み合わせてアプリケーションを構築する事になります。複数のコンポーネントを組み合わせて1つのコンポーネントを構成することも可能です。

当サイトの最終目標である担当者マスタメンテナンスのアプリケーションも担当者マスタ一覧を表示するコンポーネントと担当者マスタの項目入力を行うコンポーネントで構成されています。担当者マスタ一覧を表示するコンポーネントは、さらに一覧表示するテーブルコンポーネント、ページ制御を行うコンポーネント、アプリケーション層と通信するHPPコンポーネント等のいつかのコンポーネントで構成されています。

それでは、説明の前に「ng new」コマンドを実行してプロジェクトファイルを作成します。当セクションでは、作業ディレクトリの「C:\ng2test」にsample4のプロジェクトを作成します。その後、「ng serve」コマンドで実行テストを行って下さい。コマンドの説明は『Angular-cliのngコマンドの説明』で確認して下さい。

 

 

1.コンポーネントの作成

まずは新規のコンポーネントを作成して、その構成について確認します。「ng generate component」コマンドで新規コンポーネントを作成します。angular-cliのngコマンドについては『Angular-cliのngコマンドの説明』を参照して下さい。

上記コマンドでTestComponentという名前のコンポーネントが作成されました。コンポーネント名はtest.compont.tsファイルのクラス名で定義されます。/src/app/testのフォルダが作成され、そのフォルダ中に4つのファイルが新規作成されます。また、/src/app/app.module.tsにTestComponentのimport文が自動で追加され、@NgModuleのデコレータのdeclarationsも同時に追加定義されます。

(変更されたファイル)

(1)src/app/app.module.ts

 

 

(新規追加されたファイル)

コンポーネントは、ts(TypeScript)ファイル、HTMLファイル、CSSファイルで1つのコンポーネントを構成します。

(1)src/app/test/test.componet.ts

TestComponentのロジック部を記述するTypeScriptファイルです。TestComponentクラス定義が行われ、@Componentデコレータでセレクタ定義、HTMLとCSSの定義付けを行っています。

(2)src/app/test/test.componet.html

TestComponentのビュー部を示すHTMLファイルです。test.componet.ts内の@Componentデコレータで関連付けを定義しています。

(3)src/app/test/test.componet.css

TestComponentのビュー部を修飾するCSSファイルです。test.componet.ts内の@Componentデコレータで関連付けを定義しています。

(4)src/app/test/test.componet.spec.ts

テスト用スクリプトファイルです。

 

2.コンポーネントの呼び出し

作成したTestComponentをAppComponentから呼び出してみます。app.component.htmlにtestComponentの「app-test」セレクタを記述します。TestComponentのビュー部(HTML)に記述された『test works』が表示されます。

(変更後画面)

 

3.コンポーネントの修正

testCompnetのビュー部のHTMLファイル「test.component.html」とCSSファイル「test.component.css」をそれぞれ変更してみます。「test angular2」の文字が追加され背景色が変わる事が確認できます。

(変更後画面)

 

スポンサーリンク

スポンサーリンク

-Angular2, 基本練習

執筆者:

関連記事

Angular2のデータバインディングについて

当セクションではAngular2のデータバインディングについて確認してみたいと思います。データバインディングとは、コンポーネント(ロジック部)とテンプレート(WEBコンテンツ/HTML部)との間でデー ...

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用しま ...

angular-cliでプロジェクト作成した主要なファイルを説明

当セクションではangular-cliの「ng new」コマンドで自動作成されたプロジェクトのスケルトンの主要ファイルについて説明したいと思います。angular-cliでAngular2の開発環境を ...

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみた

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみました。簡単にAngular2の開発環境を構築して、開発体験を行う事ができました。     1.事前準備 ...

Angular-cliのngコマンドの説明

angular-cliのngコマンドについて説明したいと思います。 コマンド 説明 ng new アプリ(プロジェクト)の雛型を作成します。 ng serve プロジェクトをビルドして、開発用のWEB ...