Angular ਵਿੱਚ services ਅਤੇ dependency injection ਕੀ ਹਨ?

Question

Accepted Answer

ਇੱਕ **service** ਇੱਕ ਕਲਾਸ ਹੈ **non-UI ਲਾਜਿਕ** ਲਈ — ਡੇਟਾ ਫੈਚ ਕਰਨਾ, ਵਪਾਰਕ ਨਿਯਮ, ਸਾਂਝੀ ਅਵਸਥਾ, ਲਾਗਿੰਗ — ਜੋ ਕਿ ਕੰਪੋਨੇਂਟਸ ਦੁਬਾਰਾ ਵਰਤ ਸਕਦੇ ਹਨ। **Dependency Injection (DI)** ਉਹ ਹੈ ਕਿ Angular ਇਹ ਸੇਵਾਵਾਂ ਉਨ੍ਹਾਂ ਕੰਪੋਨੇਂਟਸ ਨੂੰ *ਦਿੰਦਾ ਹੈ* ਜਿਨ੍ਹਾਂ ਨੂੰ ਇਹਨਾਂ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਬਜਾਏ ਇਸ ਦੇ ਕਿ ਕੰਪੋਨੇਂਟਸ ਉਹਨਾਂ ਨੂੰ ਖੁਦ ਬਣਾਉਂਦੇ ਹਨ।

## ਇੱਕ 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); }
}
```

`@Injectable({ providedIn: "root" })` decorator ਸੇਵਾ ਨੂੰ Angular ਦੀ DI ਪ੍ਰਣਾਲੀ ਨਾਲ ਇੱਕ ਸਿੰਗਲ ਸਾਂਝਾ ਮੌਜੂਦਾ (singleton) ਦੇ ਰੂਪ ਵਿੱਚ ਪੂਰੀ ਐਪ ਲਈ ਰਜਿਸਟਰ ਕਰਦਾ ਹੈ।

## ਇਸ ਨੂੰ ਇੱਕ component ਵਿੱਚ ਇੰਜੈਕਟ ਕਰਨਾ

```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
}
```

ਤੁਸੀਂ ਸਿਰਫ constructor ਪੈਰਾਮੀਟਰ ਦੇ ਰੂਪ ਵਿੱਚ ਸੇਵਾ ਘੋਸ਼ਿਤ ਕਰਦੇ ਹੋ; Angular ਦੀ DI ਮੌਜੂਦਾ ਨੂੰ **ਬਣਾਉਂਦੀ ਅਤੇ ਫ਼ਰਾਹਮ ਕਰਦੀ ਹੈ**। ਤੁਸੀਂ ਕਦੇ `new UserService()` ਨਹੀਂ ਲਿਖਦੇ। (ਆਧੁਨਿਕ Angular constructor injection ਦੀ ਬਜਾਏ `inject()` ਫੰਕਸ਼ਨ ਵੀ ਵਰਤ ਸਕਦਾ ਹੈ।)

```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 ਨੂੰ ਬਣਾਉਂਦਾ ਨਹੀਂ, ਤੁਸੀਂ ਟੈਸਟਾਂ ਵਿੱਚ ਇੱਕ **ਨਕਲੀ** ਸੇਵਾ ਇੰਜੈਕਟ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਇੱਕ ਸਥਾਨ ਉੱਤੇ ਪੂਰੀ ਐਪ ਵਿੱਚ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ।

## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰਖਦਾ ਹੈ

Services + DI Angular ਆਰਕੀਟੇਕਚਰ ਵਿੱਚ ਕੇਂਦਰੀ ਹਨ: components UI ਉੱਤੇ ਫੋਕਸ ਕੀਤੇ ਰਹਿੰਦੇ ਹਨ ਜਦਕਿ services logic ਅਤੇ state ਰਖਦੀਆਂ ਹਨ, ਅਤੇ DI ਉਹਨਾਂ ਨੂੰ ਘੱਟ coupling ਨਾਲ ਜੋੜਦੀ ਹੈ।

ਇਹ ਵੰਡ (ਅਤੇ ਜੋ testability ਇਹ ਲਿਆਉਂਦੀ ਹੈ) Angular ਦੀਆਂ ਪਰਿਭਾਸ਼ਿਤ ਮਜ਼ਬੂਤੀਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ — backend frameworks ਤੋਂ ਲਈ ਗਈ — ਅਤੇ `@Injectable({ providedIn: 'root' })` ਇੱਕ ਸਾਂਝੀ, injectable singleton ਲਈ ਰੋਜ਼ਮੁਰਾ ਦਾ ਪੈਟਰਨ ਹੈ।