markdown-it demo

clear permalink

## ✅ 步驟總覽：

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

```

html source debug