শেয়ার্ড মডিউলস

Web Development - অ্যাঙ্গুলার (Angular) - Angular মডিউলস |

Angular অ্যাপ্লিকেশনে শেয়ার্ড মডিউলস (Shared Modules) হল এমন একটি মডিউল যা সাধারণত অ্যাপ্লিকেশনটির বিভিন্ন অংশে পুনরায় ব্যবহৃত উপাদান (কম্পোনেন্ট, ডিরেক্টিভ, পাইপ) এবং সার্ভিস সরবরাহ করার জন্য ব্যবহৃত হয়। যখন একই কম্পোনেন্ট বা ডিরেক্টিভ একাধিক মডিউলে ব্যবহৃত হতে থাকে, তখন এগুলো একটি শেয়ার্ড মডিউলে স্থানান্তর করা হয়, যাতে কোড পুনঃব্যবহারযোগ্য এবং রক্ষণাবেক্ষণযোগ্য হয়।

শেয়ার্ড মডিউলস আপনার অ্যাপ্লিকেশনের কোড কাঠামোকে আরও মডুলার এবং স্কেলেবল করে তোলে। এটি এমন একটি সেন্ট্রালাইজড স্থান যেখানে কম্পোনেন্ট বা সার্ভিস গুলো একবার তৈরি করা হয় এবং অ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করা হয়।

শেয়ার্ড মডিউল তৈরি করা

প্রথমে, Angular CLI ব্যবহার করে একটি শেয়ার্ড মডিউল তৈরি করতে পারেন:

ng generate module shared

এটি একটি নতুন মডিউল তৈরি করবে, যেটি সাধারণত shared.module.ts নামে থাকবে। এই মডিউলটিতে আপনি সেই সব কম্পোনেন্ট, ডিরেক্টিভ, পাইপ এবং সার্ভিসগুলো স্থানান্তর করবেন যেগুলো বিভিন্ন মডিউলে ব্যবহৃত হবে।

উদাহরণ: শেয়ার্ড মডিউল

ধরা যাক, আপনার অ্যাপ্লিকেশনে একটি সাধারণ ButtonComponent এবং HighlightDirective রয়েছে, যা বিভিন্ন মডিউলে ব্যবহৃত হতে পারে। এই দুটি উপাদান শেয়ার্ড মডিউলে স্থানান্তর করা হবে।

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './button/button.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    ButtonComponent,
    HighlightDirective
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ButtonComponent,
    HighlightDirective
  ]
})
export class SharedModule { }

এখানে:

declarations: এখানে আমরা সেই কম্পোনেন্ট এবং ডিরেক্টিভগুলি ডিক্লেয়ার করেছি, যেগুলো শেয়ার্ড মডিউলে অন্তর্ভুক্ত হবে।
exports: এটি অন্য মডিউলগুলোতে শেয়ারড কম্পোনেন্ট বা ডিরেক্টিভগুলি ব্যবহারের অনুমতি দেয়।

শেয়ার্ড মডিউল ব্যবহার

যেহেতু শেয়ার্ড মডিউলে কিছু কম্পোনেন্ট বা ডিরেক্টিভ ঘোষণা করা হয়েছে, এটি অন্যান্য মডিউল থেকে ব্যবহার করার জন্য imports অ্যারে তে অন্তর্ভুক্ত করতে হবে।

উদাহরণ: অন্য মডিউলে শেয়ার্ড মডিউল ব্যবহার

যেমন, আপনি যদি AppModule বা অন্য কোনো মডিউলে শেয়ার্ড মডিউল ব্যবহার করতে চান, তাহলে আপনাকে SharedModule-কে ইমপোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule  // শেয়ার্ড মডিউল ইমপোর্ট
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, SharedModule-কে imports অ্যারে তে অন্তর্ভুক্ত করা হয়েছে, যাতে ButtonComponent এবং HighlightDirective অ্যাপ্লিকেশনের অন্য অংশে ব্যবহৃত হতে পারে।