【AngularJS】templateUrlでテンプレートの外部ファイル化

AngularJSにおけるテンプレートの外部ファイル化についてまとめました。

## 【テンプレート】外部ファイル化

@ComponentデコレーターのtemplateUrlパラメーターで、テンプレートを外部ファイル化できます。
テンプレートの規模が大きくなるほど、外部化したほうが管理しやすくなります。

■src/app/app.component.ts

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

// コンポーネントの構成情報を定義するデコレータ
@Component({
  // コンポーネントの適用先を表すセレクター式
  selector: 'app-root',


  // コンポーネントに適用するスタイルシート
  styleUrls: ['./app.component.css'],

  // コンポーネントに適用するテンプレート(外部ファイルから読み込み)
    templateUrl: './app.component.html', // アプリケーションルートからの相対パスで指定
})
export class AppComponent {
  title = 'sample';
  contents = 'エクスカリバー';
}

■app/app.component.html

<h1>{{title}}</h1>
<h2>{{contents}}</h2>