AngularCLIの画面を眺めるpart2

独学でAngularCLIのプロジェクトを作成したので、大手を振るってスクショを貼れます。

#前提知識#
Angularで作られたアプリは1枚の画面に様々な部品(component)を切り替え切り替え乗せ換えている。React.jsと同じ。なのでリアルタイムでデータ反映させるライブリローディングも出来、カッコイイ。1つのhtml(index.html)と1つのts(main.ts)に全てのcomponentsを紐づけている。

**Webpack**
　モジュールバンドラー。その名の通りモジュール(部品)をバンドル(束にまとめる)、AngularCLIもしくはNodeにデフォルトで組み込まれている重要なモジュール。JSもCSSもイメージ画像のURLだって1つのファイルにまとめてしてくれる。
　一画面のhtmlは&lt;script>...bundle.js&lt;/script>だけ、budle.jsがあらゆるファイルをhtmlへ運んでくれる
参照元：https://qiita.com/kmszk/items/45fb4690ace32216ca25

#I/Oの流れ#

**画面HTML⇒main.tsへ**
HTMLのbundleどれかが(さっそくあやふやですみません)、main.tsを呼ぶ。

<img width="960" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/1df3e810-d3d9-6729-da4a-d0e5cd8fa1bb.png">

**main.ts⇒app.module.tsへ**
main.ts内でapp.module.tsを見に行っている

<img width="960" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/9dbcfa6f-888b-d6de-ae65-dfbbf8993af4.png">

多分このclass名を指定して見に行っているはず、、、

<img width="960" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/2230fe89-8b33-5f09-a1d5-3ada3be60801.png">

**bootstrap: [AppComponent]でapp.componentにフレームワークに組み込む***
*bootstrap*はTwitter元社員が作ったフロントエンドのフレームワーク
app.componentをbootstrapフレームワークさんで武装している

<img width="960" alt="13.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/9751f170-9ca3-c901-6af2-3343bdb2ce70.png">

**index.tmlの&lt;app-root>でapp.component.tsを見る**

<img width="960" alt="10.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/67794358-2a99-009f-456d-7af622995c64.png">

*selectorの名前が一致するcomponentを見に行きます

<img width="960" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/6ac7280c-b89e-f7f5-7fc5-6412619a4ecc.png">


**app.component.tsで、templateUrl:app.componentを見る**

<img width="960" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/52ce4e1b-2a11-0ace-09f8-efca3c87e8c0.png">

**app.component.html内の&lt;app-servers>で、servers.component.tsを見る**

<img width="960" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/4a8afb5e-cd04-5696-2d63-0a900b28a59c.png">


もちろん、&lt;app-success-alert>も&lt;app-warning-alert>も見てますが、今回は代表して&lt;app-servers>を追っかけます。

**servers.component.tsで、templateUrl:servers.componentを見る**

<img width="960" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/272c1b3a-1c82-e5af-7e87-046ad374f4fe.png">


**servers.component.htmlで内の、&lt;app-server>でserver.component.tsを見る**


<img width="960" alt="8_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/1f02c4df-28d1-be0a-69ab-e9ec395b8171.png">

&lt;app-server>を二行書いていますので、2回呼ばれます。



**server.component.tsで、templateUrl:server.componentを見る**

<img width="960" alt="9.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/0e06d902-50da-58ea-cadd-e83cb0a75d43.png">


**server.component内の&lt;p>が表示される**

<img width="960" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/27f9d593-f2ae-0887-d686-54d0105e1f07.png">

今回はここが最下層なので、これ以上はどこも見に行きません。Serverは''に囲まれているので固定値、serverIdはプロパティ(Javaメインだった自分としては未だに変数と呼びたくなる、、、)で値を呼んでおり、getServerStatu()はメソッドの処理結果を呼んでいる。

下記のServer with ID 10 is offlineが出力結果。ほかにも入力バーやらボタンやらあります。それらの説明もいつの日か、、、

<img width="960" alt="14.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/c1000142-9ba0-836e-a224-439b0bec4f75.png">