මොඩියුලය 5: Dependency Injection & Services

Service එකක් යනු නිශ්චිත කාර්යයක් සඳහා වෙන්වූ, හොඳින් අර්ථ දක්වන ලද TypeScript class එකකි. Component එකක් සෘජුවම කළ යුතු නොවන කාර්යයන් Services වලට පැවරිය හැක.

උදාහරණ:

• වෙබ් සේවාදායකයකින් (web server) දත්ත ලබා ගැනීම (Fetching data from an API).
• Browser එකේ local storage එකට දත්ත ලිවීම/කියවීම.
• ලොග් කිරීම (Logging).
• යෙදුම පුරා බෙදාහදා ගත යුතු දත්ත හෝ තර්කනය (Share data or logic across components).

Services භාවිතා කිරීමෙන්, අපගේ Components සැහැල්ලු වන අතර දර්ශනය (view) පාලනය කිරීමට පමණක් අවධානය යොමු කරයි. තර්කනය Service එකක ඇති නිසා, එය අවශ්‍ය ඕනෑම Component එකක නැවත භාවිත කළ හැක.

Dependency Injection (DI) යනු design pattern එකකි. එහිදී, class එකක් (උදා: Component එකක්) තමන්ට අවශ්‍ය dependencies (උදා: Service එකක්) තමන් විසින්ම නිර්මාණය කරගැනීම වෙනුවට, පිටතින් (framework එක මගින්) ලබා ගනී.

සරලව කිවහොත්, Component එක "මට X service එක අවශ්‍යයි" කියා ඉල්ලීමක් කරයි, Angular විසින් එම service එකේ instance (පිටපතක්) නිර්මාණය කර Component එකට ලබා දෙයි. Component එකට service එක නිර්මාණය වන ආකාරය ගැන කරදර වීමට අවශ්‍ය නැත.

DI ක්‍රියා කරන ආකාරය:

1. Service එක නිර්මාණය කිරීම: පළමුව, අපි Service class එකක් සාදා, එයට `@Injectable()` decorator එක යොදමු.
2. Service එක ලියාපදිංචි කිරීම (Registering): Service එක Angular injector එකට ලියාපදිංචි කළ යුතුය. මෙය සාමාන්‍යයෙන් `@Injectable({ providedIn: 'root' })` ලෙස සිදු කරයි.
3. Service එක Inject කිරීම: Component එකේ constructor එක තුළ, අපට අවශ්‍ය service එක type එකක් ලෙස සඳහන් කිරීමෙන් Angular විසින් එය inject කරනු ඇත.

Service එකක් generate කිරීමට CLI command එක: ng generate service user-data

// user-data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Registers this service at the root level
})
export class UserDataService {
  getUsers() {
    return [
      { id: 1, name: 'කසුන්' },
      { id: 2, name: 'නදීශා' }
    ];
  }
}

// user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { UserDataService } from '../user-data.service'; // Import the service

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent implements OnInit {
  users: any[];

  // 1. Ask for the service in the constructor
  constructor(private userDataService: UserDataService) { }

  ngOnInit(): void {
    // 2. Use the service
    this.users = this.userDataService.getUsers();
  }
}

Provider එකක් යනු dependency එකක් නිර්මාණය කරන්නේ කෙසේදැයි Angular injector එකට පවසන උපදෙසකි.

Singleton Services

@Injectable({ providedIn: 'root' }) ලෙස service එකක් ලියාපදිංචි කළ විට, Angular විසින් එම service එකේ එකම එක instance (පිටපතක්) පමණක් සම්පූර්ණ යෙදුම සඳහාම නිර්මාණය කරයි. මෙය Singleton ලෙස හැඳින්වේ.

මෙයින් අදහස් වන්නේ, යෙදුමේ ඕනෑම තැනක සිට මෙම service එකට දත්තයක් එකතු කළහොත්, එම දත්ත යෙදුමේ වෙනත් ඕනෑම තැනක සිට ලබාගත හැකි බවයි. මෙය components අතර දත්ත බෙදාහදා ගැනීම සඳහා ඉතා ප්‍රයෝජනවත් වේ.

වෙනත් Provider Scopes

'root' වලට අමතරව, module level එකේ හෝ component level එකේ ද services register කළ හැකිය. Component level එකේ register කළහොත්, එම component එකේ සෑම instance එකක් සඳහාම service එකේ නව instance එකක් නිර්මාණය වේ.