回首 Angular 的十年历程——并展望其未来

MMaximilian Schwarzmüller
Computing/SoftwareAdult EducationInternet Technology

Transcript

00:00:00说实话,这真的挺让人感慨的,整整十年前的今天
00:00:06对我来说是非常重要的一天,因为就在那时我发布了我的第一版 Angular 课程,也就是 Angular 2 课程。
00:00:12就像 Angular 框架本身一样,这门课程在过去的十年里也经历了巨大的演变。
00:00:17随着 Angular 的不断发展,我也对课程进行了无数次更新。
00:00:23在今天这期视频中,我想聊聊 Angular 的过去,我们从何而来,
00:00:28现在的处境,以及未来的方向。Angular 的未来会怎样,对开发者意味着什么,
00:00:32尤其是在 AI 时代,学习它是否还是一个好主意。好,让我们开始吧。Angular,准确地说是 Angular 2,
00:00:37是在 2014 年宣布,2015 年开发的。在当时它引起了不小的争议,
00:00:44因为它与 Angular 1(也就是 AngularJS)完全不同。
00:00:53AngularJS 本身是当时最早的主流框架之一,它的诞生主要是为了帮助我们
00:00:59摆脱对 jQuery 的依赖,或者换句话说,是为了能够构建功能更强大的
00:01:05原生 Web 应用、交互式 Web 应用。Angular 1 让构建客户端渲染
00:01:13和控制的应用变得更容易。接着 Angular 2 发布了,
00:01:20它带来了一场彻底的变革。2016 年,Angular 2 的第一个稳定版本正式发布。
00:01:25正如我提到的,2016 年 2 月,我针对 Angular 2 的测试版(Beta)发布了第一版课程。
00:01:33我记得当时在 Beta 阶段和发布候选版(RC)阶段仍然有很多变动,
00:01:40在那段时期我就已经更新过很多次课程了。之后我们进入了 Angular 2 时代。
00:01:45如果你对比现在的 Angular 代码,那时的代码看起来非常不同。
00:01:51当时有 “ng modules”(Angular 模块)的概念,你必须使用类,
00:01:58并且还要加上 @NgModule 装饰器,显式地声明你要使用的所有组件。
00:02:05当然,你还有组件类,使用基于构造函数的依赖注入。
00:02:12从某种程度上说,它和现在的组件确实有相似之处,它们都是类。
00:02:19但本质上又非常不同。尤其是 ng modules,你可能已经不太了解这个概念了,
00:02:26这取决于你什么时候开始学习 Angular,以及你在哪家公司、使用哪个版本进行开发。
00:02:32因为现在仍然有很多公司和项目停留在旧版本上。
00:02:39到了 2017 年,我们遇到了“消失的第 3 版”。这是因为 Angular 有一个
00:02:45一直沿用至今的发布计划:每六个月发布一个新的大版本。
00:02:51我记得当时很多人对此感到不满,因为听起来 Angular 好像每半年就会推倒重来。
00:02:55我看到课程里有很多评论和私信在抱怨 Angular 总是变来变去,
00:03:04但实际上核心并没有经常变化。这种发布节奏只是为了给他们提供
00:03:11引入重大新功能的机会。而且他们一直非常注重向下兼容。
00:03:17至于 2017 年跳过版本 3 的原因,是因为当时
00:03:23Angular 核心包和路由包之间的版本号出现了不一致。
00:03:27由于 Angular 是由许多不同的包组成的框架,他们跳过了版本 3,以便让所有包的版本号重新统一。
00:03:33接下来的重大飞跃应该是 2020 年引入的 Ivy 编译器。
00:03:40当然,在之前的几年(如 2018 年等),Angular 团队一直在紧锣密鼓地开发这款新编译器,
00:03:46同时也进行了许多小的优化和改进。
00:03:51这个编译器的核心目标是重写 Angular 的内部机制,改变组件编译
00:03:57以及转换成实际操作 DOM 指令的方式。因为旧的编译器存在一些效率低下、
00:04:03容易导致打包体积过大等问题。所以他们启动了这个庞大的项目来重写底层编译器。
00:04:12为什么这很重要呢?因为它开启了一个可以被称为“平淡期”的阶段。
00:04:19从 2017 年到 2020 年,表面上变化并不多。虽然内部变动很大,也有不少微调,
00:04:25但核心功能集以及构建组件的方式并没有太大的改变。
00:04:31这之所以重要,是因为那段时间也是 JavaScript 框架市场竞争极其激烈的时期。
00:04:38Vue.js 2 在 2016 年发布。React 生态系统也在飞速发展,
00:04:44比如 2018 年 React Hooks 的问世。感觉整个 JavaScript 生态都在突飞猛进,
00:04:52虽然并不是每个人都喜欢这种节奏。相比之下,Angular 显得有些停滞不前。
00:05:01但这也许并不像听起来那么糟。很多人非常看重这种稳定性,毕竟当时
00:05:10到处都是关于 JavaScript 生态圈“日新月异”的吐槽。
00:05:16不过如果看看今天由 AI 驱动的爆发式进化和每天都在发生的剧变,
00:05:22当年的那些抱怨简直就像个笑话。但总之,那确实是当年的真实写照,那就是“平淡期”。
00:05:27这个平淡期在大约 2022 年随着 Angular 14 的发布而宣告结束,
00:05:36当时引入了独立组件(Standalone Components)的开发者预览版。它的核心理念是,
00:05:43你不再必须使用 Angular 模块了。你只需在组件中添加 “standalone” 标记,
00:05:50就可以在其他组件中直接使用,而无需 ng-modules。这意味着你可以跳过那些繁琐的模块定义。
00:05:57当然你仍然可以使用 ng-modules,也可以将它们与独立组件混合使用。
00:06:03你可以根据需要自由搭配,因为 Angular 团队始终非常重视向下兼容和迁移的便捷性,
00:06:08但你不再受其束缚了。这就是独立组件。紧接着在 2023 年,Angular 16 推出了
00:06:13Signals(信号)以及更多新特性。比如使用 @if 语法取代传统的 ngIf 指令,
00:06:19从而以不同的方式进行条件渲染。同时,团队也开始在“无 Zone 化”(Zoneless)Angular 方面进行初步尝试。
00:06:28如果你不了解的话,Angular 2 自发布以来一直使用一个叫 ng-zone 或 zone.js 的概念,
00:06:33这本质上是一个监听网站上各种事件(如点击、HTTP 请求等)的库。
00:06:42它会运行变更检测来判断是否需要更新 DOM 以响应这些事件。
00:06:47这种方式的优点是 DOM 更新感觉很“神奇”,不像 React 那样需要调用 setState 之类的函数。
00:06:55但缺点也很明显,这种“猴子补丁”式的库会在各种事件中注入监听器,
00:07:00带来了额外的性能开销和打包体积。因此它的效率并不如 React 的机制高。
00:07:05于是,由 Signals 驱动的 Zoneless 方案成为了又一个巨大的进步。
00:07:12Signals 提供了一种显式的方式来告诉 Angular 某些状态发生了变化。
00:07:20框架能够记住该状态在 DOM 中使用的位置,并仅更新那一部分内容。
00:07:26这种细粒度的响应式机制在 2023 年被引入 Angular。这也被社区广泛称为
00:07:34“Angular 文艺复兴”。在经历了平淡期和早期由于 Angular 1 到 2 巨大变动导致的
00:07:40动荡期之后,Angular 再次赢得了社区的热爱。因为它在向着更精简、
00:07:46更易用的方向迈进,也更符合大家在其他框架中看到的优秀设计。例如,
00:07:54Signals 曾由 SolidJS 发扬光大,但其实 Vue 才是最早使用类似机制的主流框架之一,
00:08:00只是在 Vue 里它叫 “refs”。无论如何,这正是 Angular 的前进方向。
00:08:05现在到了 2026 年,展望未来,我们会看到更多的发展,比如 Signal Forms。
00:08:11Angular 团队也在积极拥抱 AI,在 CLI 中内置了 MCP 服务,
00:08:17让 AI 辅助开发 Angular 应用变得更简单,让 AI 更好地理解 Angular 的特性。
00:08:22总的来说,这是一个在保持稳定和向下兼容的同时,不断自我革新的框架故事。
00:08:28虽然它至少重塑了自己一两次(取决于你怎么看),但它始终非常可靠。
00:08:35我认为 Angular 团队做得非常出色,他们成功地将 Angular 从一个感觉臃肿、
00:08:40学习曲线陡峭的框架转变为一个现代化的框架。顺便提一下,Angular 一直是一个
00:08:46“全家桶式”(Batteries Included)框架。它内置了表单处理、路由、HTTP 请求、
00:08:52依赖注入以及组件间的状态管理。所有功能都开箱即用。
00:09:01你不需要像 React 那样去寻找各种第三方库(比如第三方路由、
00:09:08状态管理库等等)。而这正是许多企业非常看重的一点。正因如此,
00:09:15如果你观察 Angular 过去十年的增长曲线,它一直保持着稳步增长。
00:09:23不过事实也确实是,React 的增长速度要快得多。如果把 React 的曲线放上来,
00:09:30Angular 的增长看起来就没那么显眼了。尤其是自 2025 年初以来,React 的热度再次飙升,
00:09:36大家都知道原因——因为 AI。我在之前的视频里也多次提到过,
00:09:43目前的 AI 显然更青睐 React、Next.js 和 Tailwind,而不是 Angular。
00:09:50但这是否意味着 Angular 已经过时了,或者你不应该再学习它了呢?
00:09:59在 AI 背景下,Angular 的未来又将如何?实际上,直到今天,Angular 仍是
00:10:06许多大型企业的首选,这正是得益于它的稳定性和久经考验的兼容性。
00:10:13这种“全家桶”模式让它在大型公司中非常受欢迎。当然,React 在大厂里也很流行,
00:10:19但 Angular 的下载量并不能完全真实地反映它在企业级应用中的实际地位。
00:10:26从我的课程数据来看,这门课已经有 85 万名学员了,这和我在 Udemy 上的
00:10:33React 课程相比也并不逊色多少。虽然 Udemy 上的 React 大课确实更多一些,
00:10:39但我的实际体验和那些单纯的统计图表还是有所出入的。
00:10:46我观察到企业客户依然在大量学习和使用 Angular。因此,直到今天,
00:10:54它仍然是构建现代 Web 应用的绝佳选择。得益于“Angular 文艺复兴”以及
00:10:59许多正在计划中的新功能,它依然非常前卫。当然,AI 的影响是不容忽视的。
00:11:06AI 正在改变我们写代码的方式。我们亲手写的代码变少了,至少我是这样。
00:11:12我会使用像 Claude 或 Cursor 之类的工具(顺便说一下,我也开了相关的课程,
00:11:18链接就在视频下方)。我们构建程序的方式发生了变化。但是,技术选择依然至关重要。
00:11:23我们仍然需要那些维护良好、能提供安全更新、有新功能来提升效率和性能、
00:11:29甚至能减少对第三方库依赖的技术。在这种情况下,Angular 依然是一个
00:11:37非常优秀的选择,就像 React 一样。当然,在有人评论之前我要先说,
00:11:45Vue 和 Svelte 也都非常棒。不过这期视频的主角是 Angular。
00:11:54所以,是的,它仍然是很好的选择。而且 AI 也很擅长写 Angular 代码,
00:12:00前提是你得给它提供正确的上下文——其实无论用什么技术这都是必须的。
00:12:06因此我认为 Angular 在 AI 驱动的未来有着良好的定位。如果你觉得
00:12:13三五年后就没人写代码了,那么技术选择确实不再重要,但我不这么认为。
00:12:18从我的日常使用经验来看,虽然我现在大部分代码都是由 AI 生成的,但如何去控制它、
00:12:27引导它,以及在技术和软件架构上做出明智的选择,反而变得比以往任何时候都更重要。
00:12:34Angular 在这方面依然极具竞争力。这就是我对 Angular 的简短回顾,
00:12:40这个框架在我心中永远占有特殊的位置。正如我提到的,这是我在 Udemy 上发布的第一个大课。
00:12:46它彻底改变了我的生活,让我能以制作课程为生。它也改变了无数人的生活和职业生涯。
00:12:53我收到了很多很棒的反馈,所以,是的,Angular 过去一直很出色,
00:13:00对我而言,它更是意义非凡。
00:13:08it not far behind my React course on Udemy. Now of course, there also are more React courses
00:13:15on Udemy or more bigger React courses on Udemy than there are Angular courses. But nonetheless,
00:13:22my experience has not been the one that you could derive from just these charts. I have
00:13:29always seen that especially business customers are learning Angular a lot too. And that of
00:13:36course therefore makes it still, to this day, a great choice for building web applications,
00:13:43modern web applications. And it is very modern, thanks to the Angular Renaissance and all the
00:13:48features that are still being planned. Of course, the thing to consider is AI. And AI is changing,
00:13:57of course, how we build programs, how we write code. We write less code. I write less code
00:14:04at least. I use tools like ClotCode or Cursor, for which I also have courses, by the way.
00:14:09They're all linked below the video if you want to join them. We write code, we build
00:14:14programs differently. But of course, our technology choices still matter. We still want to use
00:14:21technologies that are well maintained, that get security updates, that get some new features
00:14:27that make them more efficient or that lead to better performance or that enable new use
00:14:34cases that maybe then don't require third-party libraries anymore. We still want to use technologies
00:14:40like this. And when it comes to that, Angular, of course, still is a decent and excellent
00:14:45choice, just like React is, to be very clear here. And of course, before I get the comments,
00:14:51yes, Vue and Svelte, they're all amazing, too. This video, as you maybe noticed by looking
00:14:57at the video title and thumbnail, is about Angular, though. So yes, it still is a great
00:15:02choice. And yes, AI knows how to write Angular code, especially if you give it the right context,
00:15:08which you always have to do no matter what you're building with which technology. And
00:15:13therefore, I think Angular is well positioned for this AI-powered future. If you believe
00:15:19that in three years or so, nobody's going to write any code anymore anyways, and therefore
00:15:25technology choices don't matter anymore, things will be different, of course, for you. That
00:15:30is not my belief, though. From what I see, from my day-to-day usage with AI, where I'm
00:15:35heavily using it and where most of my code is generated by AI, I can tell you controlling
00:15:41it, steering it, making choices, choosing technologies, choosing software architectures is more important
00:15:48than ever. And yeah, Angular is still a great choice there. So that was my short history
00:15:54on Angular, a framework that will always have a special place in my heart. Because as I mentioned,
00:16:00this was the first major course at least that I released on Udemy. And it has changed a lot
00:16:07for me. It allowed me to create courses for a living. It has changed the lives and careers
00:16:13of countless people. I got so many awesome messages and feedback. And therefore, yeah,
00:16:19Angular always was amazing. And it's especially amazing for me.

Key Takeaway

Angular 凭借其持续的自我革新、对企业级需求的深度契合以及在 AI 辅助下的高效架构,依然是现代 Web 开发的顶级选择。

Highlights

Angular 框架在过去十年中经历了从 AngularJS 到现代 Angular 的巨大演变

2017 年至 2020 年的“平淡期”虽看似停滞,但为后续的技术飞跃打下了稳定性基础

“Angular 文艺复兴”通过引入独立组件、Signals 和无 Zone 化方案重塑了框架

Angular 作为“全家桶”框架,在大型企业应用中因其稳定性和开箱即用的特性而备受青睐

在 AI 时代,虽然 React 增长迅猛,但 Angular 的结构化特性使其依然具有极强的竞争力

AI 工具(如 Claude 和 Cursor)正改变编程方式,但架构选择和技术引导的重要性反而提升

Timeline

回首初衷:Angular 2 的诞生与变革

主讲者回顾了他在十年前发布第一版 Angular 2 课程的纪念时刻,并以此引出框架的发展史。这段时期标志着 Web 开发从 jQuery 时代向功能更强大的原生 Web 应用转型。Angular 2 在 2014 年宣布并在随后几年内推翻了 AngularJS 的设计,引入了模块化和装饰器等全新概念。尽管当时的变动引起了社区的巨大争议,但它奠定了现代组件化开发的基础。这一阶段的课程更新非常频繁,反映了早期技术生态的不稳定性与探索精神。

稳定期与竞争:消失的第 3 版与 Ivy 编译器

视频详细解释了 Angular 团队每六个月发布一个大版本的策略,以及为何在 2017 年为了统一版本号而跳过了版本 3。在 2017 到 2020 年间,Angular 进入了一个看似变化的“平淡期”,但这期间团队一直在秘密研发重大的 Ivy 编译器。这段时间恰逢 Vue.js 和 React 快速崛起,尤其是 React Hooks 的出现让 Angular 显得更新缓慢。然而,主讲者指出这种稳定性实际上是企业级用户非常看重的特质。虽然外界调侃 JavaScript 生态日新月异,但 Angular 此时选择深耕底层架构以优化打包体积和运行效率。

Angular 文艺复兴:独立组件与 Signals

从 2022 年发布的 Angular 14 开始,框架进入了被称为“文艺复兴”的新阶段,核心是简化开发流程。引入独立组件(Standalone Components)后,开发者不再被迫使用复杂的模块定义,极大地降低了上手难度。2023 年发布的版本 16 进一步引入了 Signals 信号机制和新的控制流语法,显著提升了响应式性能。通过减少对 zone.js 的依赖,Angular 正在向更细粒度、更高效的变更检测机制进化。这一系列改进让 Angular 重新获得了社区的喜爱,并与 Vue 和 SolidJS 等现代框架保持同步。

企业级优势与全家桶模式

主讲者强调了 Angular 作为“全家桶”(Batteries Included)框架的独特价值,即内置了路由、表单、HTTP 客户端等所有必要工具。与 React 需要自行挑选第三方库不同,Angular 的标准统一性使其成为大型企业的首选,方便团队协作与维护。虽然 React 在公开下载量和 AI 推荐度上(如 Next.js 和 Tailwind)表现更亮眼,但 Angular 在企业市场的实际占有率依然稳固。主讲者分享了自己的课程数据,显示 Angular 学生的活跃度并不亚于 React。这种由官方维护的完整生态系统,为生产环境提供了极高的安全感和可预测性。

AI 时代的未来:代码生成与架构导向

在视频的最后部分,主讲者探讨了 AI 如何改变编程范式,并强调技术选择在 AI 时代依然至关重要。虽然开发者现在更多地使用 AI 工具如 Claude 或 Cursor 来生成代码,但如何引导 AI、选择合适的软件架构依然是人类的核心职责。Angular 团队也在积极拥抱 AI,例如在 CLI 中内置了 MCP 服务以增强 AI 的上下文感知。主讲者坚信技术架构的明智选择比以往任何时候都重要,因为这决定了系统的可维护性和长期性能。最后,他表达了对 Angular 的深厚感情,感谢这个框架改变了他的职业生涯并帮助了无数开发者。

Community Posts

View all posts