Services in Angular: Reusable Business Logic

In professional apps, you do not put all logic inside components. Components should focus on UI. Services handle data and business logic. ## Example: a simple user service ```ts import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class UserService { getUserName() { return 'Christopher Evans'; } } ``` ## Use it inside a component ```ts import { Component } from '@angular/core'; import { UserService } from './user.service'; @Component({ selector: 'app-header', standalone: true, template: `<h1>Hi, {{ name }}</h1>`, }) export class HeaderComponent { name = ''; constructor(private userService: UserService) { this.name = this.userService.getUserName(); } } ``` ## Why this matters If you keep logic in services: - components stay small and readable - logic becomes reusable - testing is easier > Next: Dependency Injection explained, so services feel natural (not magic).