Angular অ্যাপ্লিকেশন গুলোর মধ্যে মডুলার আর্কিটেকচার ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ। ফিচার মডিউলস হলো সেই মডিউলগুলো যেগুলি অ্যাপ্লিকেশনের নির্দিষ্ট ফিচার বা কার্যকারিতা (features) এর জন্য তৈরি হয়। এই মডিউলগুলো কম্পোনেন্ট, সার্ভিস, ডিরেক্টিভ, পাইপ ইত্যাদি উপাদানগুলিকে একত্রিত করে একটি নির্দিষ্ট ফিচার বা সেগমেন্টের জন্য।
ফিচার মডিউল ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনটি আরও স্কেলেবল, পুনরায় ব্যবহারযোগ্য এবং মেইনটেনেবল হয়। এটি বড় অ্যাপ্লিকেশন গুলোর জন্য একটি ভাল স্ট্রাকচার প্রদান করে, যেখানে প্রতিটি ফিচার বা কার্যকারিতা আলাদাভাবে কাজ করে।
ফিচার মডিউল তৈরি
ফিচার মডিউল তৈরি করতে Angular CLI ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, একটি User ফিচার মডিউল তৈরি করা:
ng generate module user
এটি user নামে একটি নতুন মডিউল তৈরি করবে, যেটিতে কম্পোনেন্ট, সার্ভিস ইত্যাদি অন্তর্ভুক্ত করা যাবে।
ফিচার মডিউল ব্যবহার
একটি ফিচার মডিউল সাধারণত একটি নির্দিষ্ট ফিচারের জন্য সমস্ত উপাদান (কম্পোনেন্ট, সার্ভিস, ডিরেক্টিভ ইত্যাদি) সংগঠিত করে। একটি অ্যাপ্লিকেশন বা প্রধান মডিউলে ফিচার মডিউলটিকে import করতে হয়।
উদাহরণ: UserModule
ফিচার মডিউল user এর মধ্যে বিভিন্ন কম্পোনেন্ট এবং সার্ভিস থাকতে পারে। প্রথমে user.module.ts ফাইল তৈরি করা হবে:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';
import { UserService } from './user.service';
@NgModule({
declarations: [
UserComponent
],
imports: [
CommonModule
],
providers: [UserService],
exports: [UserComponent] // যদি অন্য মডিউলে ব্যবহারের জন্য এক্সপোর্ট করতে চান
})
export class UserModule { }
এখানে:
UserComponentহলোuserফিচারের কম্পোনেন্ট।UserServiceহলোuserফিচারের সার্ভিস।CommonModule-এ Angular এর কমন ডিরেক্টিভস (যেমনngIf,ngFor) অন্তর্ভুক্ত থাকে।
ফিচার মডিউলকে মেইন মডিউলে (অথবা রুট মডিউলে) ইম্পোর্ট করা:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module'; // ফিচার মডিউল ইম্পোর্ট করা
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UserModule // এখানে ফিচার মডিউল যুক্ত করা হচ্ছে
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখানে, UserModule কে AppModule-এ অন্তর্ভুক্ত করা হয়েছে, যাতে UserComponent এবং UserService অ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করা যেতে পারে।
Lazy Loading (ফিচার মডিউল লেজি লোডিং)
Angular-এ Lazy Loading ব্যবহার করে ফিচার মডিউল গুলো পেজ লোডের সময় অপ্রয়োজনীয় ফিচার মডিউল লোড না করে, যখন প্রয়োজন হবে তখন সেই মডিউল লোড করা হয়। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।
ফিচার মডিউলকে লেজি লোড করার জন্য রাউটিং কনফিগারেশন ব্যবহার করা হয়:
const routes: Routes = [
{ path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];
এখানে:
loadChildrenব্যবহার করে Angular রাউটার নির্দেশ করে যেUserModuleকে তখনই লোড করতে হবে যখন/userরাউটটি অ্যাক্সেস করা হবে।
ফিচার মডিউলের সুবিধা
- কোড অরগানাইজেশন: ফিচার মডিউল ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের কোড আরও সংগঠিত ও পরিষ্কার হয়।
- স্কেলেবিলিটি: বড় অ্যাপ্লিকেশনে প্রতিটি ফিচারের জন্য আলাদা মডিউল রাখা যায়, যা অ্যাপ্লিকেশনটি স্কেলেবল করে তোলে।
- Lazy Loading: ফিচার মডিউলগুলি লেজি লোড করা গেলে অ্যাপ্লিকেশনের লোড টাইম দ্রুত হয়।
- পুনঃব্যবহারযোগ্যতা: একাধিক অ্যাপ্লিকেশনে ফিচার মডিউলটি পুনঃব্যবহারযোগ্য হয়।
Read more
