Angular Example

Project Setup

For installation, configuration, and first-time setup, see the Angular Tutorial.

Overview

This example demonstrates how to integrate ApiSorcery with Angular projects. Angular is a comprehensive platform for building web applications with TypeScript, providing powerful features like dependency injection, RxJS observables, and a robust CLI.

Features

• Type safety: Full TypeScript support with generated interfaces and types
• RxJS integration: Seamless integration with Angular's reactive programming patterns
• Dependency injection: Angular services for clean architecture
• Axios integration: Built-in support for Axios HTTP client with interceptors
• IntelliSense support: Full IDE support with auto-completion and type checking
• Tree shaking: Optimized bundle size with ES modules support

Demo Functionality

This demo app implements a complete User Management module backed by a live API:

• Paginated list — query users with filtering by code, name, and status
• Full CRUD — create, view, edit, and delete user records
• Avatar upload — upload images via POST /file/upload, with 10 MB size validation
• Excel export — download filtered results as .xlsx via the Blob response
• Field validation — async uniqueness check for the code field before form submission

Code Examples

Paginated List

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 Export

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);
}

Avatar Upload

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(`File size (${sizeMB.toFixed(2)} MB) exceeds the 10 MB limit`);
  const fileId = await ApiFile.uploadFile({ file });
  return `${environment.apiUrl}/file/${fileId}`;
}

Best Practices

1. Type Definitions: Leverage generated TypeScript interfaces for better type safety
2. Angular Services: Encapsulate API calls in injectable services for reusability
3. RxJS Operators: Use RxJS operators for data transformation and error handling
4. Dependency Injection: Utilize Angular's DI system for clean architecture
5. Unsubscribe Pattern: Always unsubscribe from observables to prevent memory leaks
6. Error Handling: Implement proper error handling with Angular's error interceptors
7. Environment Configuration: Use Angular environment files for different API endpoints
8. Lazy Loading: Implement lazy loading for modules to optimize bundle size