我原本的想法是：

先把所有頁面用HTML/CSS做完，再開始學Angular。

但實作一部分之後，我重新思考了整個專案的技術方向。

這個專案原本就希望學習：

• Angular
• TypeScript
• ASP.NET Core
• C#
• Oracle

而且未來希望建立的是一個比較接近正式網站開發流程的專案。

如果我先把十幾個頁面全部用傳統HTML做完，再重新轉成Angular，很可能會產生大量重複工作。

所以最後決定：

先把目前已經完成的HTML/CSS逐步轉換成Angular。

這也是我第一次真正開始接觸Angular Component。

為什麼要使用Angular？

原本的網站比較像：

index.html
├── Header
├── Hero
└── Quick Service

如果網站繼續增加：

首頁
醫師查詢
醫師詳細資訊
登入
預約
我的預約
...

每個HTML頁面可能都會有自己的：

Header
Footer
Navigation
Button
Card

如果每個頁面都複製一份，未來修改Header時，就可能需要修改很多地方。

Angular提供Component的概念，可以把網站拆成不同的元件。

例如：

Angular
└── App
    ├── Header Component
    ├── Hero Component
    └── Quick Service Component

因此我開始嘗試把首頁拆成不同Component。

二、第一次建立Header Component

首先把原本的Header拆出去。

原本：

<header>
    ...
</header>

開始變成Angular的：

Header Component
├── header.html
├── header.css
└── header.ts

這是我第一次理解Angular Component的地方。

一個Component不只是：

「把HTML放到另一個檔案。」

而是包含自己的：

Template
Style
TypeScript
Component定義

因此網站可以逐步拆成比較容易管理的結構。

三、建立Hero Component

接著把首頁Hero也拆出來。

原本：

index.html
├── Header
├── Hero
└── Quick Service

開始變成：

App
├── Header
├── Hero
└── Quick Service

這讓我開始理解Angular的元件化概念：

把一個大型頁面拆成多個可以獨立管理的區塊。

四、第一次遇到Angular錯誤

Component建立完成後，我第一次執行Angular專案。

結果畫面沒有按照預期顯示，並出現錯誤：

NG8001: 'app-header' is not a known element

一開始看到錯誤訊息其實不太知道是什麼意思。

我原本以為：

Component建立完成，就可以直接使用 。

但實際上不是。

解決方法

在目前使用的Angular standalone component架構中，如果App Component要使用 Header Component，需要先把Header引入。

例如：

import { Header } from './header/header';

然後在Component的imports中加入：

imports: [Header]

這樣：

<app-header></app-header>

才可以正常使用。

整個關係可以理解成：

Header Component -> App Component 引入 -> imports: [Header] -> App Template -> <app-header>

這次錯誤讓我第一次真正理解：

Angular Component之間存在使用關係，不是單純把HTML拆成不同檔案而已。

六、又遇到圖片路徑問題

解決Component問題後，Logo又出現新的問題。

原本HTML/CSS專案使用：

background-image: url('../image/logo.png');

但轉換到Angular後，這個路徑不再適用。

後來我了解到Angular專案可以將靜態圖片放在：

public
└── image
    └── logo.png

CSS改成：

background-image: url('/image/logo.png');

這次讓我發現：

**不同的開發環境，對靜態資源的處理方式可能不同，

所以不能只是把原本的HTML/CSS複製進Angular。

必須理解Angular自己的專案結構。**

七、Angular化之後，畫面為什麼又不一樣？

Header成功轉換後，我又遇到另一個問題。

雖然原本HTML/CSS已經可以正常顯示，但轉換到Angular後：

• Logo大小有差異
• 文字位置不同
• 間距不完全一樣
• 部分版面和Figma不一致

這時候我開始嘗試自己調整CSS。

但調整到一定程度後，我發現：

「我知道畫面不一樣，但是不容易馬上找到是哪個 CSS 屬性造成的。」

因此這次使用Codex協助進行局部修改。

八、開始嘗試區分GPT與Codex的工作

這次我沒有直接把整個專案交給Codex。

而是讓不同AI工具負責不同事情。

我的流程變成：

自己思考與實作 -> 遇到問題 -> GPT分析問題、理解觀念 -> 需要大量修改 ->
Codex協助修改程式碼 -> GPT解釋Codex修改的內容 -> 自己確認與測試

例如Codex幫我修改CSS後，我會再去理解：

• 為什麼改這個屬性？
• 這個元素的父層是什麼？
• 為什麼原本的位置會跑掉？
• 修改後會不會影響其他區塊？

我希望AI是：

加速開發的工具，而不是代替我理解程式碼。

九、開始建立首頁的Angular結構

完成初步轉換後，首頁開始有比較明確的Component結構：

App
│
├── Header
│
├── Hero
│
└── Quick Service

這和Day 9最大的差異是：

Day 9比較像：

HTML -> CSS -> 畫面

Day 10開始變成：

Angular App -> Component -> HTML -> CSS -> 畫面

也就是從單純「做網頁」開始往「建立前端應用程式」的方向前進。

十、這次最大的學習

這次Angular轉換讓我發現：

Angular並不是把HTML/CSS全部丟掉。

反而是：

Angular
├── HTML → 負責畫面結構
├── CSS → 負責畫面樣式
└── TypeScript → 負責程式邏輯

而Component則是把這些東西組織起來。

因此Day 9學到的HTML/CSS並沒有浪費。

反而因為自己先嘗試把Figma轉成HTML/CSS，我才更能理解：

Angular Component裡面的HTML和CSS到底在做什麼。

十一、今日學習

• 了解為什麼專案需要Angular
• 開始理解Angular Component
• 建立Header Component
• 建立Hero Component
• 了解standalone component
• 學習Component imports
• 解決NG8001 Component錯誤
• 了解Angular靜態圖片與public資料夾
• 開始將HTML/CSS轉換成Angular
• 學習Angular Component的基本結構
• 嘗試區分GPT與Codex在開發中的角色

十二、AI協助

本次主要使用AI協助：

• 分析Angular Component無法顯示的原因
• 理解imports與Component關係
• 分析Angular圖片路徑問題
• 協助檢查HTML/CSS轉換後的版面差異
• 使用Codex協助局部CSS修改
• 使用GPT解釋Codex修改後的程式碼

這次我也更加確定自己的AI使用方式：

自己先理解問題，再讓AI協助解決；AI修改後，再理解修改原因。

十三、今日開發流程

十四、今日成果

Angular專案結構