Angular 大師之路

分類 (共 43 篇文章)

使用 Angular Signals 實作分頁功能

今天這篇文章來簡單用 Angular Signals 實作一個分頁功能,體驗一下使用 Angular Signals 與 Reactive Programming 的開發思維。

繼續閱讀
簡介 Angular Signals

Angular 16 推出了 Angular Signals 功能,雖然還在 developer preview,但個人覺得是個非常值得開始學習,並在未來正式版後開始使用的功能,這篇文章就來介紹一下 Angular Signals 的用法。

繼續閱讀
Directive composition API 初體驗

Angular v15 推出了新的 feature - directive composition API,可以方便我們更加容易組合出更複雜的 directive。

這篇文章就讓我們來快速體驗一下 directive composition API 使用起來是什麼感覺!

繼續閱讀
[Angular 大師之路] 透過 DI 容器修正第三方元件的 bug

最進公司內某個專案遇到了一個 bug 是因為第三方套件的已知 bug 導致,但又不可能等人家修好 bug 我們才能處理,於是來詢問我的想法;其實這並不是一個很難的問題,尤其是在 Angular 這種完整個框架下,透過 DI 容器就可以輕易的達成,只是不一定想得到而已,由於大多數我們會使用到 Angular 的 DI 機制常常都是再進行一些組態設定,難得有個案例是用來修 bug 的,就用這篇文章來記錄一下!

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

繼續閱讀