Angular এবং Express এর মধ্যে সমন্বয়

MeanJS স্ট্যাকের মধ্যে AngularJS এবং Express.js এর সমন্বয় একটি শক্তিশালী এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরির জন্য অত্যন্ত গুরুত্বপূর্ণ। AngularJS হল ফ্রন্টএন্ড ফ্রেমওয়ার্ক, যা ব্যবহারকারীর ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয়, আর Express.js হল সার্ভার সাইড ফ্রেমওয়ার্ক যা HTTP রিকুয়েস্ট এবং রেসপন্স হ্যান্ডলিং পরিচালনা করে। এই দুটি প্রযুক্তি একত্রে কাজ করে একটি সম্পূর্ণ পূর্ণাঙ্গ ওয়েব অ্যাপ্লিকেশন তৈরি করতে।

এখানে আমরা দেখে নেব AngularJS এবং Express.js এর মধ্যে কীভাবে সমন্বয় করা হয় এবং তাদের একত্রে কাজ করার প্রক্রিয়া।

AngularJS এবং Express.js এর মধ্যে সমন্বয়

১. Express.js: সার্ভার সাইডের কাজ

Express.js হল একটি সার্ভার সাইড Node.js ফ্রেমওয়ার্ক যা HTTP রিকুয়েস্ট হ্যান্ডলিং এবং রাউটিং সিস্টেম সহজ করে তোলে। এটি API তৈরি এবং ক্লায়েন্ট সাইডে ডেটা পাঠানোর জন্য ব্যবহৃত হয়। Express.js অ্যাপ্লিকেশনটি সাধারণত JSON রেসপন্স প্রদান করে, যা AngularJS এর মাধ্যমে ক্লায়েন্ট সাইডে ব্যবহার করা হয়।

উদাহরণস্বরূপ, একটি GET API তৈরি করা যেটি AngularJS এর মাধ্যমে কল করা যাবে:

// server/routes/user.routes.js

var express = require('express');
var router = express.Router();
var User = require('../models/user.model');

// API রাউট তৈরি করা যা সমস্ত ইউজার রিটার্ন করবে
router.get('/users', function(req, res) {
  User.find(function(err, users) {
    if (err) {
      return res.status(500).send({ message: 'Error retrieving users' });
    }
    res.json(users);
  });
});

module.exports = router;

এখানে, GET /users API এর মাধ্যমে সমস্ত ইউজারের ডেটা রিটার্ন করা হবে।

২. AngularJS: ফ্রন্টএন্ডের কাজ

AngularJS ক্লায়েন্ট সাইডের জন্য ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। AngularJS সাধারণত Model-View-Controller (MVC) আর্কিটেকচার অনুসরণ করে এবং ডাটা-বাইন্ডিং সুবিধা প্রদান করে।

এখন, AngularJS থেকে Express.js এর /users API কল করা এবং ডেটা প্রদর্শন করার জন্য একটি উদাহরণ দেয়া হলো।

// app/controllers/user.controller.js

angular.module('meanApp').controller('UserController', ['$scope', '$http', function($scope, $http) {
  // API কল করে সমস্ত ইউজার ডেটা পাওয়া
  $http.get('/api/users')
    .then(function(response) {
      $scope.users = response.data; // API থেকে পাওয়া ডেটা ব্যবহার করা
    }, function(error) {
      console.error('Error fetching users:', error);
    });
}]);

এখানে, $http.get('/api/users') ব্যবহার করে AngularJS Express.js এর API কল করছে এবং প্রাপ্ত ডেটা $scope.users এ সংরক্ষণ হচ্ছে। এরপর এই ডেটা AngularJS এর HTML টেমপ্লেটে বাইন্ড করা যাবে।

<!-- app/views/users.html -->

<div ng-controller="UserController">
  <ul>
    <li ng-repeat="user in users">
      {{user.name}} - {{user.email}}
    </li>
  </ul>
</div>

এখানে, ng-repeat ডিরেকটিভ ব্যবহার করে users অ্যারে থেকে সমস্ত ইউজারের নাম এবং ইমেইল টেমপ্লেটে প্রদর্শিত হচ্ছে।

৩. CORS (Cross-Origin Resource Sharing) কনফিগারেশন

যেহেতু AngularJS এবং Express.js আলাদা সার্ভারে চলতে পারে, তাই CORS সমন্বয় করতে হবে। CORS এর মাধ্যমে সার্ভার এবং ক্লায়েন্ট সাইডের মধ্যে ক্রস-অরিজিন রিকুয়েস্ট অনুমোদন করা হয়।

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

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

   npm install cors
   

2. তারপর, Express.js অ্যাপ্লিকেশনে cors প্যাকেজটি যুক্ত করুন:

// server/app.js

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

// CORS সেটিংস
app.use(cors());

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

এখানে, app.use(cors()) কল করার মাধ্যমে সমস্ত ক্রস-অরিজিন রিকুয়েস্ট অনুমোদন করা হয়েছে।

৪. API এবং AngularJS এর মধ্যে ডাটা আদান-প্রদান

Express.js API দ্বারা ডেটা ক্লায়েন্ট সাইডে পাঠানো হয় এবং AngularJS সেই ডেটা গ্রহণ করে ব্যবহারকারীর ইন্টারফেসে প্রদর্শন করে।

একটি POST রিকুয়েস্টের মাধ্যমে নতুন ইউজার যুক্ত করার উদাহরণ দেখুন:

Express.js - POST API:

// server/routes/user.routes.js

router.post('/users', function(req, res) {
  var newUser = new User(req.body);
  newUser.save(function(err, user) {
    if (err) {
      return res.status(500).send({ message: 'Error saving user' });
    }
    res.status(201).json(user);
  });
});

এখানে, POST /users API ইউজারের ডেটা গ্রহণ করে MongoDB তে সংরক্ষণ করবে।

AngularJS - POST রিকুয়েস্ট:

// app/controllers/user.controller.js

angular.module('meanApp').controller('UserController', ['$scope', '$http', function($scope, $http) {
  $scope.addUser = function(user) {
    // POST রিকুয়েস্টের মাধ্যমে নতুন ইউজার যোগ করা
    $http.post('/api/users', user)
      .then(function(response) {
        console.log('User added:', response.data);
      }, function(error) {
        console.error('Error adding user:', error);
      });
  };
}]);

এখানে, $http.post('/api/users', user) এর মাধ্যমে নতুন ইউজার তথ্য Express.js API এ পাঠানো হচ্ছে।

সারাংশ

AngularJS এবং Express.js এর মধ্যে সমন্বয় একটি পূর্ণাঙ্গ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে, যেখানে AngularJS ফ্রন্টএন্ডে ব্যবহারকারীর ইন্টারফেস তৈরি করে এবং Express.js সার্ভার সাইডে ডেটা পরিচালনা এবং API সরবরাহ করে। CORS কনফিগারেশন, API রাউটিং, এবং ডাটা বাইন্ডিং এর মাধ্যমে এই দুটি প্রযুক্তি একত্রে কাজ করে একটি দক্ষ এবং স্কেলেবল অ্যাপ্লিকেশন নির্মাণ করা সম্ভব।