念念不忘,必有迴響。有一口氣,點一盞燈,有燈就有人。

如何使用 Angular 實現 Observer Pattern ?

如何使用 Angular 實現 Observer Pattern ?

Observer Pattern 是 OOP 中著名的 Design Pattern,尤其在應付 一對多 的場景特別有效,在本文中,我們將以 Angular 與 TypeScript 實現 Observer Pattern。

如何在本機執行 ng build 後的結果 ?

如何在本機執行 ng build 後的結果 ?

Angular CLI 雖然可以直接 ng serve 執行 Angular,不過畢竟不是 ng build --prod 的最終結果,你曾懷疑 ng build --prod 後的結果真的能跑嗎 ? 可以先在本機測試 ng build --prod 編譯後的結果嗎 ?

如何設定 Angular 環境變數 ?

如何設定 Angular 環境變數 ?

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

如何在 Component 間交換資料 ?

如何在 Component 間交換資料 ?

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

如何使用 Angular CLI 建立 Route ?

如何使用 Angular CLI 建立 Route ?

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

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

如何在 Angular 由 Interface 注入 Object ?

如何在 Angular 由 Interface 注入 Object ?

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

使用 Observable Data Service 儲存 Component 間共用變數

使用 Observable Data Service 儲存 Component 間共用變數

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

使用 Observable Data Service

使用 Observable Data Service

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

如何使用 Angular 存取 Web API ?

如何使用 Angular 存取 Web API ?

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

如何在 .NET Core Web API 使用 DI ?

如何在 .NET Core Web API 使用 DI ?

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