本議程將要來聊聊 Angular v16 裡開始才有的 「Signal」。首先，我會簡單帶大家認識一下 Angular 和 Signal 的基本概念，以及它能為我們的開發帶來哪些好處。接著，我們要深入了解（其實由於時間關係，只能淺淺了解） Signal 在 Angular 中的實作。最後，透過一個實戰的範例，讓大家看看如何運用 Signal 來輕鬆搞定資料更新和元件之間的溝通。無論你是新手還是老手，這個議程都能讓你對 Angular 和 Signal 機制有更深刻的認識！

1. 2023/07/29
Angular 原始碼探索之
Signal 篇

2. Leo 李歐
陳志龍
• LILEE Systems - Front-End Manager
• Angular Taiwan 社群管理員
• 前端精神時光屋 3rd 前端評審
• ⼤神來六⾓ 2020/2021/2022
• 「Angular 深入淺出三⼗天」
• 「Angular Schematics 實戰三⼗天」
• 「Angular 深入淺出三⼗天：表單與
測試」

3. • Angular 簡介
• Signal 機制概述
• Signal 帶來的優勢
• Signal 在 Angular 中的實作
• 實戰範例
Agenda

4. • FE Framework (Google)
• High e
ffi
ciency
• Developer friendly
• All in one
Angular 簡介

5. Signal 機制概述

6. Signal 帶來的優勢

7. 圖片來源：Angular 🚦 Signals 📡 (The future of Angular)

8. 圖片來源：Angular 🚦 Signals 📡 (The future of Angular)

9. 圖片來源：Angular 🚦 Signals 📡 (The future of Angular)

10. • 強化狀態管理
• 提升程式的可讀性和可維護性
• 強⼤的非同步處理能⼒
• 更好的性能
• 提升開發效率
Signal 帶來的優勢

11. Signal 在 Angular 中的實作

20. 實戰範例

24. Q & A

25. • Angular & signals. Everything you need to know.
• Angular 🚦 Signals 📡 (The future of Angular)
• Angular OnPush Change Detection and Component Design -
Avoid Common Pitfalls
• The Evolution of Signals in JavaScript
• Building a Reactive Library from Scratch
• Angular Signal Source Code
References

26. Thank you!!