Services & DI
Services — Basics
Shared Logic & Data
💡 Service ek shared kitchen jaisi hai apartment building mein — har flat (component) apna khana khud nahi banaता, ek shared kitchen (service) use karte hain jahan common resources (data, logic) available hain, duplicate na karके.
Service ek CLASS hai jo REUSABLE logic/data rakhta hai — components ke BEECH share hone wali cheezein (API calls, business logic, state) yahan rakhte hain, components ke andar duplicate karne ke bajaye. @Injectable decorator se mark karte hain (Dependency Injection ke liye, aage detail).
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // poore app mein ek hi instance (singleton)
})
export class UserService {
private users = [
{ id: 1, name: 'Aarav' },
{ id: 2, name: 'Riya' }
];
getUsers() {
return this.users;
}
getUserById(id: number) {
return this.users.find(u => u.id === id);
}
}🔌
Service ek shared kitchen jaisi hai apartment building mein — har flat (component) apna khana khud nahi banaता, ek shared kitchen (service) use karte hain jahan common resources (data, logic) available hain, duplicate na karके.
1 / 6
⚡ Quick Recap
- Service = reusable logic/data, components ke beech shared
- @Injectable decorator = DI system ke liye zaroori
- Separation of concerns: components = UI, services = business logic
Is page mein (2 subtopics)
Services khud bhi DOOSRE services par depend kar sakte hain — DI system yaha bhi kaam karta hai, service ke constructor mein dusra service inject karके.
@Injectable({ providedIn: 'root' })
export class AuthService {
isLoggedIn = true;
}
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private authService: AuthService) { } // service DEPENDS on service
getUserData() {
if (!this.authService.isLoggedIn) {
throw new Error('Not authenticated');
}
return { name: 'Aarav' };
}
}Tip: Ye "chain of services" pattern bade applications mein bahut common hai — har service ek SPECIFIC responsibility rakhta hai (AuthService = authentication, UserService = user data), aur zaroorat ke hisaab se ek doosre par depend karte hain.
Rule of thumb: agar logic UI-specific hai (jaise "button click par animation"), COMPONENT mein rakho. Agar logic REUSABLE hai ya DATA/API se related hai (jaise "users fetch karna"), SERVICE mein rakho.
// Component — UI logic:
export class ButtonComponent {
isPressed = false;
onClick() { this.isPressed = true; } // purely UI state
}
// Service — business/data logic:
@Injectable({ providedIn: 'root' })
export class ApiService {
fetchUsers() { /* HTTP call logic */ } // reusable, non-UI logic
}Tip: Agar tum khud se puchte ho "kya ye logic DOOSRE component mein bhi chahiye hogi?" — agar haan, service mein hona chahiye. Agar ye SIRF is component ke UI se related hai, component mein hi theek hai.