Angular Component এবং Module এর ভূমিকা

Angular অ্যাপ্লিকেশন তৈরি করতে Component এবং Module প্রধান ভূমিকা পালন করে। এগুলো Angular অ্যাপ্লিকেশনকে মডুলার, পুনঃব্যবহারযোগ্য এবং স্কেলেবল করে তোলে। নিচে Component এবং Module এর ভূমিকা বিস্তারিতভাবে আলোচনা করা হলো।

Angular Component এর ভূমিকা

Component কী?

Component হলো Angular অ্যাপ্লিকেশনের বিল্ডিং ব্লক। প্রতিটি Component একটি UI (User Interface) অংশকে উপস্থাপন করে। একটি Angular অ্যাপ্লিকেশন মূলত এক বা একাধিক Component এর সমন্বয়ে গঠিত।

Component এর গঠন

একটি Component তিনটি প্রধান অংশ নিয়ে গঠিত:

• Class (TypeScript): এখানে ডেটা এবং লজিক থাকে।
• Template (HTML): এখানে Component এর ভিজুয়াল এলিমেন্ট থাকে।
• Style (CSS/SCSS): Component এর জন্য নির্দিষ্ট স্টাইল।

Component এর ভূমিকা

• UI উপস্থাপন: প্রতিটি Component একটি নির্দিষ্ট UI অংশের প্রতিনিধিত্ব করে।
• পুনঃব্যবহারযোগ্য কোড: Component ব্যবহার করে কোড পুনঃব্যবহারযোগ্য করা যায়।
• State এবং Behavior Management: Component তার নিজস্ব ডেটা (state) এবং ফাংশনালিটি (behavior) পরিচালনা করে।
• Parent এবং Child Communication: Component গুলো একে অপরের সাথে ডেটা এবং ইভেন্ট শেয়ার করতে পারে।

Component তৈরি উদাহরণ

Angular CLI ব্যবহার করে নতুন Component তৈরি করতে:

ng generate component header

এটি src/app/header ফোল্ডারে প্রয়োজনীয় ফাইল তৈরি করবে।

উদাহরণ Component (header.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-header', // HTML-এ ব্যবহৃত ট্যাগ
  templateUrl: './header.component.html', // টেমপ্লেট ফাইল
  styleUrls: ['./header.component.css'] // স্টাইল ফাইল
})
export class HeaderComponent {
  title = 'Header Section'; // ডেটা বা প্রোপার্টি
}

টেমপ্লেট (header.component.html)

<header>
  <h1>{{ title }}</h1>
</header>

Angular Module এর ভূমিকা

Module কী?

Angular-এ Module হলো একটি লজিক্যাল গ্রুপিং, যেখানে কম্পোনেন্ট, ডিরেক্টিভ, পাইপ, এবং সার্ভিস থাকে। প্রতিটি Angular অ্যাপ্লিকেশন একটি root module (AppModule) দিয়ে শুরু হয়, যা app.module.ts ফাইলে থাকে।

Module এর ভূমিকা

• Feature Grouping: অ্যাপ্লিকেশনের বিভিন্ন ফিচার বা ফাংশনালিটি আলাদা মডিউলে ভাগ করা যায়।
• Reusable Architecture: মডিউলগুলো পুনঃব্যবহারযোগ্য এবং স্বাধীনভাবে কাজ করতে পারে।
• Dependency Management: Module অন্যান্য মডিউল এবং সার্ভিসকে ইমপোর্ট এবং এক্সপোর্ট করে।
• Lazy Loading: Module ব্যবহার করে নির্দিষ্ট পেজ বা ফিচার শুধু প্রয়োজন অনুযায়ী লোড করা যায়।

Module এর গঠন

একটি Angular Module মূলত NgModule ডেকোরেটর দিয়ে ডিফাইন করা হয়। এটি অ্যাপ্লিকেশনের কম্পোনেন্ট, ডিরেক্টিভ এবং সার্ভিসের তথ্য সংরক্ষণ করে।

উদাহরণ Module (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent, // রুট কম্পোনেন্ট
    HeaderComponent // নতুন Header Component
  ],
  imports: [
    BrowserModule // ব্রাউজার সংক্রান্ত প্রয়োজনীয় মডিউল
  ],
  providers: [], // সার্ভিস যোগ করা হলে এখানে উল্লেখ করা হয়
  bootstrap: [AppComponent] // রুট কম্পোনেন্ট বুটস্ট্র্যাপ করা
})
export class AppModule { }

Feature Module তৈরি উদাহরণ

Angular CLI দিয়ে নতুন মডিউল তৈরি করতে:

ng generate module feature

এটি src/app/feature ফোল্ডারে একটি নতুন মডিউল তৈরি করবে।

Feature Module (feature.module.ts)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [FeatureComponent], // কম্পোনেন্ট, ডিরেক্টিভ ইত্যাদি
  imports: [CommonModule], // অ্যাঙ্গুলার কমন মডিউল
  exports: [FeatureComponent] // এক্সপোর্ট করা কম্পোনেন্ট
})
export class FeatureModule { }

Component এবং Module এর পার্থক্য

সারাংশ

Component এবং Module Angular অ্যাপ্লিকেশন তৈরির দুটি গুরুত্বপূর্ণ অংশ। Component অ্যাপ্লিকেশনের UI উপস্থাপনের জন্য ব্যবহৃত হয়, যেখানে Module অ্যাপ্লিকেশনের বিভিন্ন ফিচারকে মডুলার আকারে সংগঠিত করে। এই দুটি একসঙ্গে অ্যাপ্লিকেশনকে মডুলার, স্কেলেবল এবং পুনঃব্যবহারযোগ্য করে তোলে।