Angularお勉強 ～その２～ クイックスタート：

目的

下記クイックスタートベースでAngularについて学んでいく
Angular Docs

今回からアプリを実際にいじっていく
また作成したアプリはGitHubに公開していきます
github.com

Angularコンポーネントの編集

The CLI created the first Angular component for you. This is the root component and it is named app-root. You can find it in ./src/app/app.component.ts.

AngularCLIが自動作成したAngularコンポーネントを編集していく
このapp.component.tsはルートコンポーネントでapp-rootの名前がついている。と

>./src/app/app.component.ts.
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

title = 'my-app';←これをMy First Angular App!に編集する
ng serveでアプリを起動した状態でソースコードを修正すると、
自動で修正を感知してアプリのリビルドとブラウザのリロードが走る
この場合タイトルの名前が変わる

Angularコンポーネントのスタイルの変更

コンポーネント内のスタイルはコンポーネント内でのみ有効
（宣言する場所によっては全体に効くけどここでは触れない）
app.componentのStyleは下記で宣言されているので、対象のcssファイルをいじってやると反映される
styleUrls: ['./app.component.css']
今回はクイックスタートのCSSを対象ファイルにコピペ

h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}

コピペするとブラウザがリロードされ、CSSが反映される
タイトルが青っぽくなっていればOK

これでヒーローチュートリアルの方をやっていく準備ができた
またチュートリアルの下の方に自動生成された各ファイルの役割等の説明がある
それについて次回はまとめようと思う