隨記

Week 01 · Day 05 — 專案結構：認識資料夾

學習目標

  • 看懂 Angular 專案的資料夾配置
  • 區分「程式碼」與「設定檔」
  • 明白 src/ 內各目錄的用途

重點

專案目錄總覽 

my-first-app/
├── src/                    # 程式碼與資源（主要工作區）
├── angular.json            # Angular 專案設定
├── package.json            # 依賴套件
└── tsconfig.json           # TypeScript 設定

src/ 內部結構 

src/
├── app/                    # 應用程式的主要程式碼
│   ├── app.component.ts    # 根元件（TypeScript 類別）
│   ├── app.component.html  # 根元件模板（HTML）
│   ├── app.module.ts       # 根模組
│   └── app-routing.module.ts # 路由設定
├── assets/                 # 靜態資源（圖片、字型）
├── environments/           # 環境變數（development / production）
├── index.html              # 主要 HTML 入口
├── main.ts                 # 應用程式入口點（bootstrap 起點）
└── styles.css              # 全域樣式

快速記憶法 - main.ts → 啟動點 - app/ → 你的所有功能程式碼 - assets/ → 靜態檔案 - environments/ → 依環境不同的值

實作

打開 my-first-app 專案： 1. 依 README 的結構，在 Explorer/編輯器裡逐層展開 src/ 2. 對照上面的樹狀圖，標記每個檔案的對應 3. 打開 index.html 與 main.ts 快速瀏覽，觀察 Angular 如何啟動

作業

  • 能說出 src/app/ 裡 4 個核心檔各自用途
  • 能說出 assets/ 與 environments/ 存什麼
  • 指出 main.ts 與 index.html 在啟動流程中扮演的角色