點燈坊

實務上會有不同 Angular 執行環境，如開發用的 dev 環境，測試用的 lab 與 stg 環境，正式上線用的 prod 環境，不同的環境會有不同的 環境變數，如 API server 、S3 server 的設定 … 等，Angular CLI 提供了很方便的機制處理環境變數問題，讓我們切換不同環境時，完全不用改 code，只要在 Angular CLI 編譯時使用不同的參數切換即可。

若只有一個 component，就沒有交換資料的問題，反正資料都在 class 的 field；但一旦切成多 component 之後，parent component 與 child component 要怎麼交換資料就成為不可避免的課題，本文介紹 3 種方法。

傳統以後端為主的 MVC 寫法，route 會寫在後端；前後端分離的 SPA 寫法，前後端 有各自的 route，前端的 route 負責切換 component，而後端的 route 則負責 API。

Angular CLI 無法單獨建立 route，而是將 route 視為 module，透過建立 module 來建立 route。

根據 依賴反轉原則 ，component 與 service，或 service 與 service 的相依，引僅限於 interface，而不該直接相依於另一個 service。但真正在 Angular 使用 interface 解耦合後，又會發現因為 JavaScript 天生沒有 interface，因此 TypeScript 與 Angular DI 必須在實務上妥協，本文整理出 3 種 Angular 官方認可 interface 注入 Object 方式。

Component 間共用的資料有兩類，一類是來自 API 的資料，將來還會寫回 server，另一類是 component 間自己的狀態資料，不必寫回 server；事實上這種不必寫回 server 的共用資料，也可以使用 Observable Data Service 實作。

當 HTML 都 component 化之後，看似美好，但卻也導出另外一個棘手的問題 : component 間共用的資料該如何處理? React 是以 Redux 來解決這個問題，當然在 Angular 也可使用類似 Redux 的 NgRx，但 Redux 稍嫌複雜，而 Observable Data Service 較為簡單。顧名思義，Observable 採用的是 RxJS，而 Data Service 採用是 DI。

前後端分離後，前端除了負責顯示邏輯外，最重要的就是與 API 溝通。在 JQuery 只要使用 $.ajax() 就可存取 API；但在 Angular，則必須透過 service 與 DI container ，component 才可存取 API，完全遵守 依賴反轉原則。

.NET Core 已經內建 DI，讓我們可以享受 DI container 實現 依賴注入 的方便，Visual Studio 2017 在 ASP.NET Core Web Application 的 template 中，預設已經可直接使用 DI，不需另外設定。

.NET Core 已經內建 DI，讓我們可以享受 DI container 實現 依賴注入 的方便，Visual Studio 2017 在 ASP.NET Core Web Application 的 template 中，預設已經可直接使用 DI，若要在 console app 也使用 DI，則需另外設定。

在 C# 有著名的 IEnumerable 與 IEnumerator interface，只要 implement 這兩個 interface，就可以實踐 Iterator Pattern，但 TypeScript 該如何實做呢 ?