Angular 编程教程
欢迎学习 Angular！本教程将带你从零基础开始，逐步掌握 Angular 框架的核心知识和技能。
什么是 Angular？
Angular 是由 Google 维护的开源前端 Web 框架，用于构建单页应用程序（SPA）。它使用 TypeScript 作为开发语言，提供了一套完整的解决方案来构建现代化的 Web 应用。
Angular 的核心特性
- 组件化架构：将 UI 拆分为独立可复用的组件，每个组件包含模板、样式和逻辑
- 响应式编程：通过 Signals 实现细粒度的响应式状态管理
- 依赖注入：内置强大的依赖注入系统，简化服务的创建和使用
- TypeScript 支持：原生支持 TypeScript，提供强类型和更好的开发体验
- 完整的工具链：Angular CLI 提供项目创建、构建、测试等一站式工具
- 企业级解决方案：适合大型团队协作和复杂项目开发
Angular 的发展历程
| 版本 | 发布时间 | 重要特性 |
|---|---|---|
| Angular 2 | 2016年 | 完全重写，引入组件化架构 |
| Angular 4 | 2017年 | 视图引擎优化，HTTP 客户端 |
| Angular 6 | 2018年 | CLI 工作区，RxJS 6 |
| Angular 8 | 2019年 | 差异加载，Bazel 支持 |
| Angular 9 | 2020年 | Ivy 渲染引擎默认启用 |
| Angular 14 | 2022年 | 独立组件预览，严格类型化表单 |
| Angular 15 | 2022年 | 独立组件稳定版，指令组合 API |
| Angular 16 | 2023年 | Signals 预览，服务端渲染改进 |
| Angular 17 | 2023年 | 新控制流语法，Signals 稳定版 |
| Angular 18 | 2024年 | 无 Zone.js 实验性支持，水合改进 |
| Angular 19 | 2024年 | Signals 全面应用，增量水合 |
为什么学习 Angular？
- 企业级框架：Google 官方维护，适合大型项目和团队协作
- 完整的解决方案：路由、表单、HTTP 客户端等开箱即用
- 强类型支持：TypeScript 提供更好的代码提示和错误检查
- 规范的架构：统一的开发模式，降低团队协作成本
- 就业前景好：很多大型企业和政府项目使用 Angular
Angular vs React vs Vue
| 特性 | Angular | React | Vue |
|---|---|---|---|
| 类型 | 完整框架 | UI 库 | 渐进式框架 |
| 语言 | TypeScript | JavaScript/TypeScript | JavaScript/TypeScript |
| 学习曲线 | 较陡峭 | 中等 | 平缓 |
| 数据绑定 | 双向绑定 | 单向数据流 | 双向绑定 |
| 状态管理 | RxJS/NgRx | Redux/Context | Vuex/Pinia |
| 适用场景 | 大型企业应用 | 中大型应用 | 中小型应用 |
教程目录
基础阶段
- 环境配置 - 安装 Angular CLI 和创建项目
- 组件基础 - 组件的创建、模板和样式
- 模板语法 - 数据绑定、事件处理和控制流
- Signals 响应式 - Angular 的响应式状态管理
进阶阶段
高级阶段
知识速查
- 速查表 - Angular 常用语法和知识点速查
学习建议
- 掌握 TypeScript：Angular 深度依赖 TypeScript，建议先熟悉 TypeScript 基础
- 理解核心概念：组件、服务、依赖注入是 Angular 的核心，务必深入理解
- 动手实践：每学一个知识点，都要动手编写代码
- 阅读官方文档：Angular 官方文档非常详细，遇到问题优先查阅
- 循序渐进：按照教程顺序学习，不要跳跃
版本说明
本教程基于 Angular 19 编写，涵盖以下主要特性：
- Signals：全新的响应式状态管理方式
- 独立组件：不再强制依赖 NgModule
- 新控制流语法：
@if、@for、@switch等内置语法 - 无 Zone.js 模式：实验性支持，提升性能
提示
Angular 19 是当前最新版本，建议新项目直接使用最新版本。Angular 团队每 6 个月发布一个主要版本，升级路径清晰。
参考资源
准备好开始学习了吗？点击下一章开始你的 Angular 编程之旅！