যখন কম্পোনেন্টগুলোর মধ্যে লজিক শেয়ার করার প্রয়োজন হয়, Angular ডিপেন্ডেন্সি ইনজেকশন ডিজাইন প্যাটার্নটি কাজে লাগায়, যার মাধ্যমে আপনি একটি “সার্ভিস” তৈরি করতে পারেন — এটি একটিমাত্র নির্ভরযোগ্য উৎস থেকে পরিচালিত হয়ে কম্পোনেন্টে কোড ইনজেক্ট করার সুযোগ দেয়।
সার্ভিস কী?
সার্ভিস হলো পুনর্ব্যবহারযোগ্য কোডের অংশ, যা ইনজেক্ট করা যায়।
কম্পোনেন্ট সংজ্ঞায়িত করার মতোই, সার্ভিস নিচের অংশগুলো নিয়ে গঠিত:
- একটি TypeScript ডেকোরেটর, যা
@Service-এর মাধ্যমে ক্লাসটিকে Angular সার্ভিস হিসেবে ঘোষণা করে এবং এমন একটি সার্ভিস সংজ্ঞায়িত করার সুযোগ দেয় যা আপনার অ্যাপ্লিকেশনের যেকোনো জায়গা থেকে ব্যবহার করা যায়। - একটি TypeScript ক্লাস, যা সার্ভিসটি ইনজেক্ট করা হলে যে কোড ব্যবহারযোগ্য হবে তা সংজ্ঞায়িত করে
এখানে একটি Calculator সার্ভিসের উদাহরণ দেওয়া হলো।
import {Service} from '@angular/core';
@Service()
export class Calculator {
add(x: number, y: number) {
return x + y;
}
}সার্ভিস যেভাবে ব্যবহার করবেন
কোনো কম্পোনেন্টে একটি সার্ভিস ব্যবহার করতে চাইলে আপনাকে যা করতে হবে:
- সার্ভিসটি ইমপোর্ট করুন
- একটি ক্লাস ফিল্ড ঘোষণা করুন যেখানে সার্ভিসটি ইনজেক্ট হবে। বিল্ট-ইন ফাংশন
inject-এর কলের ফলাফল ক্লাস ফিল্ডটিতে অ্যাসাইন করুন, যা সার্ভিসটি তৈরি করে
Receipt কম্পোনেন্টে এটি দেখতে যেমন হতে পারে:
import {Component, inject} from '@angular/core';
import {Calculator} from './calculator';
@Component({
selector: 'app-receipt',
template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
private calculator = inject(Calculator);
totalCost = this.calculator.add(50, 25);
}এই উদাহরণে, Angular-এর inject ফাংশন কল করে তাতে সার্ভিসটি পাস করার মাধ্যমে Calculator ব্যবহার করা হচ্ছে।