Angular 入門

ホーム > Angular の基礎 > コンポーネント

コンポーネント

コンポーネントはビュー (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 を指定します。

テンプレート

ホーム > Angular の基礎 > コンポーネント