此投影片為我在 Angular Meetup #6 中所分享， 希望大家能夠透過此次的分享，初步認識與學會如何開發 Schematic。

1. Schematics 實戰

2. • 「Angular 深入淺出三⼗十天」系列列⽂文作者
• Perkd Taiwan
• 「⾼高效 Coding 術：Angular Schematics
實戰三⼗十天」系列列⽂文作者
陳志龍（Leo Chen）

3. 世界上最寶貴的資源...

4. 時間

5. •Schematics？
•Schematics 的應⽤用
•實作第⼀一個 Schematic
•為 Schematic 撰寫測試
•TypeScript Compiler API
⼤大綱

6. Schematics？

7. 圖片來來源：https://medium.com/rocket-fuel/angular-schematics-simple-schematic-76be2aa72850

8. 程式碼產⽣生器

9. Ember CLI
Angular CLI

10. Schematics
Angular CLI v1.4

12. Schematics 的應⽤用

13. ng new
ng add ng update
ng generate

14. ng new
ng add ng update
ng generate

15. ng new
ng add ng update
ng generate

16. ng new
ng add ng update
ng generate

17. ng new
ng add ng update
ng generate

18. 實作第⼀一個 Schematic

19. npm install -g @angular-devkit/schematics-cli

20. schematics blank —name=hello-world
npm install -g @angular-devkit/schematics-cli

21. src/collection.json

31. npm run build

32. npm run build
schematics .:hello-world —name=leo

33. npm run build
schematics .:hello-world —name=leo
CREATE /hello-world.html

34. schematics .:hello-world —name=leo —dry-run=false

35. 為 Schematic 撰寫測試

36. ERROR!!

42. TypeScript Compiler API

45. 42 + 50

46. [
“a”,
“b”
]

47. ⾼高效 Coding 術：Angular Schematics 實戰三⼗十天

48. • 官⽅方⽂文件（英⽂文版）
• 官⽅方⽂文件（中⽂文版）
• Schematics — An Introduction
• [Angular] Angular Schematics
參參考資料

49. • 改善 Angular 開發流程：你所不知道的 Schematics 程式
碼產⽣生器
• [Angular] Schematics 內檔案系統基本操作
• Schematics for Libraries
• Total Guide To Custom Angular Schematics
參參考資料

50. • 玩轉 Schematics - Modern Web 2018
• [TypeScript] Compiler API 第⼀一次接觸
• 使⽤用 Schematics ⾃自定义 ng generate
• 深入Angular：使⽤用Schematics编写Angular代码⾃自动⽣生成器
參參考資料

51. • 浅谈Angular Cli Schematics
• Angular Schematics: Simple Schematic
• Use Angular Schematics to Simplify Your Life
• Angular Schematics Tutorial
參參考資料