我們在 Angular 使用 HttpClient 的時候，難免會需要在呼叫時加入 Query String (查詢字串)，與其用「組字串」的方式來撰寫，倒不如利用 HttpParams 提供的 API 徹底簡化查詢字串操作，同時也可以提升程式碼的可讀性。這篇文章我就來介紹幾個常見用法。
... 繼續閱讀 ...
我昨天在授課的時候，突然遇到 Chrome 瀏覽器無法瀏覽網站的情況(ERR_UNSAFE_PORT)，我踩到一個不知道算不算罕見的地雷，在深入瞭解之後，覺得有必要寫成文章提醒大家，因為你還真的很有可能會在不久的將來遇到這個問題，看完文章才不會讓你日後鬼打牆太久，讓我們繼續看下去。
... 繼續閱讀 ...
RxJS 可以將所有 Observable 物件簡單區分成兩種不同類型的，一種是有限事件數量的 Observable 物件，例如 HttpClient 相關 API 在訂閱之後就只會有一筆資料回來，這種類型的 Observable 在訂閱之後是不需要特別取消訂閱的。另一種則是無限事件數量的 Observable 物件，像是 DOM 的事件訂閱，或是使用 RxJS 的 timer 建立運算子(Creation Operators)，或是你在元件中訂閱 Router.events 等等，這些 Observable 都沒有結束的一天，因此需要實作取消訂閱(Unsubscribe)，否則就可能會導致記憶體洩漏等問題。這篇文章我將分享四種不同的 RxJS 取消訂閱方法。
... 繼續閱讀 ...
早期 Angular CLI 建立的專案都有內建 TSLint 與 codelyzer，但從 Angular CLI v11 開始建議大家開始轉移到 Angular ESLint，直到 Angular CLI v12 直接拔除所有 Linter 設定。本篇文章我將介紹如何從現有 TSLint 的 Angular 專案升級到改用 Angular ESLint 進行撰寫風格檢查，以及從完全沒有 ESLint 的 Angular 專案如何加入 ESLint 的完整流程。
... 繼續閱讀 ...
我們在團隊中開發 Angular 應用程式，經常需要同步每個成員的程式碼格式，與其訂定 Coding Style (代碼風格)，倒不如直接用工具強制所有成員用一致的風格進行程式碼排版。本篇文章我將示範用 husky 搭配 prettier 來設定 Git 的 pre-commit hook，讓每個人在 git commit 之前就自動將變更的程式碼進行排版。
... 繼續閱讀 ...
在 Visual Studio 2019 裡面使用含有 OpenAPI 規格的 Web API 已經是十分便利，只要規格寫的好，Web API 用戶端函式庫只要一秒鐘就可以產生。但其實這些好用的功能背後都是靠 MSBuild 與 NSwag 做到，今天花了一整天把所有技術細節釐清，釐清之後對這整套作法是如此的豁然開朗，感覺很棒。這篇文章我就來寫寫今日的研究心得！
... 繼續閱讀 ...
Angular CLI 從 v8 版本開始，就支援一個「差異化載入」(Differential Loading) 功能，此功能會自動判斷當今世上所有主流瀏覽器中，是否支援 ES5 或 ES2015 (ES6) 語法。如果這些瀏覽器還有不支援 ES2015 的版本尚在市場上流通的話，Angular CLI 在執行 ng build --prod 的時候，就會建置出分別為 ES5 與 ES2015 兩個版本，並透過 nomodule 屬性達成差異化載入。想當然爾，如果一次建置兩個版本，總體建置時間也會倍增。本篇文章我將解釋這部分技術細節，如果你只想建置出 ES2015 的版本，也請繼續看下去。
... 繼續閱讀 ...
當 Angular 越用越熟，你將會發現其開發效率極高無比，除了極佳的工具支援外，優異的模組化技術更是不在話下。上週在教 Angular 7 開發實戰：進階開發篇 的時候，有學員許願，說希望我能分享一些 Angular 函式庫的作法，說著說著就這麼願望成真了！ 😆 當越來越多專案都用 Angular 開發時，你一定會發現有越來越多的共用元件出現。本篇文章我將設計出一款同時讓 Reactive Forms 與 Template-driven Forms 皆可使用的表單驗證器，並完整介紹如何用 Angular CLI 從頭到尾建立並發行一個自己的 Angular Library 函式庫！
... 繼續閱讀 ...