当前位置：首页 > news >正文

Angular教程前言：历史、安装与用途

news 来源：原创 2025/5/10 14:40:07

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 开发领域将开启充满回报的可能性。