Angular 大師之路

分類 (共 38 篇文章)

移除 ModuleConcatenationPlugin 以加快 Angular 建置速度

最近接手一個專案,需要將舊 Angular 9 專案加入之前客戶沒有實作的 lazy loading 功能,專案包含了將近 600 個頁面,之後還會增加。

重構的過程是很順利的,不過在 lazy loading 架構完成後,卻出現了 production build 時間大幅增加的問題,花費了不少時間研究,總算是以較低的代價換回了 build 速度。

這篇文章就來分享一下整個過程和結論。

繼續閱讀
使用 inject() 簡化建構式注入的內容

Angular 14 將加強原有的 inject 功能,讓我們在元件的建構式內可以直接透過呼叫 inject(...) 取得原本所有可以在建構式注入的內容,這種做法可以大幅簡化原來建構式的程式,但也可能帶來一些問題,今天就來看一下神奇的 inject() 新用法。

繼續閱讀
搶先體驗強型別表單(Strict Typed Reactive Forms)

Angular 14 即將推出強型別的 Reactive Forms 表單功能,讓我們在開發過程中可以享受強型別定義帶來的好處,不用再擔心弱型別不小心打錯字等等問題,今天就來看一下如何使用強型別的表單功能!

繼續閱讀
搶先體驗 Standalone Components / Directives / Pipes

Angular 14 預計會推出一個重磅功能 - 「Standalone Components / Directives / Pipes」!這個功能允許我們「獨立」的使用 components、directives 和 pipes,不用再強制依靠 @NgModule

目前 Angular 14 已經推出 RC.0 了,這個版本內也包含了 Standalone 的開發人員預覽版本(developer preview of standalone),讓我們可以搶先體驗一下這種獨立使用元件的版本,這篇文章就來介紹一下為什麼要使用 Standalone 以及該如何使用。

繼續閱讀
[Angular 大師之路] 在動態的 HTML 中動態產生元件

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

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

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

繼續閱讀
使用 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,幫我們處理那麼多事情,這有辦法解決嗎?今天就來介紹兩種方式來解決這個問題!

繼續閱讀