Angular 創立新專案的時候要考慮的點
Angular要創立新專案,要考慮周詳,因為很多東西創立以後要改動,會需要下很多的指令,甚至沒弄好會導致專案爆掉。這篇就CSS框架、UI庫還有相依性的管理來討論新專案創建的時候要哪些考量。
CSS框架
Angular基本上如果不是超強的一個CSS高手,大概要有一個CSS框架來協助排版。排版不好的程式在第一眼印象上就輸別人了,所以好的程式也要有好的外觀才會賣座。
CSS框架,我是選擇PrmeFlex或者Tailwind CSS,這個一決定以後要改動大概重寫一個專案比較快。
但很多人應該會選擇Open Souce又MIT License的Bootstrap。
這點就看個人對於CSS框架的喜好了,比如命名方式與語法。還有最重要的是對於UI庫的相容性。
像如果我要使用PrimeNG,那我不可以選擇Tailwind CSS當CSS框架,因為這樣等於就有兩個CSS框架,PrimeNG內建的是PrmeFlex。
就算不產生CSS的衝突檔案也會變得大,這有違程式設計的美學。
UI庫
其實我在考量UI庫的時候,會優先考慮所謂的Modal(不是Model,是類似彈出視窗),如果要做資料展示會考慮Chart和Grid(或者是Table、DataTable)。
接著會考慮日期選擇器的部分,如果不想要像我上一個專案自己寫一個完整的日期選擇多功能控制項,日期選擇器可以輕鬆運用是很重要。
Modal的部分,要容易使用才可以將瀏覽器的Alert()等內建對話視窗降到最低,因為這個相當不美觀。
在這裡我使用過兩種Angular Material和PrimeNG,整體而言在Modal部分容易使用是PrimeNG比較簡單。
如果使用Bootstrap可以考慮ngx-bootstrap,UI庫一決定好,要換也重也一個專案比較快。
相依性的部分
如果要做多國語言版可能要考慮i18n之類的,如果要轉Excel要考慮加上ExcelJS,如果要做到加密演算,可能要CryptoJS。
這些大致上在創立專案的時候最好就全部先加進去了,用到的時候再加,專案一定要整體備份一份,再做npm install的指令,不然爆掉有可能就毀了。
要先規劃好程式的功能,然後需要的相依性,就知道有哪些,比如Angular Material沒有Chart,那可以考慮用Apex-Chart,用手畫一張線圖出來,就知道有哪些必要的。
考慮Angular的版本
當然新的Angular版本會令人嚮往,但也要考慮UI庫等組建有沒有支援到最新的,如最近可能出道17版,但如果PrimeNG還沒更新到支援Angular 17,那創建專案就要重創了。
結論
Angular創新專案是要好好規劃的,如果沒有好好規劃,相依相會亂七八糟,然後可能用了自己不想用的CSS框架或者UI庫,結果導致要重寫,或寫的很不順手。