iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
2
Modern Web

高效 Coding 術:Angular Schematics 實戰三十天系列 第 3

[高效 Coding 術:Angular Schematics 實戰三十天] Day02 - 要學打人,先學挨打

要學打人,先學挨打。

這句話是指剛學武的人在學習怎麼要打人之前,要先學會挨打。知道被打是怎麼一回事之後,自然而然就知道要怎麼打人。當然,這句話其實還有其他方面的涵義,像是挨打其實可以增加自己的抗打能力、挨打的時候可以學習該怎麼防禦等等。但筆者想借鏡的是,在開始學習怎麼寫 Schematics 之前,先來看看 Schematics 的實際應用,知道實際應用的場景之後,才能夠寫出更好用的 Schematics 。

ng new

首先是絕大部分的讀者一定都知道的 ng new 。每當需要建立一個新的 Angular 專案的時候,通常會輸入以下指令來建立專案:

ng new [name] [option]

輸入完成之後, Angular CLI 就會幫你建立完所有應該要有的檔案,並且還幫你安裝好所有相依的套件,而我們只需再輸入 ng serve 指令,就可以看到專案的初始畫面:

Imgur

是不是超棒超貼心的?!想想看,如果未來當你只需要輸入一行指令就能夠建立一個種子專案,並安裝好所有的套件,那能節省多少時間阿?!

上圖的專案初始畫面需將 Angular CLI 更新到 v8.3.0 之後,再使用 ng new 建立專案。

ng add

接著是大多數讀者也可能有用過的 ng add ,這個是 Angular 6 之後才新增的指令,通常用來新增某個 Library 或 Package 到你的專案裡,幫你省下花費在設定上的時間。

例如:

  • 使用 ng add @angular/pwa 讓專案轉變成 PWA 的架構。
  • 使用 ng add @angular/materialAngular Components 加入到專案之中。
  • 使用 ng add @ng-bootstrap/schematicsng-bootstrap 加入到專案之中
  • 使用 ng add @clr/angularClarity Design System 加入到專案之中
  • 使用 ng add ng-zorro-antdNG-ZORRO 加入到專案之中

其他還有非常多可以使用 ng add 的 Schematics,如:

族繁不及備載,有興趣的讀者可以自行研究看看。

ng generate

相較於 ng add一次性ng generate 的使用次數較多,能省下的時間也就較為可觀。但除了我們平常會使用 Angular CLI 原本就有的 Schematics 來產生我們所需的元件之外,還有其他的 Schematics 可以使用嗎?

當然有,例如 Angular Components 在 Angular 6 之後,就提供了以下幾個 Schematics 給開發者們使用:

  • Navigation Schematic
  • Dashboard Schematic
  • Table Schematic
  • [Address form Schematic (Angular Components 7+)
  • Tree schematic (Angular Components 7+)
  • Drag and Drop schematic (Angular Components 7+)

想要使用的讀者,詳細請參閱 Angular Components 的官方文件

除了 Angular Components 外, NG-ZORRO 從 1.8.1 之後也有提供 Schematics 給開發者們使用,詳細請參閱 NG-ZORRO 的官方文件

其他 Generator 類的 Schematics:

ng update

除了上述情境外,有時當我們在使用 Library 如果遇到版本升級時,也會需要花費不少時間在調整相對應的程式碼。但如果只要下一行指令就可以幫你把所有需要調整的地方通通都調整完的話呢?

ng update 就是在做這件事情!只要下了這行指令, Schematics 就能讓你輕輕鬆鬆省下花費在調整這些程式碼的時間,甚至還能幫你一併更新所有依賴的 Library 。

或許很多讀者會覺得,一個專案是能改幾次版?使用頻率有限吧?!

但你想想,如果今天有兩個 Library 讓你選擇,在其他條件都差不多的狀況下,你是會選有針對 ng update 實作相對應的處理的 Library 呢?還是沒有實作的呢?

如果是筆者的話,毫無懸念地會選有實作 ng update 的那個 Library 。

本日小結

希望今天的說明能讓各位讀者感覺到 Schematics 所帶來的便利,畢竟 Angular 提供了這麼棒的工具讓我們使用,也已經有這麼多使用案例與 Library ,不趕快學會怎麼製作就太可惜了!!

明天我們將開始製作自己的第一個 Schematics ,敬請期待!

參考資料


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day01 - Schematics 簡介
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day03 - 第一個 Schematic
系列文
高效 Coding 術:Angular Schematics 實戰三十天32

尚未有邦友留言

立即登入留言