Angular-এ HTTP রিকোয়েস্ট ব্যবহারের জন্য HttpClientModule ব্যবহার করা হয়, যা আপনাকে বিভিন্ন HTTP মেথড (GET, POST, PUT, DELETE) দ্বারা সার্ভারের সঙ্গে যোগাযোগ করতে সক্ষম করে। HTTP ক্লায়েন্ট ব্যবহার করে আপনি API কল করতে পারেন, ডেটা প্রাপ্তি ও প্রেরণ করতে পারেন এবং সার্ভারের সঙ্গে ইন্টারঅ্যাকশন করতে পারেন।

HttpClientModule ইনস্টল এবং কনফিগারেশন

প্রথমে, HttpClientModule ইম্পোর্ট করতে হবে, যাতে Angular এর HTTP ক্লায়েন্ট সুবিধাগুলি অ্যাপ্লিকেশনে ব্যবহৃত হতে পারে।

HttpClientModule ইনস্টল করা

1. app.module.ts ফাইলে HttpClientModule ইম্পোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';  // Import HttpClientModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  // Add HttpClientModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

HTTP GET রিকোয়েস্ট

GET রিকোয়েস্ট ব্যবহার করে আপনি সার্ভার থেকে ডেটা প্রাপ্তি করতে পারেন। Angular এর HttpClient ক্লাসের get() মেথড ব্যবহার করে GET রিকোয়েস্ট করা হয়।

GET রিকোয়েস্ট উদাহরণ

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get(this.apiUrl);  // HTTP GET request
  }
}

এখানে, getData() মেথডটি apiUrl থেকে ডেটা নিয়ে আসবে।

GET রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<ul><li *ngFor="let post of posts">{{ post.title }}</li></ul>`,
})
export class AppComponent implements OnInit {
  posts: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      this.posts = data;
    });
  }
}

এখানে, কম্পোনেন্টে getData() মেথড কল করা হয়েছে এবং ডেটা আসলে posts অ্যারে তে ধারণ করা হয়েছে, যা টেমপ্লেটে লুপের মাধ্যমে দেখানো হবে।

HTTP POST রিকোয়েস্ট

POST রিকোয়েস্ট ব্যবহার করে আপনি সার্ভারে নতুন ডেটা পাঠাতে পারেন। Angular এর HttpClient ক্লাসের post() মেথড দিয়ে POST রিকোয়েস্ট করা হয়।

POST রিকোয়েস্ট উদাহরণ

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL

  constructor(private http: HttpClient) { }

  createData(postData: any): Observable<any> {
    return this.http.post(this.apiUrl, postData);  // HTTP POST request
  }
}

POST রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<button (click)="createPost()">Create Post</button>`,
})
export class AppComponent {

  constructor(private dataService: DataService) {}

  createPost() {
    const newPost = {
      title: 'New Post',
      body: 'This is the body of the new post',
      userId: 1
    };

    this.dataService.createData(newPost).subscribe(response => {
      console.log('Post Created:', response);
    });
  }
}

এখানে, createData() মেথড ব্যবহার করে নতুন একটি পোস্ট সার্ভারে পাঠানো হয়।

HTTP PUT রিকোয়েস্ট

PUT রিকোয়েস্ট ব্যবহার করে আপনি একটি রেকর্ড আপডেট করতে পারেন। Angular-এ put() মেথড ব্যবহার করা হয়।

PUT রিকোয়েস্ট উদাহরণ

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL

  constructor(private http: HttpClient) { }

  updateData(id: number, postData: any): Observable<any> {
    return this.http.put(`${this.apiUrl}/${id}`, postData);  // HTTP PUT request
  }
}

PUT রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<button (click)="updatePost()">Update Post</button>`,
})
export class AppComponent {

  constructor(private dataService: DataService) {}

  updatePost() {
    const updatedPost = {
      title: 'Updated Post',
      body: 'This is the updated body of the post',
      userId: 1
    };

    this.dataService.updateData(1, updatedPost).subscribe(response => {
      console.log('Post Updated:', response);
    });
  }
}

এখানে, updateData() মেথডটি একটি নির্দিষ্ট পোস্টের আইডি ব্যবহার করে সার্ভারে ডেটা আপডেট করে।

HTTP DELETE রিকোয়েস্ট

DELETE রিকোয়েস্ট ব্যবহার করে আপনি সার্ভার থেকে ডেটা মুছে ফেলতে পারেন। Angular-এ delete() মেথড দিয়ে DELETE রিকোয়েস্ট করা হয়।

DELETE রিকোয়েস্ট উদাহরণ

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API URL

  constructor(private http: HttpClient) { }

  deleteData(id: number): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`);  // HTTP DELETE request
  }
}

DELETE রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<button (click)="deletePost()">Delete Post</button>`,
})
export class AppComponent {

  constructor(private dataService: DataService) {}

  deletePost() {
    this.dataService.deleteData(1).subscribe(response => {
      console.log('Post Deleted:', response);
    });
  }
}

এখানে, deleteData() মেথডটি একটি পোস্ট আইডি ব্যবহার করে সার্ভার থেকে ডেটা মুছে ফেলবে।

সারাংশ

• GET রিকোয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা প্রাপ্তি করা হয়।
• POST রিকোয়েস্ট ব্যবহার করে নতুন ডেটা সার্ভারে প্রেরণ করা হয়।
• PUT রিকোয়েস্ট ব্যবহার করে ডেটা আপডেট করা হয়।
• DELETE রিকোয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা মুছে ফেলা হয়।

Angular এর HttpClientModule ব্যবহারের মাধ্যমে আপনি সহজে এই HTTP রিকোয়েস্টগুলিকে পরিচালনা করতে পারবেন এবং সার্ভারের সাথে যোগাযোগ করতে পারবেন।