Angular 20+ 高阶教程 – 关于本教程

版本声明

本教程写于 Angular v17 - v18。

并在 v20 做了一个全面修订版。

接着往后的所有新功能，API 都会更新到相关文章里头 (不一定即时)，所以教程总是最新的，大家可以安心学习。

前言

光阴飞逝，一转眼，我尽然已经有两年多的时间完全没有接触 Angular 了。

庆幸，最近又有机会可以开始写 Angular 了。

两年，忘记了好多东西。但更令我惊讶的是，这两年 Angular 竟然突飞猛进，加了很多功能，甚至连语法也改动了不少。

本想说只要翻翻旧笔记就可以重启 Angular，天真。

看来非得来个大复习，把新知识总结进旧知识体系，这样才可以稳步前行。

那...既然都要大复习了，何不再花点力气，写个教程？

开干！

适合阅读的人

本系列特别适合以下读者：

向我一样很长时间没有接触 Angular 的人。
本来就会用 Angular，但想要深入理解 Angular 的人。

我特意把本系列标榜为 "高阶教程"，就是想借此机会写点深入的内容，比如：源码解析。
有丰富前后端开发经验，且对 Angular 感兴趣，但又没有用过 Angular 的人。

由于我是个全栈攻城狮。

前端熟悉 HTML、Scss、TypeScript、DOM、BOM。

后端熟悉 ASP.NET Core、SQL Server、Azure。

因此我从不迷恋前端框架。相反我看前端框架的视角和大多数前端攻城狮有所不同，诠释也不一样。

所以，如果你和我有相同背景，那我相信你阅读本系列会感觉特别舒服。
想从 React / Vue 转 Angular 的人。

Angular 是出了名的难学。市场上经常可以听到谁谁谁 Angular 转 React / Vue 一个星期就上手了。

但你很少会听到反过来的例子，更常听到的是："Angular 太复杂了"。

这也是为什么我想写这个系列。让一些有需求的人，可以轻松一点的深入学习 Angular。

不适合阅读的人

本系列不适合以下读者：

后端老手，前端新手。

许多后端攻城狮想跨前端，他们会优先考虑 Angular。

因为坊间传言，Angular 和 Java Spring 很像，甚至有人说 Angular 就是一群搞 Java 的人设计出来的。

但其实呢，这种谣言听听就好。不管 Angular 借鉴、参考、跟从了多少其它领域的知识，它终究还是个前端框架。

它不可能也不应该离前端技术太远，所以要深入理解 Angular，你必须先具备前端方方面面的技术知识。
想要研究 Angular 源码的人。

本系列会涉及源码解析，但它不是主角，也不是二号，甚至配角都不到，挺多只能算是个小配角吧。
所以，如果你关心的是源码，那很抱歉，这个系列并不合适你。
随着越写越深入，越来越多篇 "逛源码"，对 Angular 源码感兴趣的读者也适合阅读本教程。

本系列的编辑指南

我写这个系列是有明确的标准和指南的，虽然我也不一定会达标，但至少是有定了目标的。

也希望读者借由这个指南，顺着我的写法阅读，这样就能获得最棒的阅读体验。

1. 为什么要写这个教程？

我要复习，顺便写的。

顺便的标准就是不能尽心尽力，也不能为了取悦读者而花心思。

总之，怎么写比较顺我的意，怎么写比较方便我，那我就怎么写。

随着越写越深入，已经不能用 "顺便写" 来来形容了。

2. 写给谁看？

上面说了，适合阅读的人。

3. 写的多深，写的多浅？

既然标榜是 "高阶教程"，那肯定是要写得比官方文档更深入了。

深的部分我会分 4 个点

概念

problems & solutions & ideas.

你若想深入理解一套工具和方案，首先你得知道它试图想解决什么样的问题。

其二是你得要知道它如何解决这些问题。

最后你还得要知道这个解决方案的思路来自何方，去往何处。
最佳实践 & 自定义方案

框架一定会有灵活度。因为它需要预备面对未知的问题。

有灵活度才能自定义方案，才能扩展框架去解决未知的问题。

而面对已知的问题，我们应该总是使用最佳实践。

许多初学者因为对框架没有深入理解，经常在已知的问题上使用了自定义的方案，而在未知的问题上，卡着。
实战

真实项目中的案例可以更好的体现框架的灵活度。

不管学习什么技术，最终你得要 "活用"。
源码解析

有些时候，看源码会比找文档，做测试来得更高效，更可靠。

Angular 的源码还算整齐，而且是 TypeScript 写的。所以，必要时逛一逛源码是好的。

浅的部分，不能太浅，不然去看官方文档就好了丫。

我目前的规划是，Angular v14 以前的浅知识，我会教，但不会 step by step 的教，也不会 100% 一滴不漏的教到完。

Angular v14 以后的新语法，新功能，我则会 step by step 的教。

对于深知识，不管什么版本，我都会教到完。

4. 课纲编排

Angular 的知识体系是相互交织的。你没有办法单独拎一块出来深入理解。

当你尝试理解到一半时，你就会发现要理解这一块，你必须先理解另一块，而要理解另一块，你又必须先理解另另一块，以此类推，直到最后你甚至会发现...它竟然是个循环依赖😮。

所以许多教程只教基础，东西南北一起教，但每一块又教不深。

我不打算这样。我就是偏偏要拎一块出来深入讲解！

在课纲安排上，我会先教那些没有太多知识依赖，可以单独深入理解的部分，然后一块一块的将它们拼接上。

所以呢，这个教程你必须顺着目录一篇一篇的往下学，因为后面的文章一定依赖前面文章的知识。

5. 视角与诠释

我看待 Angular 是这样的：

它不是唯一的方案
它的解未必是最优的
我用它或许只是因为我懒得自己写

每当我看到一个 Angular 功能或者说一种解法时，我会先想如果我用纯 HTML、JS、CSS、DOM、BOM 该如何去解决相同的问题。

然后我会想，Angular 解法的利与弊，再想 Angular 是如何用 pure HTML、JS、CSS、DOM、BOM 去做到它的解法的，最后再学习使用它。

如果让我教一个人 Angular，我想我也会从这个角度出发吧。

总结

这篇是 Angular 高阶教程系列的开篇，主要讲述：

为什么会有这个教程
教程都适合哪些读者
该怎么去阅读这个教程

兴杰(stooges.com.my)