這些年，我寫 Angular 時所使用的小技巧

1. [Taipei]
Leo 李歐（陳志龍）
FE Lead, LILEE SYSTEMS
這些年，我寫 Angular 時所
使用的小技巧

2. 技巧一
要用的時候才 import

4. 未 import 前 Import 後

5. 技巧二
善用 Pipe

10. 技巧三
一定要學會寫測試

11. 有寫測試的好處
1. 寫壞了很快就知道
2. 節省測試與除錯的時間
3. 提高程式碼品質
4. 甩鍋時候很好用

12. “你就是不寫測試才會沒時間”

13. 技巧四
一定要學會用 RxJS

14. RxJS 好用在哪裡？
1. 宣告式（FP）
2. 可讀性高
3. 容易被測試
4. 與 Angular 整合度超級高
5. 延後執行

15. 一般 coding 的方式
範例來源：認識函式語言程式設計 - Functional Programming

16. RxJS 的方式 (FP)
範例來源：認識函式語言程式設計 - Functional Programming

17. 延後執行 (currying)
參考資料：Functional Programming 常用基本技巧及應用與 RxJS 應用

18. Source Data
{
… (10個欄位的資料)
}
Component A
Component B
Component C
Component D
A 處理
{
… (8個欄位的資料)
}
B 處理
{
… (5個欄位的資料)
}
C 處理 {
… (3個欄位的資料)
}
D 處理
{
… (1個欄位的資料)
}

19. 技巧五
善用 AsyncPipe

20. Source Data
{
… (10個欄位的資料)
}
Component A
Component B
Component C
Component D
A 處理
{
… (8個欄位的資料)
}
B 處理
{
… (5個欄位的資料)
}
C 處理 {
… (3個欄位的資料)
}
D 處理
{
… (1個欄位的資料)
}
| async
| async
| async
| async

21. 用 AsyncPipe 的好處
1. 少寫不少 code
2. Angular 會幫忙訂閱/解除訂閱
3. 可以享受甜甜的語法糖

22. 技巧六
一定要學會用
HttpIntercepetor

23. API Server
API Service API Service API Service
Set token
Set token
Set token
Handle exception
Handle exception
Handle exception

24. HttpInterceptor
API Server
API Service API Service API Service
Set token
Handle exception

25. FB粉絲專頁 - Leo’s Coding Life FB社群 - Angular Taiwan Angular Taiwan 論壇

26. Thank you