掌握 Angular 原子设计：从理论到实践

MP4 |视频：h264，1280×720 |音频：AAC、44.1 KHz、2 Ch
级别：全部 |类型： 电子学习 |语言： 英语 |持续时间：43 个讲座（3h 2m）

你将学到什么

• 了解原子设计方法以及它为何对 Angular 项目如此强大
• 从头开始搭建完整的 Angular 20 + Tailwind v4 开发环境
• 构建可重用、可访问且可测试的原子（输入、按钮、图标）
• 将原子组合成分子和有机体，形成复杂、可扩展的 UI 组件
• 创建将结构与内容分开的模板和页面，以实现一致的布局
• 应用 Tailwind 设计标记、主题和深色模式，打造精美、响应式的样式
• 使用 Angular Signals 管理应用程序状态，构建购物车或仪表板等服务
• 实施高级 Angular 技术：内容投影、指令、动画、SSR 和微前端
• 使用原子设计开发实际应用程序（电子商务、仪表板、博客、看板）
• 执行顶点审核，以评估 Atomic Angular 应用的可扩展性、可访问性、性能和可维护性

要求

HTML、CSS 和 JavaScript 的基本知识会有所帮助，但不是必需的
接触 Angular（组件、模板）会更好，但欢迎初学者
安装了 Node.js 和 npm 的计算机（我们将指导您完成设置）
Visual Studio Code（或您喜欢的任何代码编辑器）
用于安装 Angular CLI、Tailwind 和依赖项的互联网连接
微笑和好奇心来学习 – 无需事先具备设计系统知识！

描述

欢迎学习《掌握 Angular 原子设计：从理论到可持续实践》——这是使用 Angular 20 和 Tailwind CSS v4 构建可扩展、可重用且美观的应用程序的完整分步指南。如果您曾经因凌乱的组件、重复的样式或难以维护的 UI 元素而苦恼，那么本课程适合您。我们将采用经过验证的原子设计方法，并将其直接应用到 Angular 中，为您提供清晰的路线图，用于创建平稳增长而不会陷入混乱的应用程序。我们从原子设计的基础知识开始，您将在其中学习如何构建干净、可测试且可访问的原子（按钮、输入、图标）。然后我们将把这些原子组合成分子和有机体，形成用户界面的构建块。从那里，您将设计定义布局和结构的模板和页面，使您的应用程序一致且专业。样式由最新的实用程序优先 CSS 框架 Tailwind v4 提供支持。您将学习如何使用标记、主题和深色模式来实现精美的设计，而无需编写无休止的 CSS。我们还将在需要时集成 Angular Material，确保您的组件保持现代化且易于访问。随着您变得更加自信，我们将深入使用 Angular Signals 进行状态管理，构建购物车和仪表板数据层等服务。您将练习组件之间的真实通信，同时保持代码整洁和反应性。在高级部分中，我们将解锁强大的 Angular 20 功能：内容投影、指令、动态表单、依赖项注入、动画、SSR（服务器端渲染），甚至微前端。每节课都实用且重点突出，向您准确展示如何在原子设计工作流程中应用这些工具。为了使学习更具吸引力，我们将一起构建现实世界的应用程序 – 电子商务流程、管理仪表板、博客、社交源和看板。这些项目将所有概念结合在一起，让您有信心在自己的工作中使用它们。最后，我们将运行 Capstone 审核来检查可访问性、性能和可扩展性，确保您知道如何交付可立即投入生产的应用程序。在本课程结束时，您不仅会了解原子设计理论，而且还能够从头到尾在 Angular 项目中实现它。无论您是初学者还是经验丰富的开发人员，您都将拥有创建团队喜欢使用的可持续设计系统、可重用组件和应用程序的技能和信心。

本课程适合谁

希望以清晰、结构化的方式构建可扩展 UI 的初级 Angular 开发人员。
希望通过 Atomic Design 和 Tailwind CSS v4 升级的中级 Angular 开发人员。
厌倦了混乱、重复的组件并寻找可重用设计模式的前端工程师。
希望将设计系统与 Angular 代码连接起来的 UI/UX 爱好者。
旨在使 Angular 项目可持续发展的团队领导或全栈开发人员并且可维护。
希望通过构建真实应用程序（电子商务、博客、看板、仪表板）进行实践练习的学生和自学者。
任何对原子设计及其如何适应现代 Angular 20 工作流程感到好奇的人。