Angular CLI 團隊所開發的 Schematics 工具，讓 Angular 在開發上多了無限的可能性，目前已經有許多的套件都將 schematics 視為標準的操作流程，透過 schematics 來減少程式碼初始化的時間。那企業該如何透過 Schematics 來幫助團隊更有效的開發系統呢，透過本次的分享，能讓大家更能瞭解 Schematics 的奧妙之處

2. 改善 Angular 開發流程
你所不知道的 Schematics 程式碼產生器
Angular Taiwan
楊捷凱 (Kevin)
Blog：https://blog.kevinyang.net/
FB Page：https://www.facebook.com/CKNotepad

3. 楊捷凱 (Kevin)
• 微軟 MVP
• Angular / Web Technologies GDE
• Blog：https://blog.kevinyang.net/
• FB Page：https://www.facebook.com/CKNotepad
• Organizers:
• Angular Taiwan
• Angular Girls Taiwan
• Angular 線上讀書會

4. 緣由
故事時間

5. 為什麼要有程式碼產生器
• 快速初始化起始專案
• 重複建立相類似的檔案架構，而且重複很多次、很多次
• 統一團隊專案架構與檔案內容
• 開發人員是很懶惰的

6. 程式碼產生器
• IDE Code snippet
• Ember CLI
• Yeoman
• dotnet project templates

7. Angular CLI 歷史
• 早期版本，因架構在 Ember CLI 上，所有的範本都是內建寫死，使用者並無法自
行定義
• Angular Team 開發新架構 @angular/dev-kit (schematics)
• CLI 1.4 版使用 schematics 來產生樣版
• 允許使用其他 schematics 來產生樣版。例如: 設定 collection
• 眾多套件開始建立自己的 schematics。例如: Angular Material
• Angular CLI 6. Schematics 威力完全引爆
• ng add 與 ng update 讓 Angular 開發進入到另外一個世界

8. Schematics 使
用篇
在寫之前，先知道怎麼用

9. Angular Material
案例 1

10. 如何安裝 Angular Material (傳統方式)
• Step 1: Install Angular Material, Angular CDK and Angular Animations
• Step 2: Configure animations
• Step 3: Import the component modules
• Step 4: Include a theme
• Step 5: Gesture Support
• Step 6 (Optional): Add Material Icons
• Done

11. 如何安裝 Angular Material (Schematic)
• Step 1: ng add @angular/material
• Done

12. 如何升級 Angular Material ?
• Step 1: ng update @angular/material
• Done

13. NG-ZORRO
案例 2

14. NG-ZORRO 文件

15. 更多案例
• @ngrx/schematics
• ngcli-wallaby
• cypress-schematics
• ngx-schematics-collection

16. Schematics 101
基本概念介紹

17. 目標
• 簡單開發及使用
• 可擴充性與重複使用性
• 原子性 (Atomicity)
• 非同步 (Asynchronicity)

18. 特性
• Workflow：專案從一個狀態轉換成另外一個狀態
• Compose ：具有豐富 API 來處理檔案變更，容易組合
• No Side Effect ：確認所有步驟正確才更新，沒有副作用

19. 基本觀念 - 新增
A
B
C
D
E
A
B
C
D
E

20. 基本觀念 - 修改
A
B
C
A
B
C'
C'

21. 基本觀念 - 刪除
A
B
C
A
B
C

22. 基本元素
• Tree：檔案系統結構描述，包含檔案狀態與改變檔案的規則(Rule)
• Rule：規則描述如何改變 Tree，會回傳一個包含改變規則的 Tree
• Source ：建立新 Tree，常見方法有 Url(path)

23. Tree
• 包含目前資料夾下所有的檔案與資料夾內容

24. Tree
• 常見方法
• branch() 複製一份與目前 Tree 狀態相同的 Tree 物件
• merge() 合併兩個 Tree ，可設定合併衝突時的規則
• read(path: string) 讀取檔案已 binary 的方式呈現
• exists(path: string) 檢查檔案是否存在
• create(path: string, content: Buffer | string) 建立檔案並
填入內容
• delete(path: string) 刪除檔案
• rename(from: string, to: string) 重新命名檔案

25. Source
• 建立一個全新的檔案系統 ( Tree )

26. Source
• 常見方法
• url(path: string)
• apply(source: Source, rules: Rule[]) 套用規則到 Source 上
並回傳已套用規則的 Source
• source(tree: Tree) 將 Tree 轉換成 Source
• (source 型別)(context: SchematicContext) 將 source 轉換成
Tree

27. Rule
• 定義改變Tree 狀態的規則
• 多個規則間可以合併
• 常見的方法有
• chain
• mergeWith
• filter
• branchAndMerge
• forEach
• move
• rename
• template

28. Schematics 開
發篇
No more 加班人生

29. 安裝 Schematics CLI
schematics [CollectionName:]SchematicName [options, ...]
By default, if the collection name is not specified, use the internal collection provided
by the Schematics CLI.
Options:
--debug Debug mode. This is true by default if the collection is a relative path (in that case, turn off
with --debug=false).
--allowPrivate Allow private schematics to be run from the command line. Default to false.
--dry-run Do not output anything, but instead just show what actions would be performed. Default to true if debug is
also true.
………
> npm install -g @schematics/schematics
> schematics --help

30. 建立 schematics 專案
> schematics blank --name=hello-world
(最基本的專案範本)
> schematics schematic --name=my-schematics
(比較複雜的專案範本)
> schematics .:hello-world
(執行 schematics)

31. 執行 & 測試
> npm install ../my-schematics
> ng generate my-schematics:my-schematics
(Angular CLI 專用指令: 執行某個 schematics)
> ng set defaults.schematics.collection=my-schematics
(Angular CLI 專用指令: 設定預設 schematics)
> schematics my-schematics:my-schematics

32. 專案架構
package.json
Schematics 進入點

33. 專案架構
collection.json
Collection
(Scheamtics的集合)

34. 專案架構
collection.json
Schematic
(Generator)

35. 專案架構
collection.json
指令
指令所觸發的程式碼位置
指令描述

36. 專案架構

37. 專案架構
執行指令時所帶參數，轉成 Object
格式

38. DEMO

39. 相關連結
• Schematics—An Introduction
• ngHouston - CLI Schematics w/ Hans Larsen
• ngAir 134 - Angular Schematics with Mike Brocchi
• [Angular] Schematics 內檔案系統基本操作

40. 聯絡資訊
• CK's Notepad (部落格)
• https://blog.kevinyang.net/
• CK's Notepad (臉書粉絲專頁)
• http://www.facebook.com/CKNotepad
• Twitter
• https://twitter.com/chgc

41. THANK YOU