Angular-এ সার্ভিস হল এমন একটি ক্লাস যা কম্পোনেন্ট, ডিরেক্টিভ, বা অন্যান্য সার্ভিসের মধ্যে পুনঃব্যবহারযোগ্য লজিক এবং ডেটা সরবরাহ করে। সার্ভিস সাধারণত অ্যাপ্লিকেশন লেভেলের ডেটা ম্যানেজমেন্ট, HTTP কল, ফর্ম ভ্যালিডেশন বা অন্যান্য কাজে ব্যবহৃত হয়। Angular সার্ভিসের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হল ডিপেন্ডেন্সি ইনজেকশন (Dependency Injection, DI), যার মাধ্যমে সার্ভিসগুলিকে কম্পোনেন্ট বা অন্যান্য সার্ভিসে ইনজেক্ট করা হয়।
Angular-এ সার্ভিস তৈরি করার জন্য, আমরা সাধারণত CLI ব্যবহার করি, যেটি কোড জেনারেট করতে দ্রুত এবং সহজ উপায় প্রদান করে।
ng generate service user
এটি user.service.ts
নামের একটি সার্ভিস ফাইল তৈরি করবে, যেখানে আমরা আমাদের সার্ভিসের লজিক লিখতে পারব।
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // সার্ভিসটি রুট লেভেলে ইনজেক্ট হবে
})
export class UserService {
constructor() { }
getUserData() {
return { name: 'John Doe', age: 30 };
}
saveUserData(user: any) {
console.log('User data saved:', user);
}
}
এখানে:
@Injectable
ডেকোরেটরটি Angular-কে জানিয়ে দেয় যে এই ক্লাসটি একটি সার্ভিস এবং এটি ইনজেকশনের জন্য প্রস্তুত।providedIn: 'root'
নির্দেশ করে যে সার্ভিসটি অ্যাপ্লিকেশন জুড়ে একটি একক ইন্সট্যান্স (singleton) হিসেবে ব্যবহৃত হবে।একবার সার্ভিস তৈরি হলে, আপনি এটি Angular কম্পোনেন্ট, ডিরেক্টিভ, অথবা অন্য সার্ভিসে ব্যবহার করতে পারেন। সার্ভিসে getUserData()
এবং saveUserData()
ফাংশন রয়েছে, এখন এই সার্ভিসকে একটি কম্পোনেন্টে ইনজেক্ট করা যাক।
প্রথমে, কম্পোনেন্টে সার্ভিসটি ইনজেক্ট করতে হবে:
import { Component } from '@angular/core';
import { UserService } from './user.service'; // সার্ভিস ইমপোর্ট
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
user: any;
constructor(private userService: UserService) { }
ngOnInit() {
this.user = this.userService.getUserData();
}
saveData() {
this.userService.saveUserData(this.user);
}
}
এখানে:
UserService
ইনজেক্ট করা হয়েছে কম্পোনেন্টের কনস্ট্রাক্টরের মাধ্যমে।getUserData()
ফাংশনটি সার্ভিস থেকে ইউজারের ডেটা নিয়ে এসেছে এবং কম্পোনেন্টে প্রদর্শন করা হয়েছে।saveData()
ফাংশনটি সার্ভিসের saveUserData()
ফাংশনকে কল করছে, যা ইউজারের ডেটা কনসোলে লগ করে।<h1>User Data</h1>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<button (click)="saveData()">Save User Data</button>
এখানে, ইউজারের নাম এবং বয়স প্রদর্শিত হচ্ছে এবং একটি বাটনে ক্লিক করলে saveData()
ফাংশনটি কল হয়ে সার্ভিসের মাধ্যমে ডেটা সেভ হবে।
Angular-এ ডিপেন্ডেন্সি ইনজেকশন (DI) ব্যবহারের মাধ্যমে সার্ভিসগুলিকে কম্পোনেন্টে ইনজেক্ট করা হয়। DI নিশ্চিত করে যে প্রতিটি কম্পোনেন্ট বা সার্ভিস তাদের প্রয়োজনীয় সার্ভিস বা ডিপেন্ডেন্সি অ্যাঙ্গুলার রাউটার বা অন্যান্য অংশ থেকে সহজে পেয়ে যাবে।
যদি আপনি দুটি সার্ভিসকে ইনজেক্ট করতে চান, তাহলে কনস্ট্রাক্টরের মাধ্যমে তা করা হয়:
import { Component } from '@angular/core';
import { UserService } from './user.service';
import { ProductService } from './product.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private userService: UserService, private productService: ProductService) { }
ngOnInit() {
console.log(this.userService.getUserData());
console.log(this.productService.getProductList());
}
}
এখানে, UserService এবং ProductService দুটো সার্ভিসকে একসাথে ইনজেক্ট করা হয়েছে।
এছাড়া, সার্ভিসে HTTP কল করার জন্য HttpClient ব্যবহার করা যায়। HTTP কলের মাধ্যমে সার্ভিসটি অ্যাপ্লিকেশন থেকে সার্ভারের সঙ্গে ডেটা আদান-প্রদান করতে পারে। HttpClientModule
ইনপোর্ট করে HTTP সার্ভিস ব্যবহার করা যায়।
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) { }
getData() {
return this.http.get('https://api.example.com/data');
}
}
এখানে, getData()
ফাংশনটি HTTP GET রিকোয়েস্ট চালাচ্ছে এবং সার্ভার থেকে ডেটা নিয়ে আসছে।
Read more