Angularチュートリアル②

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

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

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

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

チュートリアル：コンポーネントの更新

1行ずつ読んでいこうと思います。

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

1～5、8～9行目：内容が同じなので割愛
以下のページを参照
https://testset-blogolb.blogspot.com/p/angular_4.html

6行目：template:
・"template"プロパティ
　コンポーネントのHTMLテンプレートを定義する

・Hello {{ city }}, {{ 1 + 1 }}
　Angularのテンプレート構文を使用している

・{{ city }}
　プロパティバインディング
　このコンポーネント内のcityプロパティの値が表示される。

・{{ 1 + 1 }}
　式のバインディング
　計算結果"2"が表示される

10行目：export class AppComponent { ... }
AppComponentというクラスをエクスポートする
このクラスが、このコンポーネントの振る舞いやプロパティを定義している
Angularがこのクラスを使ってコンポーネントのインスタンスを生成する

11行目：city = 'San Francisco';
cityというプロパティを定義し、San Franciscoという文字列を代入している
テンプレート内の{{ city }}とバインディングされている
画面には"Hello San Francisco, 2"と表示される
　→　ここで定義されている"city"がプロパティ!!!