MeanJS স্ট্যাকের সাথে Angular অ্যাপ্লিকেশন থেকে HTTP রিকোয়েস্ট পাঠানো খুবই সহজ এবং এটি সাধারণত Angular HTTPClient ব্যবহার করে করা হয়। এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশন থেকে HTTP GET, POST, PUT, এবং DELETE রিকোয়েস্ট পাঠানো যায় এবং Express.js সার্ভার থেকে ডেটা প্রাপ্তি বা পরিবর্তন করা যায়।
১. Angular HTTPClient মডিউল ব্যবহার করা
Angular অ্যাপ্লিকেশনে HTTP রিকোয়েস্ট পাঠানোর জন্য প্রথমে HttpClientModule ইনপোর্ট করতে হবে।
HttpClientModule ইনস্টল ও ইনপোর্ট করা:
প্রথমে, app.module.ts ফাইলটি খুলুন এবং HttpClientModule ইম্পোর্ট করুন।
// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; // HTTPClientModule ইম্পোর্ট করা
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule], // এখানে HTTPClientModule যোগ করা হয়েছে
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
এখন HttpClientModule অ্যাঙ্গুলার অ্যাপ্লিকেশনকে HTTP রিকোয়েস্ট পাঠানোর সক্ষমতা প্রদান করবে।
২. HTTP GET রিকোয়েস্ট পাঠানো
এখন, GET রিকোয়েস্ট পাঠানোর জন্য একটি সার্ভিস তৈরি করা হবে। এটি সার্ভার থেকে ডেটা নিয়ে আসবে।
API সার্ভিস তৈরি করা:
ng generate service api
এটি একটি নতুন api.service.ts ফাইল তৈরি করবে। এখানে আমরা GET রিকোয়েস্ট পাঠানোর কোডটি যুক্ত করব।
// src/app/api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiUrl = 'http://localhost:3000/api'; // Express API এর URL
constructor(private http: HttpClient) {}
// GET রিকোয়েস্ট ফাংশন
getData(): Observable<any> {
return this.http.get<any>(`${this.apiUrl}`);
}
}
এখানে, getData ফাংশনটি GET রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে ডেটা রিটার্ন করে।
Component এ API ডেটা ব্যবহার করা:
এখন, AppComponent-এ এই সার্ভিস ব্যবহার করে ডেটা ফেচ করা হবে।
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
template: `
<h1>{{ message }}</h1>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
message: string;
constructor(private apiService: ApiService) {}
ngOnInit() {
// HTTP GET রিকোয়েস্ট পাঠানো
this.apiService.getData().subscribe(data => {
this.message = data.message; // সার্ভার থেকে প্রাপ্ত ডেটা
});
}
}
এখন, Angular অ্যাপ্লিকেশনটি যখন লোড হবে, এটি GET রিকোয়েস্ট পাঠাবে এবং Express API থেকে ডেটা গ্রহণ করবে।
৩. HTTP POST রিকোয়েস্ট পাঠানো
ধরা যাক, আপনি একটি নতুন ডেটা সার্ভারে পাঠাতে চান। এর জন্য POST রিকোয়েস্ট ব্যবহার করতে হবে।
POST রিকোয়েস্ট ফাংশন তৈরি করা:
// src/app/api.service.ts
postData(data: any): Observable<any> {
return this.http.post<any>(`${this.apiUrl}/create`, data);
}
এটি সার্ভারে POST রিকোয়েস্ট পাঠাবে এবং সেগুলিকে /create এন্ডপয়েন্টে পাঠাবে।
POST রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা:
// src/app/app.component.ts
postMessage() {
const data = { message: 'Hello from Angular!' };
this.apiService.postData(data).subscribe(response => {
console.log('Response from server:', response);
});
}
এখন, একটি POST রিকোয়েস্ট Angular অ্যাপ্লিকেশন থেকে পাঠানো হবে এবং সার্ভার থেকে প্রতিক্রিয়া পাওয়া যাবে।
৪. HTTP PUT রিকোয়েস্ট পাঠানো
যদি আপনি কোনো বিদ্যমান ডেটা আপডেট করতে চান, তবে PUT রিকোয়েস্ট পাঠানো হবে।
PUT রিকোয়েস্ট ফাংশন তৈরি করা:
// src/app/api.service.ts
updateData(id: string, data: any): Observable<any> {
return this.http.put<any>(`${this.apiUrl}/update/${id}`, data);
}
PUT রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা:
// src/app/app.component.ts
updateMessage() {
const updatedData = { message: 'Updated message from Angular' };
this.apiService.updateData('123', updatedData).subscribe(response => {
console.log('Updated data:', response);
});
}
এটি নির্দিষ্ট ID এর জন্য একটি PUT রিকোয়েস্ট পাঠাবে এবং ডেটা আপডেট করবে।
৫. HTTP DELETE রিকোয়েস্ট পাঠানো
যদি আপনি কোনো ডেটা মুছে ফেলতে চান, তবে DELETE রিকোয়েস্ট ব্যবহার করা হবে।
DELETE রিকোয়েস্ট ফাংশন তৈরি করা:
// src/app/api.service.ts
deleteData(id: string): Observable<any> {
return this.http.delete<any>(`${this.apiUrl}/delete/${id}`);
}
DELETE রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা:
// src/app/app.component.ts
deleteMessage() {
this.apiService.deleteData('123').subscribe(response => {
console.log('Deleted data:', response);
});
}
এটি নির্দিষ্ট ID অনুযায়ী ডেটা মুছে ফেলবে।
সার্ভার সাইড (Express) এ API হ্যান্ডলিং
Express.js সার্ভারে প্রতিটি HTTP রিকোয়েস্টের জন্য রাউট সেট করতে হবে। উদাহরণস্বরূপ:
// app.js (Express)
const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors());
app.use(express.json()); // POST, PUT রিকোয়েস্টের জন্য JSON পার্সিং
// GET API
app.get('/api', (req, res) => {
res.json({ message: 'Hello from Express API' });
});
// POST API
app.post('/api/create', (req, res) => {
const data = req.body;
res.json({ message: 'Data received', data });
});
// PUT API
app.put('/api/update/:id', (req, res) => {
const { id } = req.params;
const updatedData = req.body;
res.json({ message: 'Data updated', id, updatedData });
});
// DELETE API
app.delete('/api/delete/:id', (req, res) => {
const { id } = req.params;
res.json({ message: 'Data deleted', id });
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
এখানে, প্রতিটি রিকোয়েস্ট হ্যান্ডলার সার্ভার থেকে সঠিক প্রতিক্রিয়া প্রদান করবে।
সারাংশ
এখন পর্যন্ত আমরা দেখেছি কিভাবে Angular অ্যাপ্লিকেশন থেকে GET, POST, PUT, এবং DELETE HTTP রিকোয়েস্ট পাঠানো যায় এবং Express.js সার্ভার থেকে ডেটা রিটার্ন বা পরিবর্তন করা যায়। এর মাধ্যমে আপনি MeanJS স্ট্যাক ব্যবহার করে ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
