Angular 基礎
簡介 Angular
Angular 是一個流行的前端開發框架（Front-end Framework），由 Google 維護，用於建立動態的單頁應用（SPA - Single Page Applications）。它提供了一套完整的解決方案，包括工具和設計模式，來幫助開發者構建大型應用。
安裝 Node.js 和 npm
Angular 需要 Node.js 環境和 npm（Node Package Manager）來管理依賴包。首先，從 Node.js 官網 下載並安裝 Node.js，這通常會自動安裝 npm。
安裝後，可以在終端機（Terminal）中檢查版本：
node --version
npm --version
建立 Angular 專案
Angular CLI（Command Line Interface）是一個命令行工具，用於快速建立和管理 Angular 應用。
首先，全局安裝 Angular CLI：
npm install -g @angular/cli
然後，建立一個新的 Angular 應用：
ng new my-first-app
cd my-first-app
運行應用：
ng serve
http://localhost:4200/ 訪問應用。
理解 Angular 的主要組件
- 模組（Modules）：Angular 模組是一個帶有
@NgModule裝飾器的類，它用來封裝元件、服務等，並定義應用的結構。 - 元件（Components）：元件是 Angular 應用的基本構建塊，用
@Component裝飾器標記。每個元件都有一個 HTML 模板和一個 TypeScript 類，用於定義行為和數據。 - 服務（Services）：服務是一個獨立的類，用於封裝業務邏輯，可以在多個元件之間共享。
建立簡單的 Angular 應用並運行
假設您已經使用 Angular CLI 建立了一個新應用，您可以修改 app.component.ts 和 app.component.html 來建立一個簡單的應用。
創建和使用元件
使用 Angular CLI 創建一個新元件：
ng generate component my-component
src/app 路徑下創建一個新的元件目錄。
資料綁定的類型
- 插值（Interpolation）：用於在 HTML 模板中顯示 TypeScript 類的屬性。例如：
{{ title }}。 - 屬性綁定（Property Binding）：用於將元件類的屬性綁定到 HTML 元素的屬性。例如：
[value]="myValue"。 - 事件綁定（Event Binding）：用於響應 HTML 元素上的事件。例如：
(click)="myFunction()"。
使用 ngModel 實現雙向綁定
在 app.module.ts 中引入 FormsModule，然後在模板中使用 ngModel 實現雙向綁定。例如
，在 my-component.component.html 中：
<input [(ngModel)]="name">
name 屬性雙向綁定。
元件間的資料傳遞
- @Input()：用於從父元件向子元件傳遞數據。
- @Output()：用於從子元件向父元件發送事件。
例如，子元件可能有一個 @Input() childProperty 和一個 @Output() childEvent。父元件可以將數據綁定到 childProperty 並響應 childEvent。