🤯 第2部分：从混乱到心智点击：将 Angular 连接到现实世界（并生存下来）

Source: Dev.to

请提供您希望翻译的正文内容（除代码块和 URL 之外），我将为您翻译成简体中文，并保留原有的格式、Markdown 语法以及技术术语。谢谢！

介绍

我们继续……现在真正的混乱开始了 😂
在上一篇文章中，我让项目在线运行，具备登录和注册功能，后端在 Render，前端在 Netlify，数据库在 Railway。我很开心。很兴奋。因为这才是真正好玩的开始：让一个 app 不再是“漂亮的界面”，而是开始使用真实的数据。从“全是 mock”到“这已经是真实的”。

创建模拟数据

在登录功能实现后，我做了一件 关键 的事：

• 👉 创建模拟数据 以便在应用中渲染卡片。

为什么？我开始大量使用 @for、@if 和 @switch。第一次感觉 Angular 不再是仅仅奇怪的理论，而是开始有了视觉上的意义。但显然……这只是骗人的。

Source: …

将 Angular 与真实后端连接

下一步显而易见：

• 👉 停止使用 mock 数据

而这正是让我头疼的地方。我在课堂上老师还没讲清楚之前就尝试了（典型的我抢先一步 😅）。

• 服务应该放在哪里
• 如何配置 providers
• environments 起什么作用
• 为什么有些东西放在组件里，有些不放

结果

与我的朋友 Gregorio（ChatGPT）进行多次“对战”后……代码能跑，但我并没有完全弄懂。

再上几节课，老师终于解释清楚：

• 服务如何连接
• 如何替换 mock 数据
• 一个 Angular 项目需要哪些文件
• 每个文件的用途是什么

就在那一刻，我说：“AHHHHH 现在明白了。”我检查了自己的代码…因为我已经跑过它。那时我才真正明白自己在做什么。这种差距…简直是天壤之别。

响应式表单

我在响应式表单上也遇到了同样的情况。之前已经在 AI 的帮助下完成了一些工作：

• FormGroup
• ReactiveFormsModule
• 验证
• 如 touched、dirty、valid、invalid 等状态

但那感觉就像在使用魔法却不懂咒语，直到老师解释后才明白。

🧠 脑力点击

正因为如此，我特别强调一点：AI 的帮助非常大，关键是它能正常工作。要相信自己学到的东西并加以理解，以便简化。Keep it simple（虽然我一开始并没有听从自己的建议 😅）。

常见错误

我的项目也变得复杂，因为我提前涉及了很多概念，犯了一个经典错误：

• 👉 从一开始就没有把想法弄得 100 % 清晰。

在页面、父子组件、路由以及来回传递的数据之间……是非常容易搞砸的。

复杂的数据库

我的数据库过于规范化。所有东西相互依赖。在后端是“漂亮”的，但结果却很麻烦。

双向绑定与伟大的魔法时刻

当我们在课堂上看到双向绑定时，一开始我真的一点也不懂。但我很倔强。几个小时后……突然……

• 👉 “这就是我在项目中创建事件所需要的。”

我在数据类型上遇到了麻烦（很多 date，Angular 生气了 😅），但我做到了。当你几天都不懂的东西突然有了意义……这就是纯粹的魔法。

应用当前状态

我的项目并不完美也不非常干净，但它能运行。这对我来说已经是巨大的成就。

目前应用包含：

1. Landing page

所有这些都通过以下方式连接：

• Angular（前端）
• FastAPI（后端）
• MySQL 在 Railway（数据库）
• JWT 认证

这个过程最真实的部分

最难的不是写代码，而是：

• 迷失方向
• 打碎东西
• 花两小时修复某个东西，却不知道自己动了什么
• 按照 AI 的指示操作，结果比之前更糟
• 不明白为什么本该运行的东西不工作

但同样的还有：

• 请求帮助
• 回归简洁
• 与老师们教的内容进行比较
• 试验、破坏、重做

最重要的是：

• 👉 不放弃。

几个月前的我觉得这不可能。而这价值连城 💛

如何测试应用

🚀 现在你可以尝试该应用（还有很多东西缺失，需要大量改进，我知道）。

经过多次迭代、bug、重构以及存在主义危机的时刻…

Angular 前端

如果你想随便看看，可以使用以下演示账号登录：

• 用户: laura.lopez@demo.com

有用链接

• 前端（线上应用）：
• 前端代码：
• 后端代码：