コンポーネント
コンポーネントはビュー (View) を制御します。ビューは画面の一部分です。
コンポーネントは @Component 修飾子のついたメタデータをもつ TypeScript クラスです。
メタデータにてビューの HTML テンプレートを定義し、同クラス内のメンバーによってテンプレート内のデータを制御します。
もっと一般的に言うとコンポーネントはディレクティブの一形態ですが、コンポーネントは Angular にて非常に重要なので区別されます。
具体的にみてみましょう。「クイック・スタート」で作成したプロジェクト helloworld があれば開いてください。
ルートモジュール (AppModule) は src/app/app.module.ts で定義されていましたね。 ここで、起動時に読み込まれるコンポーネント、すなわちブートストラップコンポーネントとして指定されていたコンポーネントは、AppComponent というコンポーネントでした。
AppComponent は src/app/app.component.ts にて定義されています。app.component.ts は次の内容です。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'app works!';
}selector は、このコンポーネントを表すタグになります。 ここでは app-root となっているので、HTML に app-root タグが書いてある箇所にこのコンポーネントを表示することになります。
ちなみに、src/index.html で app-root が使われています。ここに AppComponent が読み込まれるわけです。
<!doctype html>
<html>
...
<body>
<app-root>Loading...</app-root>
</body>
</html>
templateUrl はこのコンポーネントのテンプレートです。
templateUrl の代わりに template 属性として、ここに直接テンプレートを記述することもできます。
styleUrls ではこのコンポーネントが使う CSS を指定します。