概述
Angular 是一個由 Google 開發和維護的強大前端框架。它是一個基於 TypeScript 的 Web 框架，主要用於建構單頁應用程式 (SPA)。Angular 的設計理念強調結構化、模組化和工具化，這使得開發人員能夠建立具備擴充性和動態性的 Web 應用程式。其核心建構區塊是元件 (Components)，並且包含了模組、路由、表單、RxJS 等重要主題。憑藉其強大的功能和穩固的架構，Angular 在全球開發人員中是建立 Web 應用程式的首選框架之一。
🚀 Angular 七大核心功能
1元件 (Components)
元件是 Angular 應用程式的核心建構區塊。它們負責定義使用者介面 (UI) 並處理特定視圖的邏輯。
特色優勢：
可重複使用的獨立單元
每個元件都封裝了自己的視圖 (HTML 模板)、邏輯 (TypeScript 類別) 和樣式 (CSS)
模組化設計
極大地幫助了程式碼的組織、維護性，並促進了高效開發
元件間互動
可透過服務和事件進行互動
生命週期掛鉤 (Lifecycle Hooks)：
ngOnInit()：在元件初始化時被呼叫
ngOnDestroy()：在元件被移除前用於執行清理工作
2資料綁定 (Data Binding)
資料綁定極大地簡化了元件的視圖 (模板) 和邏輯 (類別) 之間的通訊。Angular 的資料綁定機制會自動同步模型和視圖之間的資料，確保了應用程式中資料的一致性，並減少了容易出錯的手動 DOM 操作。
四種綁定類型：
| 類型 | 語法 | 說明 |
|---|
| 差值綁定 | {{}} | 在模板中動態顯示元件資料 |
| 屬性綁定 | [property] | 將 DOM 元素的屬性綁定到元件類別的資料 |
| 事件綁定 | (event) | 監聽使用者在 DOM 元素上觸發的事件 |
| 雙向綁定 | [(ngModel)] | 同步視圖和元件資料，任何一端的改變都會自動反映到另一端 |
3服務 (Services)
服務是 Angular 中用於組織和分享程式碼的單例物件。它們的核心作用是封裝可重複使用的業務邏輯、資料存取功能和工具函數。
主要優勢：
透過依賴注入 (Dependency Injection) 機制輕鬆存取和共享
改善程式碼組織，減少冗餘
簡化元件之間的通訊
4依賴注入 (Dependency Injection - DI)
依賴注入是 Angular 使用的一種設計模式，用於管理物件之間的依賴關係。Angular 的注入器 (Injector) 會在執行時自動提供並注入這些所需的依賴項。
核心優勢：
鬆散耦合 高可重用性 易於測試 簡化維護 樹狀結構管理5路由 (Routing)
Angular 內建的路由器允許您建構具有多個視圖的單頁應用程式 (SPA)，並在這些不同視圖之間進行無縫導航。
核心功能：
URL 路徑對應
將 URL 路徑對應到特定的元件
延遲載入
按需載入特定的模組和其對應的路由
路由守衛
控制對特定路由的存取權限
參數傳遞
支援查詢參數和路由參數傳遞資料
🆕 Angular 13 改進：
- 當新的導航取消當前導航時，路由器不再替換瀏覽器 URL
- 改善了查詢參數對問號的兼容性
- routerLink 指令的值設為 null 或 undefined 會完全禁用該連結的導航
6表單 (Forms)
Angular 提供了功能豐富的表單模組來處理使用者輸入，主要提供兩種處理表單的方法：
模板驅動表單
較為簡單和聲明式
邏輯直接在模板中使用指令 (如 ngModel) 定義
響應式表單
提供更多控制
使用 FormBuilder 和 FormGroup 在元件類別中定義
更容易管理動態表單和處理複雜的驗證
額外功能：
內建和自訂的驗證器 (Validators)
7指令 (Directives)
指令是 Angular 中允許您擴展 HTML 元素功能並修改 DOM 元素的行為的機制，為視圖添加了互動性和邏輯。
結構型指令
用於改變 DOM 的結構或佈局
*ngIf：條件渲染
*ngFor：資料迴圈
屬性型指令
用於改變元素的樣式或行為
[style]：動態樣式綁定
優勢：
自訂指令支援 程式碼可重用性 簡化複雜 UI 互動Angular搭配Java EE開發現代化的Web應用程式
使用Java開發工具快速入門AngularJS、TypeScript、Angular
Angular Standalone模式深度探索Part 1
Angular Standalone模式深度探索Part 2
0 意見:
張貼留言