Zenn
🌎

[Angular]コンポーネントとは（備忘録）

2023/05/01に公開
Angular
初心者
学習記録
メモ
tech

１．コンポーネントとは

・@Component修飾子のついたメタデータをもつTypeScriptクラスです。
・HTML・CSS・TypeScriptの３つでコンポーネントは構成されています。
・コンポーネントは、画面の一部であるViewを制御します。

２.サンプルプログラム

〇ファイル構成
スクリーンショット 2022-12-18 14.14.49.png

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>

表示画面
スクリーンショット 2022-12-18 12.27.23.png

３.サンプルプログラムの解説

・selector :
　コンポーネントを表示するタグになります。
　HTML（ここではindex.html）のapp-rootタグが書いてある箇所にコンポーネントを表示します。
　app-rootタグをコメントアウトすると、ブラウザに何も表示されなくなります。

・templateUrl :
　コンポーネントのUIをどのようにHTMLで表すか指定するものがテンプレートです。

４.参考

・コンポーネントとは
・テンプレートとは
・メタデータとは
・【2時間半で学べる】はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】
・使用したソースコード

Discussion