從零開始的Angular教學

Angular 入門,

引言

此處紀錄使用到現在的經驗總結。因為己有數年 React 經驗故以此比較優缺點。未來也許會改觀也不一定。

參考文章

從零開始的Angular教學 - HackMDHackMD

Angular 特性 & 優勢

與 Angular 特性玩全相反的 React 比較。

	Angular	React
特性	除了前端核心函式庫外還包函了企業應用基本套件。	只有前端核心函式庫。
語言	Typescript	JavaScript / Typescript
內函/指定套件	core, routring, data-service, http-client, rxjs, etc.	core, hooks
npm 套件支援度	基本上各類問題都只有一個或沒有。	各類問題多種選擇。
CLI	Angular CLI / ng	npx
依賴注入 Injection	有	無
CSS Framework	Angular Material, 只有一套官方推薦。	@MUI, 等等數種選擇。
命名規則	多種（依情況）	小駝峰命名法
指令/語法變異度	極少。基本上向前相容。	必要的話就換，且不考慮向前相容性。不過自 v16.8 到現在 v19 都沒有異動。
應用廣度	只有企業 MIS, 中大型APP。	幾乎所有與網站網頁應用都支援。小中大型APP都可。
優點	只用一套方案解決所有問題。 換人維運時交接較容易。因為指令語法極少變動，當換新人維運時就算沒有交接完全，因為解法只有一套，再有前輩協助解讀將更容易。 就算衍算過程傳遞複雜，因為只用 rxjs 傳遞，解讀應該沒問題。	一套語言解決多種應用。 因應不同問題大概都有相應套件解決。 各類網路網頁應用大概都有支援。比如與 LINE 整合。連手機應用 native app 都支援。
缺點 (優點就是缺點)	指令老舊。框架老舊。 只支援企業 MIS 應用。	因為相同問題解法多種。當程式碼可讀性差的時候。交接完整度會降低。 若衍算過程傳遞複雜，導入多種或已過時套件就可能難解。可能進入要改也不是不改也不是的窘境。

論 Angular CLI

依官方 Angular 開發建議，多多使用 CLI 可以省工又省時。

Angular CLI 是官方自豪的部份。不過實際使用時發現根本是 “框架設計不良” 的輔助開發工具。雖如此還是有好用的指令，如：把舊專案元件全面轉成 standalone 元件。

Angular CLI 指令名稱 ng 相當於 react 的 npx 指令且更多面性。除了建立新專案、加入新元件、build/bundle 等等等。

Angular CLI 功能之一包含了安裝 npm 套件並設定 angular.json 中相關組態。例：

# 用 ng 指令安裝套件 @angular/material 並設定 angular.json 相關組態
# 若用 npm 安裝是不會設定相關組態的。
ng add @angular/material

參考：Angular v17: CLI Overview and Command Reference

請多多利用ng generate 指令建立各類物件，尤其是 Component 與 Data Service 因為需把這些物件一併註冊到 app.module.ts 才能後序注入。

用 ng 指令建立物件

ng generate component foo-bar   #=> 產生 FooBarComponent.ts 與相關檔案與註冊。
ng generate service foo-data    #=> 產生 FooDataService.ts 與相關檔案與註冊。

---

論 Standalone 元件

以現在(v17+)來說 standalone 元件用途只在 Lazy-loading components。

Angualr Standalone 元件是在 v15.2 版加入為了簡化當時框架冗餘問題、code splitting 需求、lazy loading 需求。這些問題與需求到了 v17+ 又有新解法已不用全面使用 standalone 模式的元件。

預設沒有啟用 standalone 模式，若沒有 lazy-loading 需求也不用啟用。

---

論 NgModules

NgModules 是 Angular 的賣點，若使用得好可以完全發揮所有優勢。但實際上很難用，真的很難用，真的真的很難用。所幸到了 17 版前進行（統一）簡化。把 NgModules 全部集中到 app.module.ts 統一總管。若沒有進階的需求其實就統一在一起就好了。真是鬆了一口氣。

(EOF)