Angular 示例

项目配置

安装、初始化和首次配置，请参考 Angular 接入教程。

概述

本示例演示如何将 ApiSorcery 与 Angular 项目集成。Angular 是一个使用 TypeScript 构建 Web 应用程序的综合平台，提供依赖注入、RxJS 可观察对象和强大的 CLI 等强大功能。

特性

• 类型安全：完整的 TypeScript 支持，生成接口和类型
• RxJS 集成：与 Angular 的响应式编程模式无缝集成
• 依赖注入：使用 Angular 服务实现清晰的架构
• Axios 集成：内置支持 Axios HTTP 客户端和拦截器
• 智能提示支持：完整的 IDE 支持，包括自动完成和类型检查
• Tree shaking：通过 ES 模块支持优化打包体积

功能演示

本示例应用基于真实后端 API，实现了完整的用户管理模块：

• 分页列表 — 支持按 code、姓名、状态条件过滤的分页查询
• 完整 CRUD — 新增、查看、编辑、删除用户记录
• 头像上传 — 通过 POST /file/upload 上传图片，含 10 MB 大小校验
• Excel 导出 — 通过 Blob 响应下载过滤后的结果为 .xlsx 文件
• 字段验证 — 表单提交前异步检查 code 字段是否已存在

代码示例

分页查询

import * as ApiUser from '@/app/api/auto/demo/ApiUser';
import type { UserInfoDto } from '@/app/api/auto/demo/model';

async function getUsers(page = 1, filters?: { code?: string; name?: string }) {
  const res = await ApiUser.getUserPaged({
    pagination: { page, limit: 10 },
    code: filters?.code || '',
    name: filters?.name || '',
  });
  return { users: res.results as UserInfoDto[], total: res.total || 0 };
}

Excel 导出

import * as ApiUser from '@/app/api/auto/demo/ApiUser';

async function exportUsers(filters?: { code?: string; name?: string }) {
  const res = await ApiUser.exportUsers({
    code: filters?.code || '',
    name: filters?.name || '',
  });
  const url = URL.createObjectURL(res.data);
  const link = document.createElement('a');
  link.href = url;
  link.download = res.name || 'users.xlsx';
  link.click();
  URL.revokeObjectURL(url);
}

头像上传

import * as ApiFile from '@/app/api/auto/demo/ApiFile';

async function uploadAvatar(file: File): Promise<string> {
  const sizeMB = file.size / 1024 / 1024;
  if (sizeMB > 10) throw new Error(`文件大小（${sizeMB.toFixed(2)} MB）超过 10 MB 限制`);
  const fileId = await ApiFile.uploadFile({ file });
  return `${environment.apiUrl}/file/${fileId}`;
}

最佳实践

1. 类型定义：利用生成的 TypeScript 接口提高类型安全性
2. Angular 服务：将 API 调用封装在可注入的服务中以实现可重用性
3. RxJS 操作符：使用 RxJS 操作符进行数据转换和错误处理
4. 依赖注入：利用 Angular 的 DI 系统实现清晰的架构
5. 取消订阅模式：始终取消订阅可观察对象以防止内存泄漏
6. 错误处理：使用 Angular 的错误拦截器实现适当的错误处理
7. 环境配置：使用 Angular 环境文件配置不同的 API 端点
8. 懒加载：实现模块的懒加载以优化打包体积