Angular 大師之路

分類 (共 47 篇文章)

使用 Signal Model Input 輕鬆達成 two way binding

Angular 自從 17 推出 Signals 後,就持續改進,從 17.1 的 Signal Input 到現在最新的 Model Input,讓開發者可以更輕鬆的達成 two way binding!今天就來看看如何使用透過 Signal Model Input 來達成 two way binding 吧!

繼續閱讀
如何測試使用 OnPush 策略的 Angular 元件

OnPush 策略可以打造出高效能的元件,但也會對撰寫測試程式造成一些不方便,今天就來看看有哪些方法可以幫助我們測試 OnPush 策略的元件吧!

繼續閱讀
Standalone Components 下如何使用 Angular Elements

Angular 15 之後推出了全新的 Standalone Components 開發方式,擺脫傳統 NgModule 的束縛,讓我們能打造出更輕更快的 Angular 元件以及應用程式。未來極有可能會變成 Angular 開發的主流,而 Angular Elements 則可以幫我們把 Angular 的應用程式打包成符合 W3C 標準的 Web Components,可惜的是目前 Angular 文件還沒有特別針對 Standalone Components 如何使用 Angular Elements 特別做說明,這篇文章就來介紹一下如何將 Angular 的 Standalone 轉換成 Web Components。

繼續閱讀
搶先體驗 Angular 16 對 jest 的支援

Angular 16 時加入了實驗性質的對 jest 的支援,以面對未來 Karma 棄用時的測試選項。而 jest 也已經逐漸變成前端測試的主流,因此這次就來看看 Angular 官方對 jest 目前的支援如何吧!

繼續閱讀
使用 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() 新用法。

繼續閱讀