Angular TIPS

Angular TIPS

コンポーネントに適用すべきテンプレートを指定するには?(template/templateUrlパラメーター)

2016年12月19日 (2017/04/14 更新)

@ComponentデコレーターのtemplateパラメーターやtemplateUrlパラメーターを使って、コンポーネントにテンプレート(ビュー)を適用する方法を説明する。

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

【対応バージョン】 Angular 2/4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。

 コンポーネントにテンプレート(ビュー)を適用するには、@ComponentデコレーターのtemplatetemplateUrlいずれかのパラメーターを利用します。本稿では、それぞれの方法について解説します。

シンプルなテンプレートを定義するならば「template」パラメーター

 数行程度の簡単なテンプレートを定義するならば、templateパラメーターを利用するのが便利です。文字列としてテンプレートを指定できますので、コンポーネントファイル1つにクラス定義もビュー定義もまとめて記述できます。リスト1はそのコード例で、その実行結果が図1です(Angular 2アプリの基本構造や実行の仕方は、別稿「TIPS:Angular 2を利用するには?(実装編)」を参照)。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
    <p class="main">{{contents}}</p>`
})
export class AppComponent {
  title = 'Angular 2 TIPS';
  contents = '皆で頑張って、Angular 2を覚えましょう!';
}
リスト1 templateテンプレートでテンプレートを定義した例(app/app.component.ts)
図1 テンプレートに文字列を反映
図1 テンプレートに文字列を反映

 templateパラメーターの設定値(文字列)が、シングルクォート/ダブルクォートではなく、バッククォート(`~`)でくくられている点に注目です。これは、TypeScript/ECMAScript 2015の構文で「テンプレート文字列」と呼ばれます。テンプレート文字列を利用することで、複数行にまたがる文字列を1つの文字列リテラルとして表現できるようになります。テンプレート定義に際してはよく利用されますので、覚えておきましょう。

 一般的なJavaScriptであれば、以下のように表現していたところです。

JavaScript
template: "<h1>{{title}}</h1>\n    <p class=\"main\">{{contents}}</p>"
リスト2 テンプレート文字列を利用しない場合

テンプレートを外部ファイル化するならば「templateUrlパラメーター」

 templateパラメーターは、@Componentデコレーターにテンプレートをハードコーディングするというその性質上、テンプレートが大きくなった場合に、コードの見通しが劣化しやすいという問題があります。一定以上の規模のテンプレートであれば、外部ファイル化し、templateUrlパラメーターでインポートするのが望ましいでしょう(リスト3、リスト4)。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  title = 'Angular 2 TIPS';
  contents = '皆で頑張って、Angular 2を覚えましょう!';
}
リスト3 templateUrlテンプレートでテンプレートを定義した例(app/app.component.ts)
HTML
<h1>{{title}}</h1>
<p class="main">{{contents}}</p>
リスト4 外部ファイル化されたテンプレート(app/app.component.html)

 結果は、先ほどと同じになるはずです。

 なお、templateUrlパラメーターを指定する場合には、コンポーネントファイルからの相対パスではなく、アプリケーションルートからのパスを指定する点に注意してください。

処理対象:テンプレート カテゴリ:基本
API:@Component カテゴリ:@angular > core > Component decorator(コンポーネントデコレーター)

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

1. Angular 2を利用するには?(準備編)

人気のJavaScriptフレームワーク「Angular 2」の基本機能を目的別リファレンスの形式でまとめる連載スタート。まずはその特徴とインストール方法を説明する。

2. Angular 2を利用するには?(実装編)

初めてのAngular 2開発。誤解のしようもない最も基本的な“Hello World”を作成して、Angular 2アプリの基本構造を理解しよう。

3. 【現在、表示中】≫ コンポーネントに適用すべきテンプレートを指定するには?(template/templateUrlパラメーター)

@ComponentデコレーターのtemplateパラメーターやtemplateUrlパラメーターを使って、コンポーネントにテンプレート(ビュー)を適用する方法を説明する。

4. コンポーネントの値をビューに反映させるには?({{...}})

JavaScriptのオブジェクトをHTMLテンプレートに結び付けるためのデータバインドを記述するためのInterpolation記法の基礎を解説する。

5. ビューの中で「安全に」プロパティ/メソッドにアクセスするには?(「?.」演算子)

プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社