Angular 大師之路

分類 (共 33 篇文章)

使用 HttpContext 傳遞資料給 HttpInterceptor

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

繼續閱讀
透過 CLI Builder API 加強 Angular CLI 功能

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 8 之後動態載入模組的方法 (非延遲載入路由)

Angular 8 之後,將原來延遲載入路由模組的方式做了變動,改使用 dynamic import 的方法。這樣的方法替我們在開發時帶來非常大的優勢!隨著編輯器的資源,不管是模組路徑的設定還是選擇模組的方式,都擁有的自動完成的功能!

不僅如此,如果不想透過路由設定就想達到在程式中動態載入模組也變得比過去簡單許多。今天就讓我們來看看該如何自行在程式中動態載入模組吧。

繼續閱讀
設計 @Output 時的命名注意事項

最近在開發 Angular 程式時,遇到了一個詭異的情況,其實主要是來自對於 HTML 底層的一些觀念沒有弄清楚,跟保哥討論釐清後,雖然不是 Angular 的問題,但要是一個沒注意,很容易不小心發生問題,因此在這篇文章記錄一下!!

繼續閱讀
[Angular 大師之路] 如何忽略 HTTP_INTERCEPTORS

我們都知道在 Angular 中如果想要透過 ajax 呼叫 API,可以透過 HttpClient 服務來達成,同時在此之前我們也提過可以使用 HTTP_INTERCEPTORS 來攔截處理所有的 HTTP 請求。但有時候我們會希望不要透過 HTTP_INTERCEPTORS,幫我們處理那麼多事情,這有辦法解決嗎?今天就來介紹兩種方式來解決這個問題!

繼續閱讀
[Angular 大師之路] 在 Angular 中應用 RxJS 的 operators (2) - 進階應用

昨天我們講了幾個常用 RxJS operators,今天再來看看一些其他在 Angular 常見的應用吧!

繼續閱讀
[Angular 大師之路] 在 Angular 中應用 RxJS 的 operators (1) - 基礎篇

在前兩天介紹 AsyncPipe 時,我們不難發現當進入 RxJS 思維時,搭配 AsyncPipe 可以帶來非常多的好處!雖然透過這種不使用 subscribe() 訂閱的方式,對於許多剛進入 Angular 或 RxJS 世界的朋友會感到不適應;尤其是當有更多複雜資料要處理時,不使用 subscribe() 訂閱後處理資料還真的不知道該如何處理是好。

其實只要透過 RxJS 提供的運算子(operators),便能夠幫助我們減少大量的程式,並寫出更加好維護的程式碼!這兩天就讓我們來看看一些我個人在開發 Angular 時常用的 RxJS 應用技巧吧!

繼續閱讀
[Angular 大師之路] 認識 AsyncPipe (2) - 進階技巧

今天我們來認識一下兩個重要的 AsyncPipe 特性,可以幫助我們在使用 AsyncPipe 時更有信心,打造出更高效能的程式!

繼續閱讀
[Angular 大師之路] 認識 AsyncPipe (1) - 基本使用技巧

在撰寫前端程式時,我們很難避免會遇到非同步的程式處理,在大量使用 RxJS 的 Angular 中更是如此,而今天我們要介紹的 AsyncPipe 在樣板上要處理非同步可以說是非常方便的工具!

繼續閱讀
[Angular 大師之路] 認識元件的變更偵測策略

今天我們來看看元件內的變更偵測策略,打造高效能元件!

繼續閱讀