Angular # 11 - 深入淺出 Angular [3]

• Bootstrap 究竟是怎麼達成的呢？Angular CLI 在這個部份主要是透過 WebPack
• Webpack 主要會將所有的 javascript 打包並在 index.html 的最下方引用

• App Module 中列出的相依都會被解析、Bootstrap
• 這其中又以 BrowserModule 會優先被載入

• 此時所有已經需要呈現的的子 Component 也會被載入
• model 的綁定與事件監聽也是在這個時候建立的
• 這個步驟執行完之後，User 就可以開始跟 Angular App 互動了

• 不需要的 Component 會被移除
• 需要的 Component 會被載入並渲染(e.g. Routing 後要載入新的 Component)

• JiT(Just-in-Time)
  • 指的是編譯會在瀏覽器載入所有的 assets 後才開始
  • 有時候會造成一些時間差，讓元件的最終面貌要花一點時間載入
  • 此外，JiT 還要花時間載入編譯器
• AoT(Ahead-of-Time)
  • 與 JiT 不同，是先把內容都編譯過，才送去給瀏覽器
  • 也正因為如此，User 可以馬上看到內容，不用等
  • 此外，AoT 還可以針對效能上作很多的優化(Optimization)
• 開發時期主要都會用 JiT，因為可以馬上看到結果
• 部署時期主要會用 AoT(以後會詳談，有很多東西可以調整)

• injector
  • 我們很少會直接用到 injector，它的職責是註冊及請求 service
  • 透過建構子注入的時候，背後偷偷做事的就是 injector
• providers
  • 當 injector 請求某個 service 時，實際建立 instance 的就是 provider
  • 它會透過某個 factory function 來產生並回傳實例
  • NgModule 的 providers 陣列中有列到的 Service 都可以被建立並注入
  • Service 不見得一定要加在 app.module.ts 的 Provider 陣列中，也可以針對某個單一 Component，或是整個 Component Tree(之後會再詳談)

  constructor(private @Inject(HttpClient) http) {}

• 透過 Inject 這個 Decorator 來注入 HttpClient
• 我個人是比較偏向原本的寫法

• 異動永遠是從 model 開始，接著影響到 view
• Angular 會從父 Component 開始一路檢查 子 Component 是否需因異動而同步，這個方向是由上往下的單一方向，以確保父子之間的關聯都正確被同步了
• 看似很耗效能，但 Angular 可以在幾毫秒內完成，為了達到這樣的效能，Angular 產了一個 change detector，管理著各個 Component 的資料，及每次異動間的差異

• 預設是走 traverse mode，就是從 root 開始檢查是不是有異動
• 另一種是 OnPush mode，可以針對特定父 Component 傳入子 Component 的 @Input 作處理，只要自己的父 Component 沒異動就跳過
• 實際上，異動會發生在各種事件(e.g. click, mousemove,...)，收到 HTTP response，或是 timer/interval 的 callback
• 總而言之，就是任何非同步的事發生時，就是 Change Detection 啟動的時機，因為同步的事都在 Angular 正常的渲染過程中處理完了

• 大部份的東西即使不了解細部也可以寫出好的 Angular App
• 如果真的想了解，後面的篇章也會針對某些議題作深入探討