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

執筆者:

関連記事

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

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

Angular-cliにjQueryを導入する

Angular-cliの開発環境でのjQueryの導入方法を説明します。   目次1.Angular-cliの導入2.Angular2のプロジェクト作成3.jQueryのインストール4.jQ ...

Angular-cliにng2-bootstrapを導入する

Angular2の開発でbootstrapを使用するにはng2-bootsrapを導入します。ng2-bootsrapはbootstrapの機能をディレクティブやコンポーネントとして提供してくれます。 ...

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

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

Angular2のプロジェクト作成から開発をしてIISにデプロイまで

当セクションではAngular2のプロジェクト作成し、プロジェクト開発を行い、IISへのデプロイまでを説明したいと思います。 angular-cliでAngular2の開発環境を構築している事が前提と ...