Angular এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জ

MeanJS স্ট্যাকের মধ্যে AngularJS এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জ একটি গুরুত্বপূর্ণ অংশ, যেখানে AngularJS ক্লায়েন্ট সাইডের অ্যাপ্লিকেশন তৈরি করে এবং Node.js সার্ভার সাইডের জন্য কাজ করে। এই দুটি প্রযুক্তির মধ্যে ডেটা এক্সচেঞ্জ সাধারণত HTTP রিকুয়েস্ট ও JSON ফরম্যাটে ঘটে। AngularJS সাধারণত HTTPClient ব্যবহার করে Node.js সার্ভারে API রিকুয়েস্ট পাঠায় এবং JSON ডেটা রিটার্ন করে।

এখানে, আমরা AngularJS এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জ করার প্রক্রিয়া এবং কিভাবে সেগুলো একে অপরের সাথে যোগাযোগ করতে পারে তা দেখবো।

AngularJS এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জ

১. Node.js (Express.js) API তৈরি করা

প্রথমে, আমাদের Node.js (Express.js) সার্ভারে একটি API তৈরি করতে হবে যা AngularJS থেকে আসা HTTP রিকুয়েস্ট গ্রহণ করবে এবং JSON ফরম্যাটে ডেটা রিটার্ন করবে। এখানে একটি সিম্পল GET এবং POST API উদাহরণ দেওয়া হলো।

// server/app.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

// Middleware
app.use(bodyParser.json());  // JSON পার্সিং

// GET API: ডেটা রিটার্ন করা
app.get('/api/data', (req, res) => {
  const data = { message: 'Hello from Node.js server!' };
  res.json(data);  // JSON রেসপন্স পাঠানো
});

// POST API: ডেটা গ্রহণ করা
app.post('/api/data', (req, res) => {
  const receivedData = req.body;
  console.log('Received data:', receivedData);  // কনসোলে ডেটা লগ করা
  res.json({ message: 'Data received successfully', data: receivedData });
});

// সার্ভার চালু করা
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

এখানে, আমাদের /api/data রাউটে দুটি API আছে:

1. GET /api/data: সার্ভার থেকে ডেটা পাঠানোর জন্য।
2. POST /api/data: AngularJS থেকে আসা ডেটা গ্রহণ এবং প্রক্রিয়া করার জন্য।

২. AngularJS অ্যাপ্লিকেশন থেকে API কল করা

এখন, AngularJS অ্যাপ্লিকেশন তৈরি করতে হবে, যা Node.js সার্ভারের API কল করবে এবং ডেটা এক্সচেঞ্জ করবে।

প্রথমে, HttpClientModule ইনস্টল এবং ইনপোর্ট করতে হবে। app.module.ts ফাইলে এটি করতে হবে:

// 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 {}

এখন, HttpClient ব্যবহার করে GET এবং POST রিকুয়েস্ট পাঠানো যাবে।

৩. AngularJS Service তৈরি করা

এখন, একটি ApiService তৈরি করতে হবে যা Node.js API কল করবে।

ng generate service api

এটি একটি api.service.ts ফাইল তৈরি করবে। এখানে আমরা GET এবং POST রিকুয়েস্ট পাঠানোর কোড লিখব।

// 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/data';  // Node.js API URL

  constructor(private http: HttpClient) {}

  // GET রিকোয়েস্ট: Node.js সার্ভার থেকে ডেটা ফেচ করা
  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }

  // POST রিকোয়েস্ট: Node.js সার্ভারে ডেটা পাঠানো
  postData(data: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, data);
  }
}

এখানে, getData() ফাংশনটি GET রিকুয়েস্ট পাঠাবে এবং postData() ফাংশনটি POST রিকুয়েস্ট পাঠাবে।

৪. AngularJS Component এ API ব্যবহার করা

এখন, AppComponent তৈরি করে ApiService ব্যবহার করা হবে।

// src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ message }}</h1>
    <button (click)="sendData()">Send Data</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  message: string;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    // GET রিকুয়েস্ট পাঠানো: Node.js থেকে ডেটা ফেচ করা
    this.apiService.getData().subscribe(data => {
      this.message = data.message;
    });
  }

  sendData() {
    // POST রিকুয়েস্ট পাঠানো: Node.js সার্ভারে ডেটা পাঠানো
    const data = { name: 'John', age: 30 };
    this.apiService.postData(data).subscribe(response => {
      console.log('Server Response:', response);
    });
  }
}

এখানে:

• ngOnInit(): GET রিকুয়েস্ট পাঠায় এবং সার্ভার থেকে ডেটা নেয়।
• sendData(): একটি POST রিকুয়েস্ট পাঠায় এবং সার্ভারে ডেটা প্রেরণ করে।

CORS (Cross-Origin Resource Sharing) সেটআপ

যেহেতু AngularJS এবং Node.js সাধারণত আলাদা ডোমেইনে বা পোর্টে চলে, সেজন্য CORS (Cross-Origin Resource Sharing) কনফিগারেশন করা প্রয়োজন যাতে এই দুই সিস্টেমের মধ্যে রিকুয়েস্ট বিনিময় সম্ভব হয়।

Express.js এ CORS কনফিগার করতে:

1. প্রথমে cors প্যাকেজ ইনস্টল করুন:

   npm install cors
   

2. এরপর, app.js ফাইলে CORS প্যাকেজটি ইম্পোর্ট এবং ব্যবহার করুন:

// server/app.js

const cors = require('cors');

// CORS কনফিগারেশন
app.use(cors());  // সমস্ত রিকুয়েস্টের জন্য CORS অনুমোদন করা

Angular এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জের সারাংশ

এখন পর্যন্ত, আমরা দেখেছি কিভাবে AngularJS অ্যাপ্লিকেশন Node.js API এর সাথে GET এবং POST রিকুয়েস্টের মাধ্যমে ডেটা এক্সচেঞ্জ করতে পারে। HttpClientModule এবং HttpClient ব্যবহার করে আমরা সহজে API কল করতে পারি এবং সার্ভার থেকে ডেটা নিয়ে AngularJS এর UI তে প্রদর্শন করতে পারি। একইভাবে, POST রিকুয়েস্ট ব্যবহার করে ডেটা সার্ভারে পাঠানো হয় এবং Node.js সেই ডেটা গ্রহণ করে প্রক্রিয়া করে রেসপন্স দেয়। CORS কনফিগারেশন দুটি সিস্টেমের মধ্যে রিকুয়েস্ট আদান প্রদানকে সুরক্ষিত এবং সহজ করে।