Angularお勉強 アプリのアップデートと今後について

Angular7.0へのアップデート！

チュートリアルをやっているうちにAngularのバージョンが6.1から7.0に上がってしまった！！（驚愕）
Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more

いや僕が更新おせーよってだけなんですが・・ていうかいつまでチュートリアルやってんの？っていう・・・
チュートリアル自体は先行してほぼ全てやったのだけど、記事に出来ていなかった
というかAngularは日本語の翻訳サイトもあるし公式のドキュメントも充実してるしで、
最初のプロジェクト構成とかはともかくチュートリアルの内容を記事にする意味とは？みたいな疑問と戦ってました。。

Angular7.0について

詳しくはリンク先にいってみてもらえばいいのだけど、気になった変更は下記

Angular Material Design

Material Designは興味ある方多いのでは？と思いますが、Angularで利用した場合に細かい表示の仕方等を吸収したようです。

仮想スクロールとドラッグ＆ドロップ

これもリンク先見てもらえば一発ですが凄いですね！（わかってない）
仮想スクロールはスクロール状態に合わせてDOMが動的に変更されているので、軽い！とかそういうこと？
ただこういうDOM制御はテスト難しくなるのでは・・・？と一抹の不安が。。
僕は仕事ではSlickGridのような動的グリッドを触ってますが、
こういうのってユーザ体験は良いと思うものの、ちょくちょく開発に縛りとして影響すると思ったり。。

ドラッグ＆ドロップはパッと見もかっこいいしいいと思う！

プロジェクトのアップデート

といってもチュートリアルプログラムをアップデートするだけなので、普通に開発している方の参考には1ミリもならないと思いますが。。
まずバージョンを確認する

次にng updateで更新を確認する

僕の場合6.1.２がすでに入っているので、特に考えることはなさそう。
（C:\とか見えてるのは良いのか悪いのか・・）
というわけでng update --allをを実行するとプロジェクトのアップデートが始まる
アップデートは10分くらいかかってコアライブラリのバージョンとかが更新されている
更新後ng serveでアプリが動くことが確認できた

またコマンドプロンプトからng versionでCLIのバージョンを確認すると、ちゃんと7.0.2に上がっていることが確認できる

補足

プロジェクトのバージョンを上げた一方で、npm list -gでグローバルにインストールされているAngularCLIのバージョンを確認すると6.1.2のままだったりする
つまりng new とかで新しく作った場合は6.1.2ができるってこと？と思って試してみたところ案の定（というか当たり前か）古いバージョンでプログラムができたので、新規に作る場合は注意が必要

npmの方でグローバルにインストールしたパッケージのバージョンを上げる
この辺のコマンドを使って既存のパッケージの確認

>npm list -g --depth=0
>npm outdated -g

Package Current Wanted Latest
@angular/cli 6.1.2 6.2.6 7.0.3

Latestは7.0.3だが、Wantedが6.2.6なのでnpm updateだと6.2.6までしか上がってくれない
今回は7.0.3を使いたいので、npm install -g @angular/cli@latestを実行してバージョンを上げる
実行後エラーがなければちゃんとバージョンが上がっているハズ

✖　npm update -g @angular/cli@latest
○　npm install -g @angular/cli@latest

今後のブログ更新について

Angularのチュートリアルを進めてて、思った以上に公式のドキュメントが詳しいので、
チュートリアルをなぞるより、個人的にポイントと思ったところに絞って更新していきたい
もうちょっと更新頻度あげねば・・

Angularお勉強 ～その６～

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

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

The Hero Editor

コンポーネントの生成

今回のチュートリアルではヒーローの詳細情報を表示するコンポーネントを追加する
コンポーネントを新規にプロジェクトに追加する場合、ng generate component コマンドで作れる
普通にファイルをコピペして作っても出来るが今回はコマンドから

ng generate component heroes

CREATE src/app/heroes/heroes.component.html (25 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (628 bytes)
CREATE src/app/heroes/heroes.component.ts (269 bytes)
CREATE src/app/heroes/heroes.component.css (0 bytes)
UPDATE src/app/app.module.ts (396 bytes)

変更点としてはheroesフォルダが出来てその中にAppComponentがワンセット作成される
自動作成されたtsファイルの方はOnInitがインポートされてコンストラクタとかが空生成される模様
あとはappModuleのdeclarationsにHeroesComponentが追加される（依存関係的な？）

生成したコンポーネントについて

You always import the Component symbol from the Angular core library and annotate the component class with @Component.

コンポーネントファイルにはComponentをインポートして@Componentアノテーションをつける必要がある
@ComponentはAngularメタデータを指定するデコレータ関数とのこと
要するにHTMLファイルやCSSファイルとかの参照を保持する
自動生成されるメタデータは次の３つ（３つ以上ある？）

1. selector— the component's CSS element selector
2. templateUrl— the location of the component's template file.
3. styleUrls— the location of the component's private CSS styles.

selectorで指定した名前が、親クラスにコンポーネントを埋め込む際の名前になる
要するにselectorにapp-heroesとか定義すると、親クラスのHTMLにのように埋め込める

ngOnInit関数は、Angularのライフサイクルの中のステータスの一つで、onInitなので初期化時に呼ばれるイベント
コンポーネント作成後すぐに呼ばれるので、初期化処理とかをおくのに適する

ここで作ったコンポーネントは、今回AppModuleに追加したみたいに簡単に他所のモジュールに追加できる

コンポーネントの編集

適当に変数とか作って表示してみる

>heroes.component.ts
hero = 'Windstorm';

>heroes.component.html
{{hero}}

>src/app/app.component.html
<h1>{{title}}</h1>
<app-heroes></app-heroes>

app.component.htmlにheroes.component.tsで定義したselectorを埋め込んでいる
ng serveで起動すると、ちゃんとheroesコンポーネントが表示されていることがわかる

クラスの作成

実際にヒーローの詳細を作っていく
src/appフォルダ以下に、TSファイルを作成してクラスを作る
中身は下記感じ

export class Hero {
  id: number;
  name: string;
}

自分でファイルを作ってもいいが、ng generateでも作れる（といっても大して変わらないけど）
ng generate class Hero
でsrc/appフォルダ以下にhero.tsファイルが作成され、空のクラスが作成される

作ったクラスをheroesコンポーネントにインポートする

import { Hero } from "../hero";

これでコンポーネント内でHeroクラスが使える
変数としてクラスの定義は下記（この辺はTSのお作法かな？）

hero : Hero = {
id : 1,
name : 'Windstorm'
}

heroesコンポーネントのHTMLを下記のように変えてヒーローの詳細を表示する

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

ng serveで結果を確認すると、ちゃんと変わっている

長くなってきたのでいったんここまで
続きは次回書きます

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に上でこぴったやつ以外が含まれてたりするけど・・。

Angularお勉強 ～その４～ Angularプロジェクトのファイル構成②

その３の続き
ng new コマンドで作ったAngularプロジェクトについて、
自動生成された各ファイルのロールをまとめる

今回はroot folder全体を見ていく
（その３ではroot folder内のsrcフォルダ内を見ていた）

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

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

The root folder

The src/ folder is just one of the items inside the project's root folder. Other files help you build, test, maintain, document, and deploy the app. These files go in the root folder next to src/.

Angularプロジェクトにおいて、srcフォルダにアプリのソースを配置する必要があった。
そのsrcフォルダはrootフォルダ内にあって、rootフォルダ内のその他のファイルは、
ビルドやテスト、維持、デプロイを手助けしますよ！とのこと。
rootフォルダ内の初期生成ファイル群は次の通り。

my-app
  L e2e
     L src
        L app.e2e-spec.ts
        L app.po.ts
     L tsconfig.e2e.json
     L protractor.conf.js
  L node_modules/...
  L src/...
     L karma.conf.js
  L .editorconfig
  L .gitignore
  L angular.json
  L package.json
  L README.md
  L tsconfig.json
  L tslint.json

e2e/

E2E（End to End）テストファイルを置く場所。
テストコードはあくまでメインアプリをテストするためにあるので、
srcフォルダにいれずに別々に管理するべし！とのこと。
メインアプリと独立しているので、E2Eテストフォルダ専用のtsconfig.jsonが存在する。
E2Eテストといえば筆者的にはSelenium WebDriverがでてくるが、
AngularではProtractorなるテストフレームワークを用いている。
Selenium WebDriverベースのAngular用テストフレームワークとかなんとか。
あまり詳しくないのでそのうち別記事におこしたい。
公式？
Protractor - end-to-end testing for AngularJS

node_modules/

node.jsがpackage.jsonの定義から勝手に作るサードパーティ製のモジュール群がおかれる場所。
bootstrapとか前入れた時もここに配備された。
ただフォルダ数多すぎて目当てのモジュールを探すのが個人的には結構手間だった。
明らかにpackage.jsonに定義されてないモジュールも大量に存在するので、
恐らくmavenよろしく依存関係を全部辿って一覧化されてそう。
ソースの中のimport宣言でfromにここにある参照先を確か書くので地味に面倒だった記憶。。。

.editorconfig

エディター（開発環境）の基本設定を書く設定ファイル。
プロジェクトで統一的な設定をするために使う。
（エディターは別に統一しなくてよくない？とか思ったり・・）
設定の仕方は下記参照
editorconfig.org
Angularの場合メジャーな開発環境はWebStormとかVSCとかだと思うが、
そのあたりではプラグインなしで使える設定ファイルの模様。

.gitignore

gitの設定ファイル。
コミット対象外としたいレポートとかログとかをコミット対象から外す設定を書くやつ。
こっちは有名ですね・・。
デフォルトでdistやtmpなどのコンパイル成果物や、IDE向け設定ファイル、ログ、システムファイルなどが
ignoreされるようになっている。

angular.json

AngularCLIに対する設定ファイル。
ビルド時に何のファイルを含めるか等々をあれこれ設定できる。
もっと深く知りたい場合は公式を見てね！とのことだが、公式ってどこだよ・・。
この辺あさればわかるのか・・・？
Angular CLI
察するにarchitect以下にかかれてるbuildやらがngコマンドと対応していて、
コマンド実行時に引数として渡す仕組みになってるとかそんな感じ？

package.json

こっちはnpmに対する設定。
node_modulesに突っ込まれるファイルの一覧的なやつ（多分）。
こっちのファイルのいじり方は下記参照とのこと。
docs.npmjs.com

protractor.conf.js

Angular専用（？）E2EツールのProtractorに対する設定ファイル。
E2Eテスト自体はng e2eコマンドで起動できる。
設定の詳しい書き方は下記参照？
protractor/config.ts at master · angular/protractor · GitHub

README.md

自分のアプリの情報を書く。
デフォだとAngularCLIに対する説明がちょこっと書かれている。
自分用に書き換えてね！とのこと。

tsconfig.json

TypeScriptのコンパイラに対する設定。
後々下記ファイル等を参考にちょっとまとめたい？
tsconfig.json | TypeScript 日本語ハンドブック | js STUDIO

tslint.json

TSLintに対する設定ファイル。
設定ファイルの設定の仕方は下記参照。
palantir.github.io

長かったがこれでようやくGETTING STARTEDが完了。
（どんだけ時間かけてんの？って感じですね。。）
ようやくコードを書いていける・・・。

Angularお勉強 ～その３～ Angularプロジェクトのファイル構成①

Angularプロジェクト

ng new コマンドで作ったAngularプロジェクトについて、
自動生成された各ファイルのロールをまとめる

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

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

srcフォルダ

Your app lives in the src folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app

Angularのアプリに必要なファイルは全てsrcフォルダ以下に配置する必要があるとのこと。
srcフォルダの外にあるファイル（package.json、angular.json、.gitignoreとか）はアプリではなくビルドを手助けする。

src
  L app
     L app.component.css
     L app.component.html
     L app.component.spec.ts
     L app.component.ts
     L app.module.ts
  L assets
     L .gitkeep
  L environments
     L environment.prod.ts
     L environment.ts
  L browserslist
  L favicon.ico
  L index.html
  L karma.conf.js
  L main.ts
  L polyfills.ts
  L styles.css
  L test.ts
  L tsconfig.app.json
  L tsconfig.spec.json
  L tslint.json

appコンポーネント、appモジュール

app.componentから始まるファイル群（css、html、specs.ts、ts）は、アプリのルートになるコンポーネントを構成している要素。
tsはおそらくタイプスクリプトの略。。
それぞれテンプレート（HTML）とそのスタイル（CSS）とロジック（TS）と単体テスト（SPEC.TS）。

Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.

app.module.tsはアプリケーションを構成するコンポーネント群とかを定義しとく場所と思っとけばいい？（自信ない・・）
自動生成された他のファイルを見るとindex.html内のapp-rootタグがあってそれをapp.component.tsのselectorで定義している。
一方main.tsにapp.module.tsへの参照があって、app.module.tsは前述のとおりコンポーネントを定義しているので、
順番としてはindex.html→main.ts→app.module.ts→app.component.tsの読み込みが入って、
selectorで定義したapp-rootがindex.htmlに埋め込まれるってことだと思ってるけど・・・。

assetsフォルダ

画像とか入れとく場所。
favicon.icoは対象外でよい？(´･ω･｀)
ちなみにangular.jsonには

            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

と書いてあるので、アイコンもassetsフォルダに入れてまとめてしまえよと思ったり・・

environments

This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered.

宛先環境ごとに1つのコンフィグファイルを置いとく場所。
この場合environment.prod.tsとenvironment.tsの２つあるのでprod環境用とノーマル環境用ってことかな？
（prodはproductionの略で製品版って意味？）
ng buildコマンドでビルドする時に--prodオプションをつけるとenvironment.tsとprod.tsを置き換えてくれるらしい。
どう置き換えるかの定義はangular.jsonにかかれてるとのこと。↓

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

肝心のenvironment.tsファイルには定数（constだしあってるよね？）が定義されていて、これをアプリ内で使えるらしい。

>src/environments/environment.ts
export const environment = {
  production: false
};

APIのキーとかを開発用とリリース用で使い分けたいときとかに使える機能の模様。。
確かにskyway使ってWebRTCした時のAPIキーの制御とかはDB使ってたし、それと比べたら便利かも？？
２つの環境ファイルの使い分けはangular.json見る感じ結構がっつり定義しているように見えるのだけど、
これ環境ごとにファイル３つ、４つ用意しとくって出来るのだろうか・・・。
できるのか知らんけどAngularで出来てるアプリはこの変数を適当に変えたら製品版じゃない機能使えたりするのか？( ﾟДﾟ)

browserslist

異なるフロントエンドツール間でターゲットブラウザを共有するための定義を各ファイル。
デフォルトの定義はこんな感じ

# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11

autoprefixerと呼ばれるベンダープレフィックスやらを対象ブラウザ向けにあれこれするツールに対して使われている模様。
（autoprefixerにはあまり詳しくない・・）
詳しい追加ルールは
GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
を見てね。。とのこと。
例によってIEが若干はぶられている。

index.html

The main HTML page that is served when someone visits your site. 
Most of the time you'll never need to edit it. 
The CLI automatically adds all js and css files when building your app so you never need to add any <script> or <link> tags here manually.

Webサイトにアクセスしたときに最初に表示されるindexさん。
you'll never need to edit itって書いてあるけどほとんどの人はAngularアイコン外すために一度は編集するんじゃないですかね・・・。
コンポーネントのJSやらCSSやらは自動でリンクが張られるので人がスクリプトタグやら貼る必要はないよとのこと。
前使った時はbootstrapのリンクを直貼ってましたすみません。( ﾟДﾟ)

karma.conf.js

JavaScriptの単体テストツールのKarmaさんのコンフィグファイル（使ったことないけど）
詳しい定義とかはここを見てねとのこと。
Karma - Configuration File
単体テストはng testコマンドで起動する。

main.ts

The main entry point for your app. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the--aot flag to the ng build and ng serve commands.

アプリのメインエントリーポイント。

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

↑が気になっていてbootstrapってCSSのフレームワーク？それとも別のことを言ってる？
わかり次第追記するかも・・

• • aotオプションをつけてng buildかng serveを起動するとJITコンパイラじゃなくてAOTコンパイラ使って起動するとのこと。

JITとかAOTとか意味わかんねぇって方は下記が詳しかったのでリンク張っておきます。（というか自分もわかってない）
qiita.com

polyfills.ts

Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. You should be pretty safe with core-js and zone.js, but be sure to check out the Browser Support guide for more information.

ブラウザの違いを吸収するための仕組み？
正直説明呼んでもよくわからなかった。
polyfillsってポリマーのやつ？
ファイルの方には下記のように書いてある。

/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/

アプリに必要なpolyfillsを書いてね！
ZoneJS を読み込む前に適用されるブラウザーポリフィルと、ZoneJSの後でメインアプリより前にインポートされるアプリケーションインポートの２つが定義できるよ！
いまいまの設定は”まともな”ブラウザ用になっているよ！（IE除く）
もっと詳しいことは
https://angular.io/docs/ts/latest/guide/browser-support.html
を読んでね！

とのこと。
正直今までのファイルの中で一番意味不明だった。

styles.css

グローバルに適用するスタイルを記述する場所。
Angularは基本的にコンポーネント内で閉じたCSSを利用するけど、
それでも全体で統一感だしたいところとかをここに記述する。
angular.jsonのstylesでここが指定されていて、stylesは配列なので
例えば全体をBootstrapベースにしたいときとかは追加でbootstrapのCSSの場所とかを追加してやるとグローバルに定義できる。

test.ts

This is the main entry point for your unit tests. It has some custom configuration that might be unfamiliar, but it's not something you'll need to edit.

テスト時のエントリーポイント。
基本編集しなくてよいらしい。
中を見ると

const context = require.context('./', true, /\.spec\.ts$/);

とあってテストファイルの登録とかしているっぽい。

tsconfig.{app|spec}.json

TypeScriptコンパイラに対する設定で、アプリ用とテスト用の２つがある。
中身を見ると、例えばappは下記の定義がある。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

多分本体のtsconfig.jsonに追記する形でアプリ用の設定（テスト用ファイルのexcludeとか）を行っている模様。

tslint.json

Additional Linting configuration for TSLint together with Codelyzer, used when running ng lint. Linting helps keep your code style consistent.

リンターの設定。
ng lintで実行されるTS Lintの設定を書く。
こっちも本チャンの設定は"../tslint.json"に書いてあって、それを拡張している模様。

ここまででようやくsrc以下のファイルの説明が終了。
プラスしてルートフォルダ以下の他ファイルの説明もあるよ！（なげーわ）
Angularが大変なのってこういうところ？それともまだ上があるのか。。

The root folder

・・・長いので分割します。( ﾟДﾟ)

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

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

Angularお勉強 ～その１～ クイックスタート：Angularアプリの作成と起動

Angularのクイックスタート

自環境はこんな感じ

>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/


Angular CLI: 6.1.2
Node: 8.11.1
OS: win32 x64
Angular:
...

Package Version
------------------------------------------------------
@angular-devkit/architect 0.7.2
@angular-devkit/core 0.7.2
@angular-devkit/schematics 0.7.2
@schematics/angular 0.7.2
@schematics/update 0.7.2
rxjs 6.2.2
typescript 2.7.2

プロジェクトの作成

それではアプリを作っていく
適当なフォルダに移動してnewコマンドでアプリを作る

>ng new my-app
　　　・
　　　・
　　　・
added 1104 packages in 160.484s
    Successfully initialized git.

無事成功
プロジェクトに最低限必要なパッケージは自動で入ったけど、追加で別のパッケージを入れるならaddコマンドを使うとのこと
以前はBootstrapとか入れたけど今回はデフォルトのままで進める

Angular Material provides schematics for typical app layouts. See the Angular Material documentation for details.

マテリアルデザインについてはもう少しAngularを理解してから踏み込んでいきたい

アプリの起動

作成したアプリを起動する

>cd my-app
>ng serve --open

作ったアプリに移動してserveコマンドでアプリを起動する

• • openオプションをつけるとビルド後に勝手にブラウザが立ち上がる

デフォルトでlocalhost:4200で起動する

ng serveで起動するとアプリフォルダをCLIが監視していて何か変更を加えると自動的にリビルドがかかる
次回からアプリの本体をいじっていく