Angular

標籤 (共 93 篇文章)

使用 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 的,就用這篇文章來記錄一下!

繼續閱讀
[NgRx 速成班] 用 Effects 讓元件持續保持單純

前幾天我們已經講 NgRx 狀態管理最重要的幾個核心角色 - Store、Selector、Action 和 Reducer 介紹過了;今天我們來講講 NgRx 另外一個很重要的角色 - Effects。

繼續閱讀
[NgRx 速成班] 更改狀態的基礎 Action & Reducer

上篇文章我們介紹了 NgRx 的 Store 和 Selector,這兩個角色主要是用來存放資料及讀取資料用的,接著我們來看看如何更新儲存的資料 - Action 和 Reducer。

一樣的,基本的程式骨架已經在「使用 NgRx Schematics 快速產生程式碼骨架」建立,接下來將會直接沿用產生出來的程式骨架,繼續調整程式碼。

繼續閱讀