🌎
[Angular]コンポーネントとは（備忘録）
１．コンポーネントとは
・@Component修飾子のついたメタデータをもつTypeScriptクラスです。
・HTML・CSS・TypeScriptの３つでコンポーネントは構成されています。
・コンポーネントは、画面の一部であるViewを制御します。
２．サンプルプログラム
〇：使用プログラム
app.component.ts
import { Component } from '@angular/core';
@Component({
// このコンポーネントを表すタグ
selector: 'app-root',
// このコンポーネントに対応するHTML（テンプレート）
templateUrl: './app.component.html',
// このコンポーネントが使用するCSS
styleUrls: [ './app.component.css' ]
})
export class AppComponent {}
app.component.css
.container {
background-color: red;
}
app.component.html
<html>
<head></head>
<body>
<div class="container">
<router-outlet>Hello World</router-outlet>
</div>
</body>
</html>
index.html
<html>
<head></head>
<body>
// app.componentが反映される
<app-root></app-root>
</body>
</html>
〇：表示画面
３．サンプルプログラムの解説
-
selector :
コンポーネントを表示するタグになります。
HTML（ここではindex.html）のapp-rootタグが書いてある箇所にコンポーネントを表示します。
app-rootタグをコメントアウトすると、ブラウザに何も表示されなくなります。 -
templateUrl :
コンポーネントのUIをどのようにHTMLで表すか指定するものがテンプレートです。
４．参考
・コンポーネントとは
・テンプレートとは
・メタデータとは
・【2時間半で学べる】はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】
・使用したソースコード
Discussion