现代Angular UI模式用于加载状态、错误处理和数据展示。适用于构建UI组件、处理异步数据或管理组件状态。技能概述angular-ui-patterns 技能提供现代Angular UI模式专注于加载状态、错误处理和数据展示。该技能帮助开发者构建用户友好的界面正确处理异步操作和错误情况。下载地址https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular-ui-patterns核心原则永不显示过时UI仅在真正加载时显示加载状态始终展示错误用户必须知道何时出现问题乐观更新让UI感觉即时响应渐进式披露使用defer在内容可用时显示优雅降级部分数据优于无数据加载状态模式黄金法则仅当没有数据可显示时才显示加载指示器。Component({template: if (error()) {app-error-state [error]error() (retry)load() /} else if (loading() !items().length) {app-skeleton-list /} else if (!items().length) {app-empty-state messageNo items found /} else {app-item-list [items]items() /},})export class ItemListComponent {private store inject(ItemStore);items this.store.items;loading this.store.loading;error this.store.error;}加载状态决策树决策流程1. 是否有错误→ 是显示错误状态并提供重试选项2. 是否正在加载且没有数据→ 是显示加载指示器骨架屏/旋转器3. 是否有数据→ 有数据显示数据空数据显示空状态骨架屏 vs 旋转器使用骨架屏场景使用旋转器场景已知内容形状未知内容形状列表/卡片布局模态操作初始页面加载按钮提交内容占位符内联操作控制流模式if/else条件渲染if (user(); as user) {spanWelcome, {{ user.name }}/span} else if (loading()) {app-spinner sizesmall /} else {a routerLink/loginSign In/a}for与trackfor (item of items(); track item.id) {app-item-card [item]item (delete)remove(item.id) /} empty {app-empty-state iconinbox messageNo items yet actionLabelCreate Item (action)create() /}defer渐进式加载!-- 关键内容立即加载 --app-header /app-hero-section /!-- 非关键内容延迟加载 --defer (on viewport) {app-comments [postId]postId() /} placeholder {div classh-32 bg-gray-100 animate-pulse/div} loading (minimum 200ms) {app-spinner /} error {app-error-state messageFailed to load comments /}错误处理模式错误处理层次内联错误字段级表单验证错误Toast通知可恢复错误用户可重试错误横幅页面级错误数据仍部分可用全屏错误不可恢复需要用户操作始终显示错误// 正确 - 错误始终向用户显示Component({...})export class CreateItemComponent {private store inject(ItemStore);private toast inject(ToastService);async create(data: CreateItemDto) {try {await this.store.create(data);this.toast.success(Item created successfully);this.router.navigate([/items]);} catch (error) {console.error(createItem failed:, error);this.toast.error(Failed to create item. Please try again.);}}}// 错误 - 错误被静默捕获async create(data: CreateItemDto) {try {await this.store.create(data);} catch (error) {console.error(error); // 用户看不到任何信息}}按钮状态模式按钮加载状态button (click)handleSubmit() [disabled]isSubmitting() || !form.valid classbtn-primaryif (isSubmitting()) {app-spinner sizesmall classmr-2 /Saving...} else {Save Changes}/button空状态空状态要求每个列表/集合都必须有空状态for (item of items(); track item.id) {app-item-card [item]item /} empty {app-empty-state iconfolder-open titleNo items yet descriptionCreate your first item to get started actionLabelCreate Item (action)openCreateDialog() /}最佳实践加载状态仅在无数据时显示加载指示器错误显示永不静默吞掉错误始终向用户展示按钮禁用异步操作期间始终禁用触发器空状态每个列表都应有友好的空状态渐进式加载使用defer延迟非关键内容骨架屏已知形状时优先使用骨架屏乐观更新让UI感觉即时响应注意事项限制仅在任务明确匹配上述范围时使用此技能不要将输出视为环境特定验证、测试或专家审查的替代品如果缺少必需的输入、权限、安全边界或成功标准请停止并请求澄清
