🅰️ Angular 入門：Google 的企業級框架

📌 Angular 是什麼？

Angular 是由 Google 維護的完整前端框架（Full-Featured Framework），專為建構大型企業級單頁應用（SPA）設計。

⚠️ 重要觀念：Angular 不是原生 JavaScript！ Angular 使用 TypeScript 作為主要開發語言。TypeScript 是 JavaScript 的超集（Superset）， 加入了型別系統和進階功能，最終會編譯（Compile）成 JavaScript 才能在瀏覽器執行。

這和直接寫原生 JS 有本質上的不同——你寫的是 TypeScript，瀏覽器跑的是編譯後的 JavaScript。

TypeScript vs JavaScript 對比

// ❌ 原生 JavaScript — 沒有型別檢查
function add(a, b) {
  return a + b;
}
add("hello", 5); // 不會報錯，但結果是 "hello5"（字串拼接）

// ✅ TypeScript — 編譯時就會檢查型別
function add(a: number, b: number): number {
  return a + b;
}
add("hello", 5); // ❌ 編譯錯誤！不允許傳入字串

📌 Angular vs AngularJS 的區別

💡 注意：AngularJS 和 Angular 是完全不同的框架！Angular 2+ 是從頭重寫的。

📌 原生 JS vs Angular 開發方式對比

<!-- ❌ 原生 JS：手動操作 DOM -->
<div id="app">
  <h1 id="title"></h1>
  <button onclick="changeTitle()">點擊</button>
</div>
<script>
  let title = 'Hello';
  document.getElementById('title').textContent = title;
  function changeTitle() {
    title = '你好！';
    document.getElementById('title').textContent = title; // 手動更新 DOM
  }
</script>

// ✅ Angular：宣告式綁定，自動同步
@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <button (click)="changeTitle()">點擊</button>
  `
})
export class AppComponent {
  title = 'Hello';

  changeTitle() {
    this.title = '你好！'; // 只要改資料，UI 自動更新
  }
}

🎯 核心差異：原生 JS 需要手動操作 DOM，Angular 透過資料綁定自動同步 UI 和資料。

📌 安裝 Angular CLI 與建立專案

# 1. 確認 Node.js 已安裝（需要 18+ 版本）
node --version

# 2. 全域安裝 Angular CLI
npm install -g @angular/cli

# 3. 建立新專案（會詢問樣式格式和是否啟用 SSR）
ng new my-app

# 4. 進入專案目錄並啟動開發伺服器
cd my-app
ng serve --open
# 瀏覽器會自動開啟 http://localhost:4200

📌 專案結構解析

my-app/
├── src/
│   ├── app/                    # 👈 主要程式碼放這裡
│   │   ├── app.component.ts    # 根元件的 TypeScript（邏輯）
│   │   ├── app.component.html  # 根元件的模板（畫面）
│   │   ├── app.component.css   # 根元件的樣式
│   │   ├── app.component.spec.ts # 單元測試
│   │   ├── app.config.ts       # 應用設定（Standalone 模式）
│   │   └── app.routes.ts       # 路由設定
│   ├── index.html              # 主 HTML 檔（只有一個！SPA）
│   ├── main.ts                 # 應用程式進入點
│   └── styles.css              # 全域樣式
├── angular.json                # Angular CLI 設定
├── tsconfig.json               # TypeScript 編譯設定
└── package.json                # npm 套件管理

💡 記住：.ts 檔案是 TypeScript，Angular CLI 會自動編譯成 .js 檔案供瀏覽器執行。

📌 小結

• Angular 是 Google 維護的完整框架，不是函式庫
• 使用 TypeScript 開發，編譯後產生 JavaScript
• Angular (2+) 和 AngularJS (1.x) 是完全不同的框架
• 透過 Angular CLI 可以快速建立、開發、測試和部署應用
• 相比原生 JS，Angular 提供結構化的開發方式和自動化的 DOM 更新