2018 Angular Taiwan 論壇筆記

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 addng update就是Schematics的使用的例子。

如何開發

這不外乎就是程式碼的CRUD了,他有三個重點元件,參考至Kevin Yang關於Schematics的說明文件

  • Tree: 是檔案系統的結構描述,包含檔案的狀態與改變檔案的規則 (Rule)
  • Source: 是一個建立空的新 Tree,常見的方法有 Url(path)
  • Rule: 是描述要如何改變 Tree,所以 Rule 會回傳一個包含改變規則的 Tree

如何增進schematics的技能

剛剛有說過Angular CLI的ng addng 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說明
1. Create
2. Config
3. Attach->ComponetnPortal->動態產生Component要放到AppModule的entryComponent內
4. Detach->PortalInject->OverlayRef.detach

搭配Drag&Drop

這裡裡要說明關於Drag&Drop的Dialog關鍵的幾個字

  1. cdkDrag: Drap&Drop的關鍵字
  2. cdkDragRootElement->要一起移動OverlayRef
  3. cdkDragHandle->透過這元件可以設定只有在點擊到這部分才可以拖拉。

結語

在論壇最後讓筆者覺得收穫良多的一點是保哥所分享的如何增進Angular能力的方法,那就是透過套件的原始碼來學習Angular,沒想到學Angular不需要花大錢花時間去學習,透過身邊的套件如Angular Material、Angular CLI、ng-zorro就可以學到如何撰寫Angular。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *