Angular Taiwan
Angular Taiwan 論壇今天展開，這次的議程筆者比較在意的有三個部分，這三個部分都有個共通點，那就是如何當個懶惰的工程師，所以我們今天就來談談如何透過 Angular 來做一個懶惰的工程師吧。
Angular Material – Will保哥
這個函式庫對於像筆者這種程式開發為主外加美術很弱的人來說是一大福音，透過 mat-xxx 的關鍵字就可以簡單實作一個 Form、Navigation 之類的功能，相關元件可以看 Angular Material官網 ，在這部分保哥分享的是一些新功能如下列所示：
Virtual Scroll
簡單幾個關鍵字完成實作捲動動態載人功能。詳細內容可以看Virtual Scrolling範例。
Drag&Drop
簡單幾個關鍵字完成實作拖移功能。詳細內容可以看Drag＆Drop範例。
select
除了 mat-select 之外，現在也支援原生下拉選單 select 。詳細內容可以看 Select範例。
Angular Elements – Will保哥
這個功能也很直得推薦，因為開發到後面會不斷重複的使用某些 Components ，所以透過這函式庫可以把那些常用的 Components 獨立出來透過像 Library 一樣提供給其他 App 使用，所以說其功能簡單講就是將 Angular 元件封裝成自訂元素，甚至於可以把 AngularJs 封裝後放到 Angular ，相關內容可以先看一下 Angular Elements。
slot
這部分說明透過 Angualr Elements 可以將元件的內容綁定到宣告 slot 的元件上面，簡單說明 slot 就是提供一個插槽由其他自訂元素內的內容差到宣告 slot 的元件身上。詳細內容可以參考 Slot Example。
優點
可以將 Angular 就不在只是可以在 Angular 的專案用，而且可以放到 vue、react 使用，或者是將 AngularJs 封裝放到 Angular 內。
缺點
目前尚未完善，有些瀏覽器 (EDGE) 尚未支援，還有目前打包 Bundle 有點大。
Schematics – Kevin Yang
Schematics 是什麼東西呢，如何透過它來當個懶惰工程師呢，筆者舉個例子好了，上面講的 Angular Elements 是可以透過它建立好自訂元件提供給其他專案使用，對於 Schematics 來說它就是程式碼的 Angular Elements ，可以透過 Schematics 來幫助我們產生程式碼範本。
如何使用
這功能大家可能不太會寫，但是大家可能常常在用卻不知道，其實 Angular CLI 的 ng add 跟 ng update 就是 Schematics 的使用的例子。
如何開發
這不外乎就是程式碼的 CRUD 了，他有三個重點元件，參考至 Kevin Yang 關於 Schematics的說明文件
- Tree： 是檔案系統的結構描述，包含檔案的狀態與改變檔案的規則 (Rule)
- Source： 是一個建立空的新 Tree，常見的方法有 Url(path)
- Rule： 是描述要如何改變 Tree，所以 Rule 會回傳一個包含改變規則的 Tree
如何增進schematics的技能
剛剛有說過 Angular CLI 的 ng add 跟 ng update 就是 Schematics 的使用的例子，所以從哪裡學最快，那就是 Angular CLI 的 Github
angular-cli/packages/schematics/，帶之後筆者實際操作後再分享給大家如何操作了。
Angular CDK – Mike Huang
首先先說明與 Angualr Material 的差別是 Angular CDK 著重在於實現互動的功能，而 Angualr Material 著重在於樣式的顯示。這部分講者說明如何使用 Angualr CDK 實作一個 Dialog
實作一個Dialog
使用 Overlay 上面放一個 Dialog 的 Component 即可，而其主要得步驟可分成以下個部分，詳細內容可以看 Overlay說明：
- Create
- Config
- Attach->ComponetnPortal->動態產生Component要放到AppModule的entryComponent內
- Detach->PortalInject->OverlayRef.detach
搭配Drag&Drop
這裡裡要說明關於 Drag&Drop的Dialog 關鍵的幾個字
- cdkDrag: Drap&Drop的關鍵字
- cdkDragRootElement->要一起移動OverlayRef
- cdkDragHandle->透過這元件可以設定只有在點擊到這部分才可以拖拉。
結語
在論壇最後讓筆者覺得收穫良多的一點是保哥所分享的如何增進 Angular 能力的方法，那就是透過套件的原始碼來學習 Angular ，沒想到學 Angular 不需要花大錢花時間去學習，透過身邊的套件如 Angular Material、Angular CLI、ng-zorro 就可以學到如何撰寫 Angular 。