iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
2
Modern Web

Angular 全集中筆記系列 第 2

第 2 型 - Angular CLI

在開發 Angular 應用程式時,會利用 Angular CLI 進行工作空間 (Workspace) 的建立,以及各項元件的開發、測試與佈署。本篇將針對 Angular CLI 的安裝與其指令進行說明,並利用 CLI 來建立一待辦事項的專案,以供未來實作 Angular 觀念之用。

Angular CLI 安裝

安裝 Node.js

在安裝 Angular CLI 前尚需要先安裝 Node.js,可以利用 node --version 來確認是否有安裝,以及所安裝的版本,如下圖,目前我安裝的版本是 13.14.0。

Nodejs Version

若還沒有安裝時,可以至 Node.js 官網下載。官網上提供了最新版本是 14.8.0,以及長期支援版本是 12.18.3,可以依自己的需求選擇。

Node.js Website

長期支援 (Long-Item support, LIS) 版本是一種軟體的產品生命週期,代表不會針對此版本進行新特性 (Feature) 的開發,但會修復程式 Bug 或安全性進行修改。

安裝 Angular CLI

安裝完 Node.js 後,就可以利用 NPM 將 Angular CLI 安裝到電腦裡。在終端機下輸入 npm install --global @angular/cli

Install CLI

  1. 如果要在 mac 上安裝 Angular CLI 需要加入 sudo 來切換至管理員帳戶才有權限夠安裝。
  2. NPM (Node Package Manager) 是 Node.js 預設使用的軟體套件管理系統。針對較常用的指令有提供較精簡的縮寫,例如 install 可以縮寫成 i--global 則為 -g,因此指令就可以用 npm i -g @angular/images

檢查確認

安裝完 Angular CLI 之後,我們在終端機透過 ng --version 可以查詢 Angular CLI 的版本。

CLI Version

該指令會顯示下列三種資訊:

  1. Angular CLI / NodeJs / OS 版本資訊。
  2. 已安裝 Angular 套件(依 package.json 檔案內容為主),當 Angular CLI 的版本為 10 時,還會顯示是否為 Ivy 環境。
  3. 已安裝的 Angular 開發用的套件與版本資訊。

需要注意的地方,這個指令所顯示的內容,是會依執行指令的路徑是否為 Angular 工作空間而所不同。上圖是在非 Angular 工作空間的路徑下執行,因此所顯示的結果是全域的套件與版本,且在第二部分並沒有顯示資訊。下圖則是在 Angular 工作空間的路徑下執行,結果就顯該方案相關的套件與版本。

CLI Version

另外,也可以利用 npm list -g --detph=0 來檢查透過 NPM 在全域所安裝的套件,因為不需要查詢套件所依賴的其他套件,所以加入 --depth 參數來限制查詢的層級。

NPM Global List

Angular CLI 命令

Angular CLI 針對開發 Angular 應用程式的不同階段,提供了各種簡化作業的指令,可以透過 ng help 來查詢 Angular CLI 提供的所有命令。若要知道特定命令的使用方式,則可以利用 ng <command> --help 語法進行查詢。

CLI Helpe

接下來,依各開發階段所使用的命令進行說明。不過因篇幅的關係,部份的命令會未來的文章有較完整的說明。

Angular 工作空間建立

ng new <名稱> [參數]
-- 或 --
ng n <名稱> [參數]

透過 new 命令,可以在當下目錄建立一個 Angluar 工作空間 (Workspace),並初始化 Angular 專案所需要的配置,未來也可以修改 angular.json 檔案來變更配置。順帶一提,Angular CLI 對較為常用的命令提供了縮寫,所以也可以利用 ng n <名稱> <參數> 來減少輸入的字元。

工作空間 (Workspace) 是用來放置一個或多個 Angular 專案或函式庫的檔案目錄。

CLI Help

專案初始化

利用此指令建立的工作空間,預設會初始化一個 Angular 應用程式專案,Angular CLI 除了會透過 NPM 安裝必要的套件外,還會利用 Git 進行版本控制,並做第一次的提交 (commit)。利用 --createApplication=false 可以建立一個空的 Angular 工作空間,再依照需求建立應用程式 (application) 或函式庫 (library)。若想要透過如 yarn 等其他套件管理工具來安裝所需的套件,可以利用 --packageManager 參數指定。而參數 --skipInstall=false--skipGit=false--commit=false 則可以取消套件的安裝、Git 版本控制與提交。

頁面與樣式

Angular 以元件 (Component) 來開發單位,封裝了應用程式的頁面、樣式與邏輯,而預設上 Angular 元件會將這三部份拆分至 HTML、CSS 與 TypeScript 三種檔案之內。參數 --inlineTemplate=true--inlineStyle=true 可以讓頁面與樣式都放在 TypeScript 檔案中。另外,Angular 除了支援 CSS 樣式,也可以利用 --style 參數指定 SCSS、SASS、LESS 或 stylus 等樣式檔案格式。在 Angular CLI 的互動模式(--interactive=true)下,若未指定此參數時,Angular CLI 會在執行命令前進行詢問。

路由

當利用 Angular 開發單一頁面應用程式 (Single-Page Application, SPA),就會使用路由機制來實作頁面之間的切換。利用 --routing=true 參數可以建立路由模組。如同樣式檔格式,在 Angular CLI 的互動模式下,若未指定此參數時,Angular CLI 會在執行命令前進行詢問。

單一頁面應用程式 (Single-Page Application, SPA) 不同於早期網頁程式,整個應用程式只有一個頁面,透過 Ajax 與伺服器溝通並更新部分網頁資料。

測試

Angular 官方建議利用 Jasmine 框架與 Karma 來撰寫與執行元件的測試程式,以驗證元件的正確性,因此在專案建立時會一併安裝相關的測試套件,並在 Angular CLI 建立各項元件時,預設會新增元件測試的規格檔案 (*.spec.ts)。若想改用如 Jest 等其他測試框架,就可以使用 --minimal=true 參數取消安裝預設的測試框架,之後在手動加入所需的測試框架。參數 --skipTests=false 則可以取消 Angular CLI 建立元件時新增測試規格檔。

套件安裝

ng add <套件名稱> [參數]

Angular CLI 6 新增了此命令,當套件有提供 Schematics,就可以大大的簡化了在 Angular 專案設定該套件的方式,例外,若需要在專案加入 Angular Material 套件,只需要執行 ng add @angular/material,就可以取代了手動安裝相關套件、設定 Material Icon 與樣式等步驟。

CLI Help

Schematics 是一種程式碼產生器,可以定義程式的樣版,用來快速產生程式碼;無論在建立專案、新增與更新套件以及建立元件時,都可以依樣版定義來新增與修改程式碼,大大增加開發與更新的速度。

啟動 Angular 應用程式

ng serve <專案名稱> [參數]
-- 或 --
ng s <專案名稱> [參數]

此命令會依照 angular.json 的設定編譯與啟動 Angular 應用程式,並監控專案檔案,以在修改檔案後重新編譯與載入。預設透過瀏覽器訪問 http://localhost:4200 路徑來瀏覽應用程式,可以利用 --host--port 指定訪問的路徑與埠號;另外,透過 --open 可以在執行命令時,自動開啟瀏覽器並訪問應用程式。--watch=false--liveReload=false 兩個參數則是可以取消檔案監控與重新載入應用程式頁面。

CLI Helpe

元件建立

ng generate <schematic> [參數]
-- 或 --
ng g <schematic> [參數]

此命令可以依 Angular 提供的 Schematics 來建立檔案,此部份在後續文章會針對不同的類型有較為詳細的說明。另外,如同 ng add 命令,只要套件提供了 Schematics 也可以利用此命令來建立所需要的元件。例如,可以利用 ng generate @angular/material:table <component-name> 來建立一個 Angualr Material 資料表元件。

CLI Help

newaddgenerate 三個命令主要都會新增修改相關的程式檔案,在需要確認命令是否正確的話,可以透過 --dryRun=true 參數來確認命令的執行結果是不是自己所想要的

單元測試

ng test <專案名稱> [參數]
-- 或 --
ng t <專案名稱> [參數]

透過此命令可以執行應用程式中的單元測試檔 (*.spec),來驗證程式的正確性,也可以產生整個應用程式的測試覆蓋率 (Code Coverage)。

CLI Help

E2E 測試

ng e2e <專案名稱> [參數]
-- 或 --
ng e <專案名稱> [參數]

除了單元測試之外,Angular 也可以透過此命令來執行端對端測試 (End-to-End Testing, E2E Testing)。

CLI Help

程式編譯

ng build <專案名稱> [參數]
-- 或 --
ng b <專案名稱> [參數]

當應用程式開發完後,會使用此命令將應用程式編繹成 ECMAScript,並將結果放在 dist/project_name 目錄下,就可以將其佈署到正式環境上。

CLI Help

程式發佈

ng deploy <專案名稱> [參數]

在 Angular CLI v8.3 加入了此命令,不同於 build 命令將應用程式編譯至輸出目錄,可以利用該此命令將程式編譯並佈署至特定環境下。例外,當開發完的應用程式需要佈署至 Azure 上,就可以加入 @azure/ng-deploy 套件,並執行此命令,就會依 angular.json 的配置將程式佈署到 Azure 上。

CLI Help

Linting

ng lint <專案名稱> [參數]
-- 或 --
ng l <專案名稱> [參數]

在團隊開發,為了避免在一個應用程式中出現各種不同的撰寫聯合國風格,而增加程式維護上的難度。常會在專案中加入如 TsLint 或 ESLint 等工具,來統一程式風格。此命令就是在檢查專案下的程式,是否有依 Lint 的規則進行撰寫。

CLI Help

套件更新

ng update [參數]

當應用程式所相依的元件模組有版本更新時,此命令會依模組所提供的 Schematics 檢查並修改專案程式,針對破壞性變更的特性,就可以減少手動修改程式的機會。例如,Angular Material 在第 10 版時,移除了從 @angular/material 引用按鈕元件;當執行 ng update @angular/material 時,除了升級 Angular Material 版本外,也一併將專案內使用到 @angular/material 的引用改成 @angular/material/button,使得更新元件版本的作業十分方便。

CLI Help

利用 Angular CLI 建立待辦事項專案

接下來,我們利用 ng new todo 來建立未來實作所使用的待辦事項專案。

建立待辦事項專案

New Project

由於我們沒有指定參數,Angular CLI 會先詢問此專案樣式格式,以及是否加入路由機制,這兩個設定之後也可以在專案中變更。

啟動 Angular 應用程式

最後,利用 ng serve --open 來啟動專案,當瀏覽器如同下圖開啟了 http://localhost:4200,代表此專案已完成建立。

Website

結論

今天整理了在 Angular CLI 從安裝到開發常使用的指令,並建立了待辦事項專案。下一篇來了解利用 CLI 建立的檔案結構。


上一篇
第 1 型 - 前言
下一篇
第 3 型 - Angular 工作區與專案檔案結構
系列文
Angular 全集中筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言