HTML
JavaScript
TypeScript
AngularJS
Angular2

AngularCLIの画面を眺めるpart2

More than 1 year has passed since last update.

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

前提知識

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

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

I/Oの流れ

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

2.png

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

4.png

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

5.png

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

13.png

index.tmlの<app-root>でapp.component.tsを見る

10.png

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

11.png

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

6.png

app.component.html内の<app-servers>で、servers.component.tsを見る

7.png

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

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

8.png

servers.component.htmlで内の、<app-server>でserver.component.tsを見る

8_2.png

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

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

9.png

server.component内の<p>が表示される

12.png

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

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

14.png