全端開發人員天梯

在之前的文章中我們曾經提到過「動態建立元件」的方法，透過建立一個 directive，並決定這個 directive 的樣版上要呈現成什麼元件，之後將元件產生在 directive 所屬的樣版上。

這麼做很棒，不過還是有一個缺點，就是一定需要在樣板 HTML 上掛上這個 directive，才能產生動態的元件，雖然大部分情境都足夠了，但當遇到甚至連 HTML 都是完全自定義不是寫死在程式內的，如果需要由後端 API 回傳 HTML 內容，並在回傳的 HTML 特定位置放置元件，就會有困難。

今天就來看看這種動態的 HTML 內如何插入一個元件！

今天從 Jimmy 哥 那邊學到的新招，透過 Dependabot 及 GitHub Actions，可以在相依套件有更新時自動發送 PR。

Angular 中的 HttpInterceptor 可以幫助我們攔截每個 HttpClient 送出的呼叫，幫助我們在呼叫前後打點各種大小事情，不過有時候我們反而希望 HttpInterctptor 不要自作主張幫我們處理太多事情，之前有些過一篇文章介紹如何忽略 HTTP_INTERCEPTORS，而到了 Angular 12 之後，則內建了 HttpContext 的功能，方便在程式中主動傳遞一些資料給我們自己設計的 HttpInterctptor，來達到一些更細緻的操作，這篇文章就來看一下 HttpContext 該如何使用。

當使用 GitHub Actions 時，經常要針對來源事件去進行一些額外處理，導致要去查詢事件相關屬性，非常不方便，可以使用 [Debug action] 將相關資料印出，方便查找。

透過 Angular Universal 可以輕易達成 SSR 伺服器端渲染的效果，不過對於伺服器端產生的內容，到了 client 依然會重新進行產生，對於比較複雜的非同步處理如 HTTP 呼叫，就會發生重複呼叫，甚至造成畫面閃爍的問題。

針對這個問題，Angular 提出了 Transfer State (狀態轉移) 的做法，將 server 抓取資料的狀態移轉到 client，讓 client 可以直接使用這些狀態資料，而不是重新產生，以避免畫面閃爍等問題。

今天就來看看 Transfer State 的使用方式吧！

Angular CLI 可以幫助我們透過 ng 指令完成許多繁雜的工作，像是啟動開發用的伺服器 (ng serve)、將 Angular 專案建置成純前端網站 (ng build) 、或是進行單元測試 (ng test) 等等，這些指令其實背後都是一段又一段的程式，再搭配 Angular 的 CLI Builder API 整合起來的，而透過 CLI Builder API 也可以幫助我們將一些專案內經常運行的程式也整合到 Angular CLI 內，甚至可以藉此擴充原本內建的 Angular CLI 指令，今天就來看一下如何使用 CLI Builder API 吧！

隨著 Angular 不斷的改版，原來難用且功能差強人意的 Angular Universal 在不知不覺已經變得相當完整及強大，搭配 Prerender 功能，不用再依靠如 Hexo、Scully 等工具，要刻出屬於自己的 Static Site Generator (靜態網站產生器) 也變得相當容易，今天就來簡單看一下 Angular Universal 現在變得多麼簡單，且透過 Prerender 功能來打造一個簡單的 Static Site Generator 吧！

多欄位排序是一件不太困難，但也有點麻煩的事情，雖然 JavaScript 本身提供的 sort() 就可以達到目標，但寫起來就是醜醜的，而透過 Ramda 的 sortWith() 就簡單得多，而且更加好閱讀，今天就來如何使用 sortWith() 打造更好閱讀的排序程式。