Angularと戯れる①

はじめに

Angularについて勉強しています。
学んだことを自分なりにまとめて書いていきます。
Angularチュートリアル：Tour of Heroesを読み進めていきます。

開発環境

• OS: Windows10
• Nodeバージョン: 18.18.0
• Angular CLI バージョン: 17.3.8
• エディタ: VSCode

プロジェクトの作成

プロジェクトの作成を読んでいきます。

関連コマンド

ワークスペースの作成

ng new ワークスペース名 --no-standalone

Angularアプリの土台となるリソースが格納されたフォルダが作成されます。

チュートリアルにもあるとおり、スタンドアロンを無効とするオプションを添えて実行します。

アプリケーションの起動

ng serve --open

--openオプションを添えることで、ｈttp://localhost:4200 がブラウザで開かれます。

コンポーネントとは

Angularの世界において、下記3点セットをひっくるめて「コンポーネント」と呼ばれます。

• htmlファイル
  ・ 例：app.component.html
• cssファイル
  ・例：app.component.css
• tsファイル (TypeScript形式)
  ・例：app.component.ts

ソースコードを読み解いてみる

src/app/app.component.ts

...
@Component({
  selector: 'app-root',                  //app-rootというタグを指定することで、外部のコンポーネント（のhtml）から参照できる
  templateUrl: './app.component.html',   //同じフォルダにあるhtmlファイルを読み込む
  styleUrls: ['./app.component.css']     //同じフォルダにあるcssファイルを読み込む
})
export class AppComponent {
  title = 'Hello, World!!';
}

Componentデコレータについて：Link

src/app/app.component.html

<h1>{{title}}</h1>

app.component.tsのAppComponentクラスで定義されていた変数：title の値を参照します。

ダブルカーリーグレイシスという手法で、参照したい変数名を {{ と }} で囲むことで、値を動的に取得できます。

この状態でUIを確認すると、「Hello, World!!」という文字列が表示されていることを確認できます。