Angularお勉強 ～その５～ AppComponent序？

初めに

本記事からようやくAngularのチュートリアルを実際にやっていく
チュートリアルが完成すると下記のようなWebアプリができる模様。
stackblitz.com

• • • • • • • • • • • • • • • -

• • • • • • • • • • • • • • • -

イントロダクション

イントロダクションを訳してもしょうがないので、Angularの勉強をする上での自分なりの留意点をまとめてみた。
（チュートリアルで学べるかわかんないけど・・・）

1. Angularの考えるWebアプリ開発について学ぶ
2. Angularがフレームワークとして備える機能を学ぶ

Webアプリ開発のフレームワークとしてreactやらvueやらある中でWhy Angularを述べるなら、Angularが最もフレームワークとしてかっちりしているから、と思っている。（実態はともかく一番重いイメージ）
Googleが考える「テストなどの工程も含めたWebアプリ開発が標準的に備えるべきもの」がAngularから学べないか？それを最も期待している。
既にng new して作ったアプリの中に単体テスト、E2Eテスト、Lint等がデフォで組み込まれる辺りにその片鱗を感じているので、
きっとよい機会になるハズ。。

The Application Shell

npm install -g @angular/cli
ng new angular-tour-of-heroes
cd angular-tour-of-heroes
ng serve --open

Angular CLIのインストールと新しいPJの立ち上げについては以前行っているので割愛する。
作ったPJに対してng addコマンドを使うことで、既存のパッケージをインストールできる。
Angular Materialのインストールなどについては、下記を参照
Angular Material

Angular components

Angularのアプリケーションは、AppComponentと呼ばれるAngularのコンポーネントによって制御される。
AppComponentは基本的なビルディングブロックで、データの表示、イベントハンドラ、ロジック等を行う。
src/appフォルダ以下に、AppComponentの3つのファイルがある。

app.component.ts— the component class code, written in TypeScript.
app.component.html— the component template, written in HTML.
app.component.css— the component's private CSS styles.

HTMLのデフォルトのテンプレートを削除して、下記にばっさり変更する

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

{{変数名}}がAngularにおける変数バインドのお作法。
この場合tsフォルダ内のtitle変数をHTML内の{{title}}がバインディングして参照している。

src直下のstyles.cssのCSSファイル（AppComponentのCSSではなく、Angular.jsonが参照している方）は、アプリケーション全体に一貫したいデザインを記述する。
今回は公式を丸コピ
あわせてAppComponentの方のCSSの中身をばっさり削除。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

今回はいったんここまで。
まだ最初にやったタイトルの名前変えるようなことしかしてないけど。。
stackblitz.com
↑こんな感じになるハズ。
CSSに上でこぴったやつ以外が含まれてたりするけど・・。