Angularチュートリアル①

Angularの公式サイトにあるチュートリアルをやっていこうと思います。

元情報は以下のURLを参照してください。
https://angular.jp/tutorials/learn-angular

学習のロードマップをGoogle Geminiに聞いてみました!!!
「Angularの学習ロードマップ」
https://testset-blogolb.blogspot.com/p/angular.html

*********************************************************

チュートリアル：コンポーネントの構造

何も知らないので…
1行ずつ読んでいこうと思います。

*******************************************

1行目：import { Component } from '@angular/core';
"@angular/core"モジュールから"Component"デコレーターをインポートする。
"Component"はAngularのコンポーネントを定義するためのデコレーターで、コンポーネントを作成する際に使用する。

2行目：@Component({...})
"@Component"は、Angularに「これから定義するクラスがコンポーネントである」と伝えるためのデコレーター。
"@Component"には、コンポーネントの設定を行うためのプロパティを指定する。

3行目：selector: 'app-root'
"selector"は、コンポーネントをHTML内で使用する際のタグ名を定義する。
この場合、<app-root></app-root>というタグでこのコンポーネントが使用される。Angularアプリのルートコンポーネントとしてよく使われるタグである。

4行目：template: … template
このコンポーネントのHTMLテンプレートを指定。
ここではシンプルに「Welcome to Angular!」というメッセージを表示する。
複数行のテンプレートや複雑なHTMLを指定する場合は、
別ファイルに分離して"templateUrl"として指定することもあります。

5行目：standalone: true
"standalone"プロパティが"true"の場合、
他のAngularモジュールに含まれない「単独の」コンポーネントとして定義される。
Angular 14以降で導入され、モジュールに依存せず独立したコンポーネントの作成が可能。

6行目：export class AppComponent {}
AppComponentというクラスをエクスポート（公開）される。
このクラスはアプリのルートコンポーネントとして定義され、
Angularがこのクラスを使用してコンポーネントのインスタンスを作成する。