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

執筆者:

関連記事

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

クロスドメインの概要 クロスドメインアクセスを理解してWeb APIを楽しく使おう クロスドメイン制約とは javascriptでクロスドメイン対応する場合の覚書   クロスドメインでデータ ...

当サイトの環境環境

当サイトの投稿記事の開発環境は以下のように構成されています。 ・OS:Windows7(x64) ・WEBサーバ:IIS(Internet Information Service) ・Node.js ...

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

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

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

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

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

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