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

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

» 2016年12月19日 05時00分 公開
[山田祥寛]
「Angular TIPS」のインデックス

連載目次

現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が@ITの通常の記事とは異なる場合があります。


【対応バージョン】

 Angular 2/4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。


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

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

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

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

@Component({
  selector: 'app-root',
  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であれば、以下のように表現していたところです。

template: "<h1>{{title}}</h1>\n    <p class=\"main\">{{contents}}</p>"

リスト2 テンプレート文字列を利用しない場合

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

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

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

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  title = 'Angular 2 TIPS';
  contents = '皆で頑張って、Angular 2を覚えましょう!';
}

リスト3 templateUrlテンプレートでテンプレートを定義した例(app/app.component.ts)

<h1>{{title}}</h1>
<p class="main">{{contents}}</p>

リスト4 外部ファイル化されたテンプレート(app/app.component.html)

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

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

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


「Angular TIPS」のインデックス

Angular TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。