Why should you care?

Without services, each component duplicates HttpClient code and caches inconsistently.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Injectable({ providedIn: 'root' })
export class AccountService {
  private http = inject(HttpClient);
  private base = '/api/accounts';

  list(): Observable<Account[]> {
    return this.http.get<Account[]>(this.base);
  }

  getById(id: string): Observable<Account> {
    return this.http.get<Account>(`${this.base}/${id}`);
  }
}

What happened?

• providedIn: 'root' registers a singleton.
• inject(HttpClient) avoids constructor boilerplate.
• Methods return Observables for async streams.

Practice next

1. ng generate service core/account
2. Inject AccountService in AccountListComponent
3. Subscribe with async pipe in template
4. Add shareReplay(1) for cached account list.
5. Mock AccountService in component tests.

Remember

Services own API and shared business logic. providedIn root = one app-wide instance. Return Observables; let components use async pipe.

SaaS tenant context

MeanVerse TenantService holds current org id for all feature API calls.

Outcome: One service ensures every request sends X-Tenant-Id header.