<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://antonio-ling.com/</id>
    <title>Antonio's blog</title>
    <updated>2026-10-14T06:46:39.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <author>
        <name>Antonio</name>
        <uri>https://antonio-ling.com/about/</uri>
    </author>
    <link rel="alternate" href="https://antonio-ling.com/"/>
    <link rel="self" href="https://antonio-ling.com/atom.xml"/>
    <subtitle>我是一隻前端小蝦米，努力夢想有一天變成大鯨魚</subtitle>
    <logo>https://antonio-ling.com/images/icon-192.png</logo>
    <icon>https://antonio-ling.com/images/icon-192.png</icon>
    <rights>© 2026 Antonio</rights>
    <entry>
        <title type="html"><![CDATA[Day 30：Angular Router Providers 與生命週期管理，路由離開後 Service 會銷毀嗎？]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-30/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-30/"/>
        <updated>2026-10-14T06:46:39.000Z</updated>
        <summary type="html"><![CDATA[平常在 Angular 中，我們可以透過 providers 決定 Service 的注入範圍。例如註冊在 Root，讓整個 Application 共用同一個實例；或註冊在 Component，讓 Service 隨著…]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-14T06:46:39.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 29：Angular 也有 VueUse？使用 Signality 整合常見 Browser API]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-29/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-29/"/>
        <updated>2026-10-13T15:14:18.000Z</updated>
        <summary type="html"><![CDATA[在 Vue 生態系中，VueUse 提供許多 Composables，讓我們可以快速使用瀏覽器功能，例如監聽網路狀態、保存使用者設定，或偵測元素是否進入可視範圍。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-13T15:14:18.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 28：Angular 動態建立 Component，NgComponentOutlet 與 ViewContainerRef]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-28/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-28/"/>
        <updated>2026-10-12T09:27:41.000Z</updated>
        <summary type="html"><![CDATA[平常在 Angular 中使用 Component，通常會直接在 Template 裡面宣告：]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-12T09:27:41.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 27：NgRx Store vs SignalStore，從 Action、Reducer 到直接更新 State]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-27/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-27/"/>
        <updated>2026-10-11T12:06:41.000Z</updated>
        <summary type="html"><![CDATA[前幾天我們使用 NgRx SignalStore 實作購物車，透過 withState() 管理商品資料、withComputed() 計算總金額，再利用 withMethods() 與 patchState() 更新 …]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-11T12:06:41.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 26：SignalStore 與 Strategy Pattern，透過 DI 動態切換業務邏輯]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-26/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-26/"/>
        <updated>2026-10-10T14:01:59.000Z</updated>
        <summary type="html"><![CDATA[昨天我們使用 Angular 原生 Signal 與 NgRx SignalStore 實作購物車，透過 State 管理商品資料，再利用 Computed 計算商品數量與總金額。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-10T14:01:59.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 25：Angular SignalStore，原生 Signal 不夠用嗎？]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-25/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-25/"/>
        <updated>2026-10-09T13:28:45.000Z</updated>
        <summary type="html"><![CDATA[在 Angular 開發中，如果資料只會被單一 Component 使用，通常可以直接透過 signal() 管理。但當多個 Component 需要共用同一份資料時，就得考慮狀態應該放在哪裡。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-09T13:28:45.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 24：SPA Router 為什麼不再只靠 History API？]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-24/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-24/"/>
        <updated>2026-10-08T06:30:47.000Z</updated>
        <summary type="html"><![CDATA[平常使用 Angular Router 時，可以透過 routerLink 或 router.navigate() 切換不同頁面。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-08T06:30:47.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 23：RouteReuseStrategy，切換路由一定要銷毀 Component 嗎？]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-23/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-23/"/>
        <updated>2026-10-07T07:58:32.000Z</updated>
        <summary type="html"><![CDATA[在後台系統中，很常會看到頁籤式介面，例如：]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-07T07:58:32.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 22：Angular Render Lifecycle，從 afterNextRender 到 DestroyRef]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-22/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-22/"/>
        <updated>2026-10-06T15:36:23.000Z</updated>
        <summary type="html"><![CDATA[過去在 Angular 中，只要遇到初始化、View 建立或資源清理，通常會先想到 Lifecycle Hooks：]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-06T15:36:23.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 21：Angular Template 還適合呼叫 Method 嗎？從 Pipe、RxJS 到 computed]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-21/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-21/"/>
        <updated>2026-10-05T15:30:32.000Z</updated>
        <summary type="html"><![CDATA[過去在寫 Angular 時，因為 Template 可以直接呼叫 Method，很容易在專案裡看到大量這樣的寫法。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-05T15:30:32.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 20：Signal Forms 非同步驗證，validateHttp 與 validateAsync]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-20/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-20/"/>
        <updated>2026-10-04T12:56:17.000Z</updated>
        <summary type="html"><![CDATA[前兩篇介紹了 Signal Forms 的基本驗證，以及需要參考其他欄位的 Cross-field Validation。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-04T12:56:17.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 19：Signal Forms Cross-field Validation 與欄位更新時機]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-19/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-19/"/>
        <updated>2026-10-03T15:18:26.000Z</updated>
        <summary type="html"><![CDATA[上一篇介紹 Signal Forms 時，已經看到可以透過 Schema 定義欄位驗證，例如 required()、email()、minLength()。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-03T15:18:26.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 18：Angular Signal Forms 穩定了，跟我們用了這麼久的 Reactive Forms 到底差在哪？]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-18/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-18/"/>
        <updated>2026-10-02T15:28:36.000Z</updated>
        <summary type="html"><![CDATA[在 Angular 中處理表單，很多專案使用的都是 Reactive Forms。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-02T15:28:36.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 17：effect() 不是拿來同步 Signal 的，Angular 的 Side Effect 該怎麼寫？]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-17/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-17/"/>
        <updated>2026-10-01T13:22:13.000Z</updated>
        <summary type="html"><![CDATA[effect() 是 Angular signal 裡很容易被誤用的一個 API。因為寫法直覺，只要讀取 signal，就能在值改變時執行一些事情，所以很常被拿來同步狀態、打 API，甚至再去修改其他 signal。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-10-01T13:22:13.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 16：即將登場的 Route Resources，Angular Router 為什麼需要新的資料載入方式？]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-16/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-16/"/>
        <updated>2026-09-30T15:12:05.000Z</updated>
        <summary type="html"><![CDATA[過去在 Angular Router 中，如果希望進入 Component 前先完成資料載入，可以透過 Resolver，讓資料取得流程在 Component 初始化之前執行。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-09-30T15:12:05.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 15：搞懂 Injection Context，從 inject()、runInInjectionContext() 到 injectAsync()]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-15/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-15/"/>
        <updated>2026-09-29T05:44:28.000Z</updated>
        <summary type="html"><![CDATA[前面提到 Injection Context 時，可能會讓人聯想到先前介紹過的 Reactive Context。我一開始也有點搞混，因此花了一些時間重新理解 Angular 裡這些不同的執行環境。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-09-29T05:44:28.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 14：Lazy Loading 不只一種，從 Router Preloading、@defer 到 injectAsync()]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-14/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-14/"/>
        <updated>2026-09-28T14:44:46.000Z</updated>
        <summary type="html"><![CDATA[當 Client Side Rendering 的應用越來越大時，我們通常會開始思考，能不能把原本一次載入的內容拆得更小，等到真正需要時再下載，避免初始載入過多 JavaScript，拉長畫面呈現的時間。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-09-28T14:44:46.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 13：從 Router Event 到 Signal]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-13/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-13/"/>
        <updated>2026-09-27T12:37:55.000Z</updated>
        <summary type="html"><![CDATA[路由狀態管理在前端開發中比較少被單獨拿出來討論，但在 Angular 裡，一次路由導航其實會經過不少階段，也會在過程中發出不同的 Router Event，例如 NavigationStart、NavigationEnd…]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-09-27T12:37:55.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 12：從 httpResource 到 TanStack Query，認識 Server State]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-12/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-12/"/>
        <updated>2026-09-26T15:35:12.000Z</updated>
        <summary type="html"><![CDATA[前面我們花了不少時間討論，為什麼「請求本身的狀態」和「元件的顯示狀態」應該分開處理。]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-09-26T15:35:12.000Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[Day 11：用 rxResource 串起 Observable 與 Resource]]></title>
        <id>https://antonio-ling.com/ithome-2026-day-11/</id>
        <link href="https://antonio-ling.com/ithome-2026-day-11/"/>
        <updated>2026-09-25T14:42:04.000Z</updated>
        <summary type="html"><![CDATA[前面介紹了不少 Resource 到 httpResource() 的應用。不過在 Angular 開發中，Observable 與 RxJS 仍然是很常見的非同步資料處理方式，像是 switchMap、map、debo…]]></summary>
        <category label="iThome 鐵人賽" term="iThome 鐵人賽"/>
        <category label="Angular" term="Angular"/>
        <category label="2026 鐵人賽" term="2026 鐵人賽"/>
        <published>2026-09-25T14:42:04.000Z</published>
    </entry>
</feed>