Angular Project Structure এর বেসিক পরিচিতি

Angular প্রজেক্ট তৈরি করলে এটি একটি প্রি-ডিফাইন্ড ফোল্ডার এবং ফাইল স্ট্রাকচার প্রদান করে। এই স্ট্রাকচারটি Angular অ্যাপ্লিকেশনকে মডুলার এবং সংগঠিত রাখে। একটি Angular প্রজেক্টের প্রধান অংশ এবং তাদের ভূমিকা নিচে আলোচনা করা হলো।

Angular Project এর মূল ফোল্ডার এবং ফাইল

root ফোল্ডার (Project Root)

Angular প্রজেক্টের রুট ফোল্ডারে কয়েকটি গুরুত্বপূর্ণ ফাইল এবং ফোল্ডার থাকে। এগুলো অ্যাপ্লিকেশনের সেটআপ এবং কনফিগারেশনের জন্য ব্যবহৃত হয়।

• package.json
  • এই ফাইলে প্রজেক্টের ডিপেনডেন্সি এবং স্ক্রিপ্টের তথ্য থাকে।
  • নতুন লাইব্রেরি যোগ বা মুছতে এই ফাইলটি কাজ করে।

  • উদাহরণ:

    {
      "dependencies": {
        "@angular/core": "^15.0.0",
        "rxjs": "^7.0.0"
      },
      "scripts": {
        "start": "ng serve",
        "build": "ng build"
      }
    }
    

• angular.json
  • এটি প্রজেক্টের মূল কনফিগারেশন ফাইল।
  • এখানে স্টাইল ফাইল, স্ক্রিপ্ট এবং বিল্ড অপশন কনফিগার করা হয়।
• tsconfig.json
  • TypeScript কনফিগারেশন ফাইল।
  • এখানে TypeScript কম্পাইলারের নিয়ম এবং সেটিংস নির্ধারণ করা হয়।
• node_modules
  • প্রজেক্টের সমস্ত ডিপেনডেন্সি এবং প্যাকেজ এখানে থাকে।
  • এটি npm install চালালে স্বয়ংক্রিয়ভাবে তৈরি হয়।

src ফোল্ডার (Source Folder)

src/ ফোল্ডারে অ্যাপ্লিকেশনের প্রধান কোড এবং সম্পদ থাকে। এটি Angular অ্যাপ্লিকেশনের মূল অংশ।

• src/app
  • অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্ট, মডিউল, সার্ভিস এবং রিসোর্স এখানে থাকে।
  • এই ফোল্ডারের মধ্যে প্রতিটি কম্পোনেন্ট একটি ডিরেক্টরি আকারে থাকে।
• src/assets
  • অ্যাপ্লিকেশনের ইমেজ, JSON ফাইল, এবং অন্যান্য স্ট্যাটিক রিসোর্স এখানে থাকে।
• src/environments
  • ডেভেলপমেন্ট এবং প্রোডাকশন পরিবেশের জন্য আলাদা কনফিগারেশন ফাইল থাকে।
  • উদাহরণ: environment.ts (ডেভেলপমেন্ট) এবং environment.prod.ts (প্রোডাকশন)।
• src/index.html
  • এটি অ্যাপ্লিকেশনের প্রধান HTML ফাইল।
  • Angular এখানে app-root সিলেক্টরের মাধ্যমে অ্যাপ্লিকেশন লোড করে।
• src/main.ts
  • অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট।
  • এটি অ্যাপ্লিকেশনের মূল মডিউল (AppModule) কে বুটস্ট্র্যাপ করে।
• src/styles.css
  • অ্যাপ্লিকেশনের গ্লোবাল স্টাইল এখানে লেখা হয়।

app ফোল্ডারের স্ট্রাকচার

src/app ফোল্ডার হলো Angular অ্যাপ্লিকেশনের প্রধান অংশ। এখানে অ্যাপ্লিকেশনের সমস্ত ফিচার এবং লজিক থাকে। উদাহরণ:

• app.module.ts
  • অ্যাপ্লিকেশনের মূল মডিউল।
  • এখানে কম্পোনেন্ট, সার্ভিস এবং মডিউলগুলো আমদানি করা হয়।
• app.component.ts
  • অ্যাপ্লিকেশনের রুট কম্পোনেন্ট।
  • এটি app-root সিলেক্টর ব্যবহার করে অ্যাপের প্রধান ভিউ লোড করে।
• app.component.html
  • রুট কম্পোনেন্টের HTML টেমপ্লেট।
  • এখানে UI সংক্রান্ত কোড লেখা হয়।
• app.component.css
  • রুট কম্পোনেন্টের CSS স্টাইল।

অন্যান্য গুরুত্বপূর্ণ ফাইল

• .editorconfig
  • কোড স্টাইল এবং ফরম্যাটিং সংক্রান্ত নিয়ম।
• .gitignore
  • Git-এর জন্য এমন ফাইল বা ফোল্ডার নির্ধারণ করে যা রিপোজিটরিতে অন্তর্ভুক্ত হবে না।
• README.md
  • Angular প্রজেক্ট সম্পর্কে তথ্য প্রদর্শনের জন্য।

Angular Project Workflow

Angular প্রজেক্টের স্ট্রাকচার অ্যাপ্লিকেশনকে সহজে মডুলার এবং স্কেলেবল করতে সাহায্য করে। প্রধান কাজগুলো হলো:

1. কম্পোনেন্ট তৈরি:
   নতুন ফিচার যোগ করার জন্য নতুন কম্পোনেন্ট তৈরি করুন:

   ng generate component component-name
   

2. মডিউল তৈরি:
   অ্যাপ্লিকেশনের বিভিন্ন অংশ মডিউল আকারে ভাগ করুন:

   ng generate module module-name
   

3. সার্ভিস তৈরি:
   ডেটা হ্যান্ডলিং এবং ব্যাকএন্ড কলের জন্য সার্ভিস তৈরি করুন:

   ng generate service service-name
   

সারাংশ

Angular এর স্ট্রাকচার একটি সুসংগঠিত আর্কিটেকচার প্রদান করে, যা অ্যাপ্লিকেশন তৈরি এবং পরিচালনা সহজ করে তোলে। রুট ফোল্ডারের ফাইলগুলো কনফিগারেশনের জন্য এবং src/app ফোল্ডার অ্যাপ্লিকেশনের ফিচার এবং লজিক রাখার জন্য ব্যবহৃত হয়। এই স্ট্রাকচার মডুলার এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।