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, 基本練習

執筆者:

関連記事

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

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

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

Angular2の開発環境を構築(angular-cli)

Angular2の開発環境をangular-cliで構築して、テストプロジェクト作成して実行テストまでを行います。 当サイトはangular-cliでAngular2を開発します。angular-cl ...

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

SystemJSを使ったWEBフロントエンド開発

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...