Angular প্রজেক্ট তৈরি করা এবং MeanJS এর সাথে ইন্টিগ্রেশন

MeanJS স্ট্যাকের সাথে AngularJS প্রজেক্ট তৈরি করা এবং তাকে ইন্টিগ্রেট করা একটি গুরুত্বপূর্ণ পদক্ষেপ, কারণ এটি ক্লায়েন্ট সাইডের ইউজার ইন্টারফেস (UI) তৈরি করতে সহায়ক। চলুন, MeanJS স্ট্যাকের অংশ হিসেবে Angular প্রজেক্ট তৈরি এবং সেটি Express.js এর সাথে ইন্টিগ্রেট করার প্রক্রিয়া দেখুন।

১. Angular প্রজেক্ট তৈরি করা

প্রথমে, আপনাকে Angular CLI ইনস্টল করতে হবে যদি তা আপনার সিস্টেমে ইনস্টল না থাকে। Angular CLI একটি টুল যা Angular অ্যাপ্লিকেশন তৈরি, চালানো এবং ডিপ্লয় করার জন্য ব্যবহৃত হয়।

Angular CLI ইনস্টল করা:

npm install -g @angular/cli

একটি নতুন Angular প্রজেক্ট তৈরি করা:

ng new meanjs-angular-app
cd meanjs-angular-app

এটি একটি নতুন Angular অ্যাপ্লিকেশন তৈরি করবে এবং আপনাকে এটি চালানোর জন্য প্রয়োজনীয় সব ফাইল এবং ফোল্ডার তৈরি করে দিবে।

Angular অ্যাপ্লিকেশন রান করা:

ng serve

এখন আপনার অ্যাপ্লিকেশনটি http://localhost:4200 এ চলে যাবে।

২. Express.js অ্যাপ্লিকেশন তৈরি করা

এখন, একটি Express.js অ্যাপ্লিকেশন তৈরি করতে হবে, যেটি Angular অ্যাপ্লিকেশনটির সাথে API এবং সার্ভার সাইড ইন্টিগ্রেশন করবে।

Express.js অ্যাপ্লিকেশন তৈরি করা:

প্রথমে আপনার Express.js অ্যাপ্লিকেশন তৈরি করুন, যেমন পূর্বের উত্তরেও আলোচনা করা হয়েছে।

mkdir express-backend
cd express-backend
npm init -y
npm install express

এখন, app.js ফাইল তৈরি করুন এবং নিচের কোডটি যোগ করুন:

// app.js

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

// Static folder set
app.use(express.static(path.join(__dirname, '../meanjs-angular-app/dist')));

// API endpoint example
app.get('/api', (req, res) => {
  res.json({ message: 'Hello from Express API' });
});

// Serve Angular app
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../meanjs-angular-app/dist/index.html'));
});

// Port setup
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

ব্যাখ্যা:

• express.static: Angular অ্যাপ্লিকেশনের বিল্ড ফোল্ডারকে স্ট্যাটিক ফোল্ডার হিসেবে সেটআপ করা হয়েছে।
• /api: একটি API এন্ডপয়েন্ট তৈরি করা হয়েছে, যা JSON আউটপুট দিবে।
• Angular অ্যাপ্লিকেশন Serve: app.get('*') এর মাধ্যমে Angular অ্যাপ্লিকেশনটি সার্ভ করা হচ্ছে।

৩. Angular অ্যাপ্লিকেশন বিল্ড করা

Angular অ্যাপ্লিকেশনটি বিল্ড করতে হবে যাতে এটি প্রডাকশন মোডে রান করতে পারে এবং Express.js এর মাধ্যমে সার্ভ করা যায়।

cd meanjs-angular-app
ng build --prod

এটি আপনার Angular অ্যাপ্লিকেশনটি dist/ ফোল্ডারে বিল্ড করবে।

৪. Express.js এবং Angular এর ইন্টিগ্রেশন

এখন, আপনাকে Express.js অ্যাপ্লিকেশন থেকে Angular অ্যাপ্লিকেশনটির dist/ ফোল্ডারকে সার্ভ করতে হবে। উপরের app.js ফাইলটি আগে থেকেই dist/ ফোল্ডারের পথ সঠিকভাবে সেটআপ করেছে।

Express অ্যাপ্লিকেশন রান করা:

cd express-backend
node app.js

এখন, http://localhost:3000 এ গিয়ে আপনি Angular অ্যাপ্লিকেশনটি দেখতে পাবেন এবং /api এন্ডপয়েন্টে গিয়ে আপনি Express API থেকে JSON ডেটা পাবেন।

৫. API রিকোয়েস্ট Angular থেকে Express এ পাঠানো

এখন আমরা Angular অ্যাপ্লিকেশন থেকে Express API এর সাথে যোগাযোগ করব। Angular অ্যাপ্লিকেশনের মধ্যে HttpClient মডিউল ব্যবহার করে API রিকোয়েস্ট পাঠানো যাবে।

Angular Service তৈরি করা:

ng generate service api

এটি একটি নতুন api.service.ts ফাইল তৈরি করবে। এখানে API কল করার কোডটি যোগ করুন:

// 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'; // Express API এর URL

  constructor(private http: HttpClient) {}

  getMessage(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

Angular Component এ API ডেটা শো করা:

এখন, এই সার্ভিসটি একটি কম্পোনেন্টে ব্যবহার করে API থেকে ডেটা প্রদর্শন করা যাবে।

// src/app/app.component.ts

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

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

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getMessage().subscribe((data) => {
      this.message = data.message;
    });
  }
}

এখন, যখন Angular অ্যাপ্লিকেশনটি localhost:4200 এ চলবে, তখন এটি Express API থেকে message ফিল্ডটি গ্রহণ করে এবং UI তে দেখাবে।

সারাংশ

এখন, আপনি একটি Angular অ্যাপ্লিকেশন তৈরি করেছেন এবং সেটি Express.js অ্যাপ্লিকেশনের সাথে সফলভাবে ইন্টিগ্রেট করেছেন। এটি আপনাকে MeanJS স্ট্যাক ব্যবহার করে একক পেজ অ্যাপ্লিকেশন (SPA) তৈরি এবং সার্ভার সাইড API তৈরি করার জন্য একটি শক্তিশালী ভিত্তি প্রদান করে। Angular ক্লায়েন্ট সাইডের ইন্টারফেস তৈরি করে, এবং Express সার্ভার সাইডের API এবং ডেটা প্রক্রিয়াকরণ পরিচালনা করে।