Angular 是一個強大且流行的開源前端 Web 應用程序框架，由 Google 開發并維護 1。它在現代 Web 開發中占據著重要的地位，尤其在構建動態、高效且可擴展的 Web 應用程序方面表現出色，特別適用于單頁應用程序 (SPA) 和復雜的用戶界面 1。本教程旨在為讀者提供一個全面且易于理解的 Angular 入門指南，內容涵蓋其歷史發展歷程、實際的安裝步驟以及在 Web 開發中的各種應用場景。我們將簡要介紹 Angular 從其前身 AngularJS (Angular 1.x) 到當前版本 (Angular 2+) 的演變，重點介紹其在架構和技術上的重大進步。

Angular的歷史

AngularJS (Angular 1.x) 的起源與發展

AngularJS，通常被稱為 Angular 1，是該框架的第一個版本，由 Mi?ko Hevery 于 2009 年在 Brat Tech LLC 創建，最初是為一個在線 JSON 存儲服務提供的軟件 8。該項目后來開源，并逐漸獲得廣泛關注，最終主要由 Google 和一個活躍的社區進行維護和支持 3。它的官方首次發布日期是 2010 年 10 月 20 日 1。

AngularJS 的主要目標是簡化單頁應用程序 (SPA) 的開發和測試，它提供了一個基于模型-視圖-控制器 (MVC) 和模型-視圖-視圖模型 (MVVM) 架構模式的結構化框架 2。AngularJS 引入了許多關鍵特性和概念，包括用于模型和視圖之間自動同步的雙向數據綁定 3，使用指令擴展 HTML 并添加自定義屬性 8，以及用于管理應用程序組件和服務的依賴注入 1。

最初開發 AngularJS 的動機非常具體——解決與企業應用程序開發相關的特定問題。這表明許多成功的技術往往源于解決實際需求，而不是抽象的概念 8。Hevery 最初的項目在商業上并未獲得成功，但隨后將其開源，這一轉變最終促成了一個被廣泛采用的框架。

AngularJS 在全棧 JavaScript 開發中也扮演了重要的角色，它是流行的 MEAN 技術棧（MongoDB、Express.js、AngularJS、Node.js）的前端組成部分 8。AngularJS 的核心理念強調使用聲明式編程來構建用戶界面和連接軟件組件，而將命令式編程更適合用于定義應用程序的業務邏輯 8。其設計目標包括將 DOM 操作與應用程序邏輯解耦、分離客戶端和服務器端以實現并行開發，并為從 UI 設計到測試的整個開發過程提供結構化的指導 8。AngularJS 通過解析帶有嵌入式自定義屬性（指令）的 HTML 頁面來工作，并將這些屬性解釋為將頁面的輸入或輸出部分綁定到由標準 JavaScript 變量（模型）表示的數據 8。

值得注意的是，AngularJS 的活躍開發已于 2018 年 6 月結束，長期支持也于 2021 年 12 月 31 日終止 1。AngularJS 長達十多年的生命周期及其長期支持的提供，表明了它在 Web 開發領域曾經產生的重要影響以及大量使用該框架構建的項目。最終的停止支持也促使開發者轉向更新的版本。

從AngularJS到Angular

Angular（版本 2 及更高版本）并非僅僅是對 AngularJS 的升級，而是 Google 團隊使用 TypeScript 作為其主要語言進行的完全重寫 1。這次徹底重寫的主要原因是解決 AngularJS 的性能瓶頸，尤其是在處理大型和復雜的應用程序時 15，以及通過更模塊化和基于組件的架構來提高可伸縮性和可維護性 1，并擁抱現代 Web 開發標準和實踐 1。

關鍵的架構變化中最顯著的是從基于 MVC/MVVM 的架構轉向了基于組件的架構，在這種架構中，應用程序被組織成可重用的組件層次結構 1。決定將 AngularJS 完全重寫為 Angular 2 表明了框架設計理念的重大演變，優先考慮了現代 Web 應用程序對性能和可伸縮性的需求。這是一個大膽的舉動，表明了解決原始框架缺點的決心 9。

Angular 采用了 TypeScript，這是一種靜態類型的 JavaScript 超集，它為大型項目提供了增強的類型安全性、改進的工具支持和更好的代碼可維護性 1。為了避免開發者社區中的混淆，“AngularJS”專門指代 1.x 版本，而“Angular”（不帶“JS”）則指代 2 及更高版本，這種命名上的區分旨在明確兩個框架之間的差異 1。

Angular 主要版本演進

Angular 的版本歷史清晰地展示了其持續改進的承諾，每個主要版本都帶來了性能、開發者體驗和新功能的顯著提升，這些都與不斷發展的 Web 開發環境保持一致 1。下表總結了 Angular 的主要版本、發布年份以及每個版本引入的一些關鍵特性：

版本	發布年份	主要特性
AngularJS	2010	雙向數據綁定、指令、MVC 架構、依賴注入。
Angular 2	2016	使用 TypeScript 完全重寫、基于組件的架構、改進的性能。
Angular 4	2017	更小的包大小、更快的渲染速度、*ngIf 和 *ngFor。
Angular 5	2017	支持漸進式 Web 應用 (PWA)、構建優化器。
Angular 6	2018	Angular CLI 改進 (ng update, ng add)、Angular Material 更新。
Angular 7	2018	CLI 提示、Angular Material 增強、虛擬滾動、拖放功能。
Angular 8	2019	差異加載、路由懶加載的動態導入、Ivy (可選)。
Angular 9	2020	默認啟用 Ivy 編譯器、更小的包、更快的編譯速度。
Angular 10	2020	支持 TypeScript 3.9、日期范圍選擇器。
Angular 11	2020	支持 TypeScript 4.0、更快的構建速度、改進的 HMR。
Angular 12	2021	支持 Tailwind CSS、嚴格的空值檢查、支持 Webpack 5、移除 IE 11 支持。
Angular 13	2021	移除 IE 11 支持、RxJS 7 默認、獨立的組件 API。
Angular 14	2022	強類型響應式表單、獨立的組件。
Angular 15	2022	獨立的組件穩定版、指令組合 API、改進的水合作用。
Angular 16	2023	Signals (預覽)、更快速的水合作用、Jest 支持 (實驗性)。
Angular 17	2023	內置控制流 (@if, @for)、延遲加載、改進的 SSR、獨立的組件默認。
Angular 18	2024	無 Zone.js 的變更檢測 (實驗性)、改進的 SSR、增強的控制流、CLI 改進。
Angular 19	2024	獨立的組件默認、部分水合作用、增強的 Signals、改進的組件 API、更快的構建速度。

版本歷史清晰地表明，Angular 致力于持續改進，每個主要版本都為性能、開發者體驗帶來了顯著的進步，并添加了與不斷發展的 Web 開發環境相符的新功能。最近對 Signals 反應式編程的關注以及向獨立組件的轉變，代表了框架架構上的重大變革，旨在簡化開發并提高性能 1。

AngularJS 的生命周期結束

AngularJS (版本 1.x) 的官方長期支持已于 2021 年 12 月 31 日結束 1。雖然 Google 不再積極開發或支持 AngularJS，但仍然有 HeroDevs 和 OpenLogic 等第三方供應商為那些仍在維護使用 AngularJS 構建的應用程序的組織提供商業擴展長期支持 11。由于缺乏持續的安全更新以及新版 Angular 提供的諸多優勢，建議不要使用 AngularJS 開始新的開發項目。鼓勵開發者在條件允許的情況下將現有的 AngularJS 應用程序遷移到更新的 Angular 版本。AngularJS 的生命周期結束標志著一個重要的轉折點，敦促開發者社區擁抱新版 Angular 提供的進步和優勢，以構建現代 Web 應用程序 1。

Angular的安裝教程

環境準備

安裝 Node.js 和 npm

Node.js 和 npm (Node 包管理器) 是 Angular 開發的基本先決條件，因為 Angular CLI 和許多 Angular 工具及庫都作為 npm 包分發 7。請訪問官方 Node.js 網站 (nodejs.org) 并下載 LTS（長期支持）版本以確保穩定性 7。根據您的操作系統（Windows、macOS、Linux）按照官方指南進行安裝。您可以在終端或命令提示符中運行命令 node -v 和 npm -v 來驗證 Node.js 和 npm 是否成功安裝，這兩個命令應該顯示已安裝的版本號 7。Node.js 和 npm 的普遍要求凸顯了它們在 JavaScript 生態系統和 Angular 開發工作流程中的基礎作用。確保正確安裝它們是任何 Angular 項目的關鍵第一步。

(可選) 安裝 TypeScript

Angular 是使用 TypeScript 構建的，TypeScript 是 JavaScript 的靜態類型超集，可以提高代碼質量和可維護性 1。雖然 Angular CLI 負責處理 TypeScript 代碼的編譯，但全局安裝 TypeScript 對于使用特定的 TypeScript 工具或開發者在 Angular 項目之外使用 TypeScript 可能會有所幫助 20。您可以使用 npm 在全局范圍內安裝 TypeScript，命令是 npm install -g typescript 20。安裝完成后，您可以在終端或命令提示符中運行命令 tsc -v 來驗證 TypeScript 是否成功安裝，該命令應該顯示已安裝的 TypeScript 版本 20。雖然 Angular 項目并非嚴格要求單獨全局安裝 TypeScript（因為 CLI 包含了必要的 TypeScript 編譯器），但對于那些廣泛使用該語言的開發者來說，全局安裝可以提升開發體驗。

安裝 Angular CLI (全局安裝)

Angular CLI（命令行界面）是創建、管理、構建和提供 Angular 應用程序的重要工具。它簡化了許多常見的開發任務 1。要全局安裝 Angular CLI，請在終端或命令提示符中運行以下命令：npm install -g @angular/cli 6。-g 標志確保 CLI 安裝在全局范圍內，并且可以從系統上的任何目錄訪問。對于 Windows 用戶，如果遇到由于 PowerShell 的執行策略導致無法運行全局 npm 二進制文件的問題，建議以管理員身份在 PowerShell 中運行命令 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned 以允許腳本執行 24。@angular/cli 是 npm 上的一個作用域包，表明它是 Angular 組織的一部分 6。Angular CLI 是現代 Angular 開發的基石，其全局安裝為開發者提供了一種一致且高效的方式來與 Angular 生態系統進行交互。

創建新的 Angular 項目

要使用 Angular CLI 創建一個新的 Angular 項目，請在終端或命令提示符中運行命令 ng new <項目名稱> 6。將 <項目名稱> 替換為您希望的應用程序名稱。在項目創建過程中，會出現一些交互式提示，例如是否添加 Angular 路由（用于單頁應用程序的導航）以及使用哪種樣式表格式（CSS、SCSS 等）來為您的應用程序設置樣式 6。然后，Angular CLI 將創建一個新目錄，其中包含指定的項目名稱，生成包含必要配置文件的基本項目結構，并自動安裝所需的 npm 包和依賴項 6。此過程可能需要幾分鐘。Angular CLI 創建的 Angular 項目的基本文件夾結構包括 src 文件夾（包含應用程序代碼）、app 文件夾（組件、服務等駐留的地方）、angular.json（項目的配置文件）和 package.json（列出項目依賴項）6。ng new 命令通過自動化基本結構和配置的設置，顯著簡化了啟動新 Angular 項目的過程，使開發者能夠專注于編寫應用程序特定的代碼。

運行 Angular 應用程序

要運行 Angular 應用程序，首先需要在終端或命令提示符中使用命令 cd <項目名稱> 導航到新創建的項目目錄 7。然后，使用 Angular CLI 提供的命令 ng serve --open（或簡寫為 ng serve -o）在本地構建并提供 Angular 應用程序 6。此命令會編譯應用程序，啟動本地開發服務器，并在默認情況下將應用程序托管在 http://localhost:4200 上 6。–open（或 -o）標志會自動在您的默認 Web 瀏覽器中打開該應用程序。此外，ng serve 命令還會監視項目文件中的更改，并自動重新構建和重新加載瀏覽器中的應用程序，從而提供實時的開發體驗 6。ng serve 命令提供了一個簡化的開發工作流程，具有諸如實時重新加載等功能，使開發者能夠快速在瀏覽器中看到代碼更改的結果，而無需手動刷新。

檢查 Angular 版本

您可以使用終端或命令提示符中的 ng version 或 ng v 命令來驗證已安裝的 Angular CLI 和 Angular 框架的版本 6。在 Angular 項目目錄之外運行此命令通常會顯示全局安裝的 Angular CLI 版本。在 Angular 項目目錄中執行時，它將顯示該特定項目正在使用的 Angular CLI 和 Angular 框架的版本 41。您還可以在項目的 package.json 文件中找到 Angular 版本。打開該文件，并在 dependencies 部分查找 @angular/core 包，在 devDependencies 部分查找 @angular/cli 包。版本號將列在這些包名稱旁邊 40。值得一提的是，在較舊的 Angular 版本中，有時可以通過在瀏覽器的開發者控制臺中鍵入 angular.version 來檢查版本 45。但是，此方法可能并非在所有 Angular 版本中都可靠。此外，檢查瀏覽器開發者工具中根 HTML 元素（例如 <app-root> 或類似元素）上的 ng-version 屬性有時也可以顯示 Angular 版本 46。提供多種檢查 Angular 版本的方法可以滿足不同的用戶偏好和故障排除場景。ng version 命令是 Angular CLI 提供的最直接和信息最豐富的方法。

Angular的用途

構建單頁應用程序 (SPAs)

Angular 非常適合開發單頁應用程序 (SPA)，這些應用程序通過加載單個 HTML 頁面并動態更新內容以響應用戶交互，而無需完全重新加載頁面，從而提供高度交互和響應迅速的用戶體驗 1。Angular 內置的路由模塊 7 有助于在 SPA 內的不同視圖之間進行導航，而無需頁面刷新，從而提供無縫的用戶流程。SPA 的優點包括初始加載后更快的感知性能、更流暢和類似應用程序的用戶界面以及后續交互的服務器負載減少。Angular 的核心架構及其對組件和路由的強調，使其成為構建 SPA 的絕佳選擇，而 SPA 由于其性能和用戶體驗優勢，在現代 Web 應用程序中越來越受歡迎。

開發企業級 Web 應用程序

Angular 強大的架構、可伸縮性 1、可維護性（歸功于 TypeScript 和基于組件的結構）1 以及全面的工具支持（Angular CLI）使其成為開發大型和復雜的企業級 Web 應用程序的理想選擇 1。Angular 的模塊化（通過 NgModules 和現在的獨立組件 2）、依賴注入 1 以及明確定義的開發生命周期等特性，都有助于在企業環境中實現高效的團隊協作和長期應用程序維護。Angular 的設計原則和特性與企業級應用程序的嚴格要求非常契合，在這些應用程序中，可伸縮性、可維護性、安全性以及團隊協作至關重要。

創建 Progressive Web Apps (PWAs)

Angular 為構建漸進式 Web 應用 (PWA) 提供了強大的支持和特定的工具。PWA 是一種 Web 應用程序，它提供了類似于原生移動應用程序的增強用戶體驗，包括離線功能、推送通知以及添加到用戶主屏幕的能力 1。使用 Angular CLI 命令 ng add @angular/pwa 可以輕松地將 PWA 功能添加到 Angular 項目中，該命令會自動配置必要的 Service Workers 和 manifest 文件。PWA 的優點包括改進的性能、可靠性（在離線或低網絡條件下工作）以及通過類似應用程序的功能提高用戶參與度。Angular 與 PWA 標準的集成使開發者能夠利用 Web 技術創建可以彌合傳統網站和原生移動應用程序之間差距的應用程序，從而在不同平臺上提供引人注目的用戶體驗。

移動應用開發 (通過 Ionic 等框架)

雖然 Angular 主要是一個用于構建 Web 應用程序的框架，但其架構和基于組件的模型使其成為使用 Ionic 等框架開發跨平臺移動應用程序的合適基礎 7。Ionic 利用 Web 技術（HTML、CSS、JavaScript/TypeScript）并借助 Angular 的強大功能來構建混合移動應用程序，這些應用程序可以從單個代碼庫在 iOS 和 Android 平臺上運行。雖然 Angular 本身并不直接編譯為原生移動代碼，但其與 Ionic 等框架的兼容性將其應用范圍擴展到了移動應用程序開發領域，提供了一種經濟高效的方式來構建跨平臺應用程序。

其他應用場景

Angular 的功能還擴展到構建各種其他類型的交互式 Web 應用程序，包括用于數據可視化和商業智能的儀表板、復雜的基于表單的應用程序、具有豐富用戶界面的電子商務平臺以及組織的內部工具 2。其靈活性以及可與 Angular 集成以滿足各種特定應用程序要求的龐大第三方庫和工具生態系統，使其能夠適應廣泛的 Web 開發需求。Angular 全面的特性集和活躍的社區支持使其能夠適應廣泛的 Web 應用程序場景，使其成為許多不同類型項目的多功能選擇。

總結

本入門教程涵蓋了 Angular 的關鍵方面：從 AngularJS 到當前版本的歷史演變、設置開發環境和安裝 Angular 的分步指南，以及該框架在現代 Web 開發中的各種應用和用例概述。Angular 作為一個強大、多功能且不斷發展的框架，使開發者能夠構建復雜且高性能的 Web 應用程序。鼓勵讀者通過探索更高級的概念、深入研究官方 Angular 文檔 (angular.dev) 并開始構建自己的 Angular 項目以獲得實踐經驗，繼續他們的學習之旅。學習 Angular 在 Web 開發領域將開啟充滿回報的可能性。