// Without DI — tightly coupled, hard to test
class OrderComponent {
  private userService = new UserService();       // hard-coded dependency
  private http = new HttpClient(/* ... */);      // how do you mock this in tests?
  private logger = new Logger('OrderComponent'); // different config impossible

  constructor() {}
}

// With DI — loosely coupled, easily testable
@Component({ selector: 'app-order' })
class OrderComponent {
  // Angular creates and provides the dependencies
  constructor(
    private userService: UserService,
    private http: HttpClient,
    private logger: Logger,
  ) {}
}

Root Injector (providedIn: 'root')
  └── Platform Injector (providedIn: 'platform')
        └── App Injector (bootstrapApplication / AppModule)
              └── Feature Module Injector
                    └── Component Injector
                          └── Child Component Injector

import { inject, Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { Router } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({ selector: 'app-dashboard' })
export class DashboardComponent implements OnInit {
  // Inject in field initializer (most concise)
  private userService = inject(UserService);
  private router = inject(Router);
  private title = inject(Title);

  ngOnInit() {
    this.title.setTitle('Dashboard');
    if (!this.userService.isLoggedIn()) {
      this.router.navigate(['/login']);
    }
  }
}

@Injectable({ providedIn: 'root' })
export class PaymentService {
  constructor(
    private http: HttpClient,
    private logger: LoggingService,
    private config: AppConfigService,
  ) {}

  processPayment(amount: number): Observable<PaymentResult> {
    this.logger.log(`Processing payment: ${amount}`);
    return this.http.post<PaymentResult>('/api/payments', {
      amount,
      currency: this.config.get('defaultCurrency'),
    });
  }
}

import { Optional, Self, SkipSelf, Host, inject } from '@angular/core';

// Constructor-style
@Component({ selector: 'app-child' })
export class ChildComponent {
  constructor(
    @Optional() private theme: ThemeService,       // null if not provided
    @Self() private validator: ValidatorService,   // only own injector
    @SkipSelf() private parent: ParentService,     // skip own, go to parent
    @Host() private host: HostService,             // stop at host
  ) {}
}

// inject()-style (Angular 14+)
@Component({ selector: 'app-child' })
export class ChildComponent {
  private theme = inject(ThemeService, { optional: true }); // null if missing
  private validator = inject(ValidatorService, { self: true });
  private parent = inject(ParentService, { skipSelf: true });
}

// 1. Root level — singleton for the entire app (most common)
@Injectable({ providedIn: 'root' })
export class AuthService {}

// 2. Component level — new instance per component
@Component({
  selector: 'app-cart',
  providers: [CartService], // isolated CartService for this component tree
})
export class CartComponent {}

// 3. Route level — new instance per route activation
export const routes: Routes = [
  {
    path: 'checkout',
    component: CheckoutComponent,
    providers: [CheckoutService], // scoped to this route
  },
];

// 4. Lazy module level — new instance for the module
@NgModule({
  providers: [FeatureService], // available within this module only
})
export class FeatureModule {}

import { InjectionToken, inject } from '@angular/core';

// Define the token
export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL');

// Provide it at bootstrap
bootstrapApplication(AppComponent, {
  providers: [
    { provide: API_BASE_URL, useValue: 'https://api.myapp.com' },
  ],
});

// Inject it anywhere
@Injectable({ providedIn: 'root' })
export class HttpService {
  private baseUrl = inject(API_BASE_URL);

  get<T>(path: string): Observable<T> {
    return this.http.get<T>(`${this.baseUrl}${path}`);
  }
}

import { TestBed } from '@angular/core/testing';
import { of } from 'rxjs';

describe('DashboardComponent', () => {
  let component: DashboardComponent;

  const mockUserService = {
    getAll: () => of([{ id: 1, name: 'Alice' }]),
    isLoggedIn: () => true,
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [DashboardComponent],
      providers: [
        // Replace the real service with the mock
        { provide: UserService, useValue: mockUserService },
      ],
    });

    component = TestBed.createComponent(DashboardComponent).componentInstance;
  });

  it('should load users', () => {
    expect(component.users().length).toBe(1);
  });
});

// Modern service with inject() and signals — no constructor needed
import { Injectable, signal, computed, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toSignal } from '@angular/core/rxjs-interop';

@Injectable({ providedIn: 'root' })
export class ProductStore {
  private http = inject(HttpClient);

  private _products = signal<Product[]>([]);
  private _loading = signal(false);
  private _filter = signal('');

  readonly products = this._products.asReadonly();
  readonly loading = this._loading.asReadonly();
  readonly filteredProducts = computed(() =>
    this._products().filter(p =>
      p.name.toLowerCase().includes(this._filter().toLowerCase())
    )
  );

  loadProducts() {
    this._loading.set(true);
    this.http.get<Product[]>('/api/products').subscribe({
      next: products => {
        this._products.set(products);
        this._loading.set(false);
      },
    });
  }

  setFilter(term: string) {
    this._filter.set(term);
  }
}