今日目標

了解什麼是 Angular CLI

用 Angular CLI 建立一個新的 Angular 專案

認識 Angular 專案的基本資料夾結構

把 Day 6 的靜態履歷網站「搬進 Angular 專案」做骨架

基礎概念：Angular CLI 是什麼？

在前端框架裡，Angular 最大的特色就是一開始就給你一個完整架構：

檔案結構清楚（components / services / modules）

自帶 TypeScript、SCSS 支援

有內建開發伺服器（不用額外設定 Webpack）

只要一個指令就能產生元件、服務，避免手動重複工作

👉 簡單來說，Angular CLI 是「官方提供的開發工具」，幫你把環境建好、架構搭好，你專心寫功能就行。

實作：建立 Angular 專案

1. 安裝 Angular CLI

請先安裝 Node.js（建議 v18 以上）。
終端機輸入：

npm install -g @angular/cli

檢查安裝是否成功：

ng version

2. 建立新專案

在你要存放的資料夾下輸入：

ng new resume-site

CLI 會問幾個問題：

Would you like to add Angular routing? → 選 Yes（之後我們會用）

Which stylesheet format would you like to use? → 選 SCSS（因為我們 Day 2 已經學了 SCSS）

完成後會自動建立 resume-site/ 專案。

3. 啟動專案
   cd resume-site
   ng serve

打開瀏覽器進 http://localhost:4200，會看到 Angular 預設的「Welcome」畫面。

認識 Angular 專案結構

進到 src/app/，你會看到幾個重要檔案：

app.component.ts → 主要元件（控制畫面邏輯）

app.component.html → 模板檔案（放 HTML）

app.component.scss → 樣式檔案（放 SCSS）

app.module.ts → 模組設定檔，管理哪些元件要一起用

👉 初學者最常改的就是 app.component.html，這裡可以放我們 Day 6 的履歷網站骨架。

把 Day 6 的 HTML 搬進來

打開 src/app/app.component.html，清空預設內容。

把你在 Day 6 的 index.html 主要 裡的 HTML 貼進去（記得 ~ ）。

CSS 部分，先複製 Day 6 的 style.css 內容到 src/app/app.component.scss。

這樣就完成了最初的搬家。之後，我們會一步一步把這些 HTML 區塊「切成 Angular 元件」。

成果

成功用 Angular CLI 建立了一個新專案

在瀏覽器跑起來，網址是 http://localhost:4200

預設畫面被我們換掉，現在已經是 Day 6 的履歷網站骨架

小心踩雷（初學者常見錯誤）

忘了進資料夾就 ng serve

❌ 在外層執行 → 找不到 Angular 專案

✅ 記得先 cd resume-site

貼錯地方

❌ 把 HTML 貼到 index.html（Angular 的 index.html 只用來掛 ）

✅ 要貼的是 app.component.html

CSS 沒有生效

❌ 貼到 styles.css 但找不到樣式

✅ 放在 app.component.scss 才會跟元件一起跑（之後也能抽出來做全域樣式）

ng serve 不斷報錯

檢查 Node.js 版本是否太舊（建議 v18+）

確認 Angular CLI 是否安裝成功（ng version）

下一步（Day 8 預告）

明天，我們要開始「切元件」：

把 Header、Hero、About、Skills、Projects、Contact、Footer 各自變成 Angular 元件

學習 Angular 的 Component 概念

把 Day 6 的單頁 HTML 轉換成 Angular 架構