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

1. Angular 從入⾨到實戰 - 核⼼八元素（上）

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

3. • 開發環境與專案建置
• 核⼼八元素？
• Modules、Components、Metadata、Template、Data binding
• Q&A
⼤綱

4. 開發環境與專案建置

5. 開發環境與專案建置

6. 開發環境與專案建置

7. 開發環境與專案建置
NVM

8. 開發環境與專案建置
Node Version Manager

9. 開發環境與專案建置
Angular CLI

10. 開發環境與專案建置

11. 開發環境與專案建置開發環境與專案建置
VS Code

12. 開發環境與專案建置開發環境與專案建置

13. 開發環境與專案建置開發環境與專案建置
Augury

14. 開發環境與專案建置開發環境與專案建置

15. 核⼼八元素？

16. 核⼼八元素？
• 模組（Module）
• 元件（Component）
• 樣板（Templete）
• 中繼資料（Metadata）
• 數據綁定（Data binding）
• 指令（Directive）
• 服務（Service）
• 依賴注入（Dependency injection）

17. Module

18. Module
• 模組
• NgModule
• AppModule（Root Module）

19. Module

20. Module
匯入模組

21. Module
類別

22. Module
裝飾器

23. Module
此模組需要的其他模組

24. Module
需要使⽤哪些Service

25. Module
聲明屬於此模組的元素
Component
Directive
Pipe

26. Module
此模組有哪些元素可以被其他模組使⽤
Component
Directive
Pipe
AppModule 不會有 exports !!

27. Module
RootModule 專屬

28. Component

29. Component
• 元件

30. Component

31. Component
匯入模組

32. Component
Class

33. Component
裝飾器

34. Component
<my-app></my-app>

35. Component
推薦

36. Component
不推薦

37. Metadata

38. Metadata
• 中繼資料
• 裝飾器的參數

39. Metadata
裝飾器

40. Metadata
裝飾器

41. Metadata

42. Metadata

43. Metadata

44. Template

45. Template
• 樣板
• 透過樣板來定義元件的視圖

46. Template

47. Stackblitz
Template

48. Template

49. Template
插值表達式

50. Template

51. Template

52. Template

53. Template

54. • 不⽀援位元運算「|」和「&」
• 函式（ count();）
• Pipe（item | json）
• 可在插值表達式裡做的事：
• 賦值（ = , +=, -=, … ）
• 「new」運算符（new Date()）
• 使⽤「;」或「,」的鏈式表達式
• ⾃增或⾃減操作符（++ 和 —）
Template

55. Data binding

56. Data binding
• 資料綁定

57. Data binding
COMPONENT
TEMPLATE
{{ value }}
[property]=“value”
(event)=“handler”
[(ngModel)] = “property”

58. Data binding

59. Data binding
<input [ngModel]=“hero.name”>
<input (ngModelChange)=“handler($event)”>

60. Data binding

61. Data binding

62. Q&A

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

64. 感謝收看