MeanJS স্ট্যাক ব্যবহার করে JSON ডেটা হ্যান্ডলিং এবং API থেকে রেসপন্স নেওয়া একটি গুরুত্বপূর্ণ প্রক্রিয়া। এর মাধ্যমে আপনি Express.js সার্ভার থেকে API কল করে ডেটা নিয়ে AngularJS অ্যাপ্লিকেশনে তা প্রদর্শন করতে পারবেন। চলুন, এই প্রক্রিয়াটি কিভাবে কাজ করে তা বিস্তারিতভাবে দেখি।
JSON ডেটা হ্যান্ডলিং
JSON (JavaScript Object Notation) হল একটি জনপ্রিয় ডেটা বিনিময় ফরম্যাট, যা সাধারণত সার্ভার এবং ক্লায়েন্টের মধ্যে ডেটা আদান-প্রদান করার জন্য ব্যবহৃত হয়। MeanJS স্ট্যাকের মাধ্যমে API থেকে JSON ডেটা সংগ্রহ করা এবং তা ডাইনামিকভাবে প্রদর্শন করা সম্ভব।
API থেকে JSON রেসপন্স নেওয়া
এখানে আমরা একটি Express.js API তৈরি করব যা JSON ডেটা রিটার্ন করবে এবং সেই ডেটা AngularJS অ্যাপ্লিকেশনে প্রদর্শন করা হবে।
১. Express.js API তৈরি করা
প্রথমে, একটি GET API তৈরি করা হবে যা JSON ডেটা রিটার্ন করবে। Express.js এর মাধ্যমে আপনি সহজেই API রাউট তৈরি করতে পারবেন।
- Express.js API সেটআপ
// app.js (Express.js API)
const express = require('express');
const app = express();
// API রাউট তৈরি করা
app.get('/api/data', (req, res) => {
const data = {
message: "Hello, this is a response from the API!",
user: {
name: "John Doe",
age: 30
}
};
res.json(data); // JSON ডেটা রিটার্ন
});
// পোর্ট সেট করা
const port = 3000;
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
এখানে, /api/data রাউটে একটি JSON অবজেক্ট রিটার্ন করা হয়েছে, যার মধ্যে message এবং user নামে দুটি প্রপার্টি রয়েছে।
২. AngularJS থেকে API কল করা
এখন, AngularJS অ্যাপ্লিকেশন থেকে আমাদের এই Express.js API কল করে JSON ডেটা সংগ্রহ করতে হবে।
- AngularJS Service তৈরি করা
AngularJS তে API কল করার জন্য আমরা $http সেবাটি ব্যবহার করব। প্রথমে, একটি service তৈরি করা হবে যা API থেকে ডেটা সংগ্রহ করবে।
// app.js (AngularJS Service)
var app = angular.module('meanApp', []);
app.service('ApiService', function($http) {
// API থেকে ডেটা কল করা
this.getData = function() {
return $http.get('http://localhost:3000/api/data'); // API URL
};
});
এখানে, ApiService একটি সেবার মাধ্যমে GET রিকোয়েস্ট পাঠাবে /api/data রাউটে এবং API থেকে পাওয়া রেসপন্স ডেটা রিটার্ন করবে।
৩. AngularJS Controller এ API রেসপন্স হ্যান্ডলিং
এখন, Controller তৈরি করতে হবে, যেখানে আমরা ApiService ব্যবহার করে API থেকে ডেটা আনব এবং তা $scope এর মাধ্যমে ভিউতে পাঠাবো।
// app.js (AngularJS Controller)
app.controller('MainController', function($scope, ApiService) {
// API থেকে ডেটা নিয়ে আসা
ApiService.getData().then(function(response) {
$scope.message = response.data.message; // API রেসপন্সের message ফিল্ড
$scope.user = response.data.user; // user অবজেক্ট
}, function(error) {
console.log("Error fetching data: ", error);
});
});
এখানে, getData() ফাংশনটি API কল করে এবং রেসপন্সের message এবং user ফিল্ডগুলি $scope তে সেভ করা হয়।
৪. AngularJS ভিউতে ডেটা প্রদর্শন
এখন, ভিউ তৈরি করা হবে যেখানে $scope.message এবং $scope.user এর মান দেখানো হবে।
<!-- index.html (AngularJS View) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MeanJS API Example</title>
</head>
<body ng-app="meanApp" ng-controller="MainController">
<h1>{{ message }}</h1> <!-- message প্রদর্শন করা -->
<p>Name: {{ user.name }}</p> <!-- user.name প্রদর্শন করা -->
<p>Age: {{ user.age }}</p> <!-- user.age প্রদর্শন করা -->
</body>
</html>
এখানে, আমরা {{ message }} এবং {{ user.name }} এর মাধ্যমে API থেকে পাওয়া ডেটা ভিউতে রেন্ডার করছি।
৫. সার্ভার এবং AngularJS অ্যাপ্লিকেশন রান করা
Express.js সার্ভার চালানো:
node app.jsএটি Express.js সার্ভারকে চালু করবে এবং এটি localhost:3000 এ অ্যাক্সেসযোগ্য হবে।
- AngularJS অ্যাপ্লিকেশন চালানো: AngularJS অ্যাপ্লিকেশনটি localhost:4200 এ রান হবে যদি আপনি
ng serveকমান্ড ব্যবহার করেন।
এখন, ব্রাউজারে localhost:4200 গিয়ে আপনি AngularJS অ্যাপ্লিকেশনে Express.js API থেকে প্রাপ্ত JSON ডেটা দেখতে পারবেন।
সারাংশ
এই প্রক্রিয়াতে, আমরা দেখলাম কিভাবে MeanJS স্ট্যাকের মাধ্যমে Express.js API তৈরি করতে হয় এবং তা থেকে AngularJS অ্যাপ্লিকেশনে JSON ডেটা সংগ্রহ করে প্রদর্শন করা হয়। Express.js JSON ডেটা রিটার্ন করে এবং AngularJS সেবার মাধ্যমে সেই ডেটা গ্রহণ করে ইউজারের সামনে দেখায়। এভাবে, একটি সম্পূর্ণ ফ্রন্টএন্ড এবং ব্যাকএন্ড সিস্টেম তৈরি করা সম্ভব যা MeanJS স্ট্যাকের সাহায্যে দ্রুত এবং দক্ষভাবে কাজ করে।
Read more
