300-angular-services

Angular Services Best Practices

• Injectable Services: Always use the @Injectable() decorator with providedIn: 'root' for singleton services.

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // Service implementation
}

• State Management Role: Services should act as mediators between components and global state. They should contain business logic but not store state themselves.

@Injectable({
  providedIn: 'root'
})
export class OrderService {
  constructor(private orderStore: OrderStore, private http: HttpClient) {}
  
  // Handle business logic and API communication before updating state
  submitOrder(orderData: OrderData): Observable<Order> {
    // Validate data
    if (!this.validateOrder(orderData)) {
      return throwError(() => new Error('Invalid order data'));
    }
    
    // Call API
    return this.http.post<Order>('/api/orders', orderData).pipe(
      tap(newOrder => {
        // Update store on success
        this.orderStore.addOrder(newOrder);
      })
    );
  }
  
  private validateOrder(order: OrderData): boolean {
    // Business logic validation
    return !!order.items.length && !!order.shippingAddress;
  }
}

• Stateless Services: Services should be stateless and not maintain their own state - delegate state management to stores.

// ❌ AVOID: Service with internal state
@Injectable({ providedIn: 'root' })
export class BadCartService {
  private items: CartItem[] = []; // Don't store state here
  
  addItem(item: CartItem): void {
    this.items.push(item); // State in service is bad
  }
}

// ✅ GOOD: Stateless service that updates store
@Injectable({ providedIn: 'root' })
export class GoodCartService {
  constructor(private cartStore: CartStore) {}
  
  addItem(item: CartItem): void {
    // Business logic, validation, etc.
    if (!item.quantity) item.quantity = 1;
    
    // Update state in store, not service
    this.cartStore.addItem(item);
  }
}

• Business Logic: Place all business logic in services, not in components or stores.

@Injectable({
  providedIn: 'root'
})
export class PaymentService {
  constructor(
    private paymentStore: PaymentStore,
    private http: HttpClient,
    private authService: AuthService
  ) {}
  
  processPayment(paymentInfo: PaymentInfo): Observable<PaymentResult> {
    // Business logic
    const enrichedPayment = this.enrichPaymentData(paymentInfo);
    
    // Start processing - update UI state
    this.paymentStore.setProcessing(true);
    
    // Call API
    return this.http.post<PaymentResult>('/api/payments', enrichedPayment).pipe(
      tap(result => {
        if (result.success) {
          // Update multiple states based on business rules
          this.paymentStore.addPayment(result);
        } else {
          this.paymentStore.setError(result.error);
        }
      }),
      finalize(() => {
        this.paymentStore.setProcessing(false);
      })
    );
  }
  
  private enrichPaymentData(paymentInfo: PaymentInfo): EnrichedPaymentInfo {
    // Complex business logic
    return {
      ...paymentInfo,
      userId: this.authService.getCurrentUserId(),
      timestamp: new Date().toISOString(),
      // Add other derived properties
    };
  }
}

• Signal/Observable Interop: Use toSignal() and toObservable() for interop between RxJS observables and signals.

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  constructor(
    private http: HttpClient,
    private productStore: ProductStore
  ) {}

  // Load products and update store
  loadProducts(): Observable<Product[]> {
    return this.http.get<Product[]>('/api/products').pipe(
      tap(products => {
        this.productStore.setProducts(products);
      })
    );
  }
  
  // Perform business logic before updating store
  addProduct(product: Product): Observable<Product> {
    // Enrichment and validation
    const enrichedProduct = this.prepareProductData(product);
    
    return this.http.post<Product>('/api/products', enrichedProduct).pipe(
      tap(newProduct => {
        this.productStore.addProduct(newProduct);
      })
    );
  }
  
  private prepareProductData(product: Product): Product {
    // Business logic to prepare data
    return {
      ...product,
      createdAt: new Date().toISOString(),
      // Other transformations
    };
  }
}