此為六角線上直播「大神來六角」所用的投影片講義

1. Angular 從入⾨到實戰

2. • 「Angular 深入淺出三⼗天」
• 「Angular Schematics 實戰三⼗天」
• Perkd Taiwan
陳志龍（Leo 李歐）

3. • 現代前端？古代前端？
• 前端三⼤框架？
• Angular ? AngularJS ？
• Why Angular ？
• Q&A
⼤綱

4. 現代前端？古代前端？

5. 現代前端？古代前端？

6. 現代前端？古代前端？

7. 現代前端？古代前端？

8. • MPA（Multi-page application）
• ⼀個功能會有⼀個動作及⾴⾯
• ⼀個需求⼀個畫⾯
現代前端？古代前端？

9. 現代前端？古代前端？

10. 現代前端？古代前端？
AJAX

11. 現代前端？古代前端？
Asynchronous JavaScript And XML

12. • SPA（Single-page application）
• 部分更新
• 前後端分離
• 提供User更偏向Desktop/Mobile application的使⽤經驗
現代前端？古代前端？

13. 現代前端？古代前端？
MPA SPA
優點 SEO較好
避免整個⾴⾯重load
前後端分離
更好的使⽤者體驗
缺點
每次更新需整個⾴⾯重load
使⽤者體驗較差
前後端相依性較⾼
SEO較差

14. 前端三⼤框架？

15. 前端三⼤框架？
A JavaScript library for building user interfaces

16. 前端三⼤框架？
• 框架 = ⼯具
• 選擇適當的⼯具才能事半功倍

17. Angular ? AngularJS ？

18. Angular ? AngularJS ？

19. Angular ? AngularJS ？

20. Angular ? AngularJS ？
2

21. Angular ? AngularJS ？
• Angular 1.x -> 正名：AngularJS
• Angular 2+ -> 正名：Angular

22. Angular ? AngularJS ？

23. • 偵測變更比 AngularJS 快10倍
• 更⼩的 Library Size 與延遲載入機制
• ⽀援 Template 預先編譯機制
• 渲染速度比 AngularJS 快5倍
• ⽀援伺服器渲染機制
Angular ? AngularJS ？

24. Why Angular ？

25. • ALL-IN-ONE
• 跨平台
• 開發⽅式⼀致且有完整、完善的規範
Why Angular ？

26. Why Angular ？

27. 前端三⼤框架？

29. Q&A

30. 相關連結
Angular Taiwan 臉書社團 Angular Taiwan 論壇
Angular Taiwan 線上讀書會社團 Angular Taiwan Youtube 頻道

31. 感謝收看