Angular এর মাধ্যমে API রিকোয়েস্ট করা

MeanJS স্ট্যাকের মধ্যে AngularJS দিয়ে API রিকোয়েস্ট করা একটি গুরুত্বপূর্ণ কার্যক্রম, যা Express.js দ্বারা তৈরি করা সার্ভার-সাইড API এর সাথে ক্লায়েন্ট-সাইডে যোগাযোগ স্থাপন করতে সাহায্য করে। AngularJS HTTPClient ব্যবহার করে সহজে API রিকোয়েস্ট পাঠাতে পারে এবং API থেকে ডেটা গ্রহণ করতে পারে। চলুন, AngularJS দিয়ে API রিকোয়েস্ট করার প্রক্রিয়া দেখবো।

AngularJS দিয়ে API রিকোয়েস্ট করার প্রক্রিয়া

১. HttpClientModule ইনস্টল করা

প্রথমে HttpClientModule ইনস্টল করতে হবে, যা AngularJS অ্যাপ্লিকেশনকে HTTP রিকোয়েস্ট পাঠানোর জন্য প্রস্তুত করে।

1. app.module.ts ফাইল খুলুন এবং HttpClientModule ইম্পোর্ট করুন।

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // HttpClientModule ইম্পোর্ট করা
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  // HttpClientModule ইনক্লুড করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এটি HttpClient সেবা ব্যবহারের জন্য প্রস্তুত করবে।

২. API সার্ভিস তৈরি করা

এখন, আমরা একটি API সার্ভিস তৈরি করবো যা HTTP রিকোয়েস্ট পাঠাবে। উদাহরণস্বরূপ, ইউজার ডেটা ফেচ করার জন্য একটি GET রিকোয়েস্ট তৈরি করা হবে।

ng generate service api

এটি একটি api.service.ts ফাইল তৈরি করবে, যেখানে আপনি API কল করার লজিক যোগ করবেন।

// 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 রিকোয়েস্ট ফাংশন
  getUsers(): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/users`);
  }

  // POST রিকোয়েস্ট ফাংশন
  createUser(user: any): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/users`, user);
  }
}

এখানে, getUsers() ফাংশনটি GET রিকোয়েস্ট পাঠাবে এবং সার্ভার থেকে ইউজার ডেটা ফেচ করবে, আর createUser() ফাংশনটি একটি নতুন ইউজার তৈরি করতে POST রিকোয়েস্ট পাঠাবে।

৩. কম্পোনেন্টে API সার্ভিস ব্যবহার করা

এখন, AppComponent-এ এই ApiService ব্যবহার করে API থেকে ডেটা ফেচ করা হবে। প্রথমে AppComponent খুলুন এবং API কল করার জন্য এই কোডটি ব্যবহার করুন।

// app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>
    </ul>

    <h2>Create New User</h2>
    <form (ngSubmit)="addUser()">
      <input [(ngModel)]="newUser.name" name="name" placeholder="Name" required>
      <input [(ngModel)]="newUser.email" name="email" placeholder="Email" required>
      <button type="submit">Create User</button>
    </form>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users = [];
  newUser = { name: '', email: '' };

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.fetchUsers();
  }

  // GET রিকোয়েস্ট API কল
  fetchUsers() {
    this.apiService.getUsers().subscribe(data => {
      this.users = data;
    }, error => {
      console.error('Error fetching users:', error);
    });
  }

  // POST রিকোয়েস্ট API কল
  addUser() {
    this.apiService.createUser(this.newUser).subscribe(response => {
      console.log('User created:', response);
      this.fetchUsers();  // নতুন ইউজার যোগ হওয়ার পর লিস্ট আপডেট করা
    }, error => {
      console.error('Error creating user:', error);
    });
  }
}

এখানে:

• fetchUsers() ফাংশনটি GET রিকোয়েস্ট পাঠিয়ে ইউজারের তালিকা ফেচ করবে।
• addUser() ফাংশনটি POST রিকোয়েস্ট পাঠিয়ে একটি নতুন ইউজার তৈরি করবে এবং ডেটা ফেরত পাওয়ার পর fetchUsers() ফাংশনটি কল করবে যেন নতুন ইউজার লিস্টে যোগ হয়।

৪. API রাউট Express.js সার্ভারে

এখন, Express.js সার্ভারে GET এবং POST রাউট তৈরি করা যাক। Express.js সার্ভারের সাথে MongoDB সংযুক্ত করতে Mongoose ব্যবহার করা হবে। এখানে GET /api/users এবং POST /api/users API তৈরি করা হয়েছে।

// server/routes/user.routes.js

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const User = mongoose.model('User');

// GET রাউট - ইউজারের তালিকা পাওয়া
router.get('/users', (req, res) => {
  User.find().exec(function(err, users) {
    if (err) {
      return res.status(500).send({ message: 'Error retrieving users' });
    }
    res.json(users);
  });
});

// POST রাউট - নতুন ইউজার তৈরি করা
router.post('/users', (req, res) => {
  const newUser = new User(req.body);
  newUser.save(function(err, user) {
    if (err) {
      return res.status(400).send({ message: 'Error saving user' });
    }
    res.status(201).json(user);
  });
});

module.exports = router;

এখানে:

• GET /users রিকোয়েস্ট MongoDB থেকে সব ইউজার ডেটা রিটার্ন করবে।
• POST /users রিকোয়েস্ট নতুন ইউজারের ডেটা গ্রহণ করে MongoDB তে সংরক্ষণ করবে।

৫. CORS কনফিগারেশন

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

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

npm install cors --save

2. তারপর, Express.js সার্ভারে CORS কনফিগার করুন:

// server/app.js

const express = require('express');
const cors = require('cors');
const app = express();

// CORS সেটআপ
app.use(cors());

// অন্যান্য রাউট এবং কনফিগারেশন

এটি সমস্ত ক্রস-অরিজিন রিকোয়েস্টকে অনুমোদন করবে, যা আপনার Angular অ্যাপ্লিকেশন থেকে Express.js API এর সাথে যোগাযোগ করতে সহায়ক।

সারাংশ

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