Angular માં services અને dependency injection શું છે?

Question

Accepted Answer

A **service** એ એક class છે જે **non-UI logic** માટે છે — data fetching, business rules, shared state, logging — જે components ફરીથી વાપરી શકે છે। **Dependency Injection (DI)** એ તે રીત છે કે જેમાં Angular તે services ને components કે જેને તેની જરૂર છે તેને *પ્રદાન* કરે છે, તેના બદલે components તેમને manually બનાવે છે.

## Service ને વ્યાખ્યાયિત કરવું

```ts
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" }) // makes it a singleton available app-wide
export class UserService {
  private users = [];
  getUsers() { return this.users; }
  addUser(u) { this.users.push(u); }
}
```

The `@Injectable({ providedIn: "root" })` decorator Angular ના DI system સાથે service ને એક single shared instance (singleton) તરીકે આખી app માટે register કરે છે.

## તેને એક component માં inject કરવું

```ts
@Component({ ... })
export class UserListComponent {
  // Angular sees this constructor param and INJECTS the singleton automatically
  constructor(private userService: UserService) {}

users = this.userService.getUsers(); // just use it
}
```

તમે simply constructor parameter તરીકે service declare કરો છો; Angular ના DI **instance બનાવે અને આપે છે**. તમે કોઈ પણ `new UserService()` લખતા નથી. (Modern Angular પણ constructor injection ની બદલે `inject()` function વાપરી શકે છે.)

```ts
import { inject } from "@angular/core";
export class UserListComponent {
  private userService = inject(UserService); // alternative injection style
}
```

## શા માટે DI મૂલ્યવાન છે

```text
✓ Single source of truth — one shared UserService instance across components
✓ Loose coupling — components depend on the type, not on constructing it
✓ Testability — swap in a mock service in tests easily
✓ Lifecycle management — Angular handles creation and sharing
```

કારણ કે component તેના dependencies બનાતું નથી, તમે tests માં **fake** service inject કરી શકો છો, અથવા implementation બદલી શકો છો app-wide એક જગ્યાએ.

## શા માટે તે મહત્વપૂર્ણ છે

Services + DI Angular architecture નું મધ્યવર્તી છે: components UI પર ધ્યાન કેન્દ્રિત રાખે છે જ્યારે services logic અને state રાખે છે, અને DI તેમને minimal coupling સાથે જોડે છે.

Yह separation (અને testability કે જે તે લાવે છે) Angular ની વ્યાખ્યાયિત તાકાતો છે — backend frameworks પાસેથી લીધી — અને `@Injectable({ providedIn: 'root' })` એ everyday pattern છે એક shared, injectable singleton માટે.