## ✅ 步驟總覽：
1. 使用 `nvm` 安裝 Node.js 與 npm
2. 安裝 Angular CLI
3. 建立 Angular 專案
4. 開發範例元件
5. 打包建置
6. 用 Nginx 或其他方式部署
---
## 🛠️ 步驟 1：安裝 Node.js（使用 nvm）
```bash
# 下載並安裝 nvm：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# 不想重新啟動 shell 時，執行：
\. "$HOME/.nvm/nvm.sh"
# 下載並安裝 Node.js：
nvm install 22
# 核對 Node.js 版本：
node -v # 應會印出 "v22.17.0"。
nvm current # 應會印出 "v22.17.0"。
# 核對 npm 版本：
npm -v # 應會印出 "10.9.2"。
```
---
## 🛠️ 步驟 2：安裝 Angular CLI
```bash
npm install -g @angular/cli
```
確認 CLI 安裝成功：
```bash
ng version
```
---
## 🛠️ 步驟 3：建立一個 Angular 專案
```bash
ng new my-angular-app
```
你可以按 Enter 使用預設選項（如不選 SSR、使用 CSS）
使用 ng-bootstrap 套件
```bash
ng add @ng-bootstrap/ng-bootstrap
```
然後：
```bash
cd my-angular-app
ng serve
```
此時打開瀏覽器 [http://localhost:4200](http://localhost:4200) 就會看到預設畫面。
---
## 🛠️ 步驟 4：新增簡易元件
```bash
ng generate component hello
```
修改 `src/app/hello/hello.component.ts`：
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: `<h2>Hello from Angular!</h2>`,
})
export class HelloComponent {}
```
修改 `app.component.html`：
```html
<h1>My Angular App</h1>
<app-hello></app-hello>
```
---
## 🛠️ 步驟 5：打包（建置專案）
```bash
ng build --configuration production
```
打包完成後會產出 `dist/my-angular-app/` 資料夾，裡面就是可以部署的 HTML、JS、CSS 靜態資源。
---
## 🚀 步驟 6：部署到 Nginx（以 Ubuntu 為例）
### 安裝 Nginx
```bash
sudo apt update
sudo apt install nginx
```
### 複製打包好的檔案
```bash
sudo cp -r dist/my-angular-app/* /var/www/html/
```
### 重新啟動 Nginx
```bash
sudo systemctl restart nginx
```
打開瀏覽器進入 [http://localhost](http://localhost) 即可看到 Angular 前端畫面。
---
## ✅ 結果
你已經完成了：
| 階段 | 工具 | 說明 |
| ---------- | ----------- | --------------- |
| Node.js 安裝 | nvm | 安裝 node v20+ |
| Angular 開發 | Angular CLI | 建立與開發元件 |
| 建置 | `ng build` | 打包成 HTML+JS+CSS |
| 部署 | Nginx | 將打包好的前端放上伺服器 |
---
### 📦 附加補充：若你想部署在後端 Spring Boot 的 static 資料夾？
只要將 `dist/my-angular-app/` 的內容複製進：
```
src/main/resources/static/
```
即可讓 Spring Boot 一併 serve Angular 畫面。
---
在日常開發中，Angular CLI 提供了非常多實用的指令，讓你可以快速建立元件、服務、模組、測試、打包等。這裡列出**最常用的 Angular CLI 指令清單**，並附上說明和使用範例。
---
## 🛠️ 專案初始化與開發
| 指令 | 說明 | 範例 |
| ---------- | --------------------------- | ------------------------------------- |
| `ng new` | 建立新的 Angular 專案 | `ng new my-app --standalone` |
| `ng serve` | 啟動開發伺服器（localhost:4200） | `ng serve` |
| `ng build` | 編譯並打包專案（生成 `dist/`） | `ng build --configuration production` |
| `ng test` | 執行單元測試 | `ng test` |
| `ng lint` | 檢查程式碼風格與錯誤 | `ng lint` |
| `ng run` | 執行特定 target（通常是自訂的 builder） | `ng run my-app:build` |
---
## 📦 常用產生器指令（`ng generate` / `ng g`）
| 指令 | 說明 | 範例 |
| ---------------- | ---------------- | --------------------------------- |
| `ng g component` | 建立元件（component） | `ng g c weapon-card --standalone` |
| `ng g service` | 建立服務（service） | `ng g s weapon` |
| `ng g class` | 建立 TypeScript 類別 | `ng g class models/weapon` |
| `ng g interface` | 建立 TypeScript 介面 | `ng g interface models/weapon` |
| `ng g module` | 建立模組（module） | `ng g module shared` |
| `ng g pipe` | 建立管道（pipe） | `ng g pipe truncate` |
| `ng g directive` | 建立指令（directive） | `ng g directive hoverEffect` |
| `ng g guard` | 建立路由守衛（guard） | `ng g guard auth` |
> ✅ 建議：從 Angular 14 起可加 `--standalone` 建立獨立元件/指令，免除模組註冊。
---
## 🧭 路由相關
| 指令 | 說明 | 範例 |
| ----------------------------------- | -------------------------- | --------------------------------------------- |
| `ng generate component` + `--route` | 建立帶路由的頁面元件 | `ng g c pages/home --standalone --route home` |
| `ng add @angular/router` | 加入 Angular Router（如專案剛初始化） | `ng add @angular/router` |
---
## 🚀 進階與常用輔助
| 指令 | 說明 | 範例 |
| ----------- | ---------------------------- | ------------------------------------------------------------ |
| `ng add` | 安裝套件並自動設定（例如 Bootstrap, PWA） | `ng add @angular/material` |
| `ng e2e` | 執行 E2E 測試（需要有設定） | `ng e2e` |
| `ng update` | 升級 Angular 或套件 | `ng update @angular/core @angular/cli` |
| `ng doc` | 開啟官方文件 | `ng doc ngFor` |
| `ng config` | 設定 `angular.json` 中的項目 | `ng config cli.defaultCollection @angular-eslint/schematics` |
---
## 📚 附加小技巧
* `ng serve -o`：啟動伺服器並自動開啟瀏覽器
* `ng build --watch`：持續監聽變更並重新編譯
* `ng lint --fix`：自動修復 lint 問題
---
## ✅ 常用組合指令推薦
| 情境 | 指令 |
| -------------- | ------------------------------------------------------- |
| 建立頁面元件（含路由） | `ng g c pages/dashboard --standalone --route dashboard` |
| 建立共享元件 | `ng g c shared/item-card --standalone` |
| 建立 API service | `ng g s services/weapon` |
| 建立型別定義 | `ng g interface models/weapon` |
---
```bash
ng new demo-angular
ng generate component role # 或縮寫成 ng g c role
ng generate component store # 或縮寫成 ng g c store
```