Angular

 

✅ What is Angular?

English:
Angular is a TypeScript-based front-end framework developed by Google. It is used to build dynamic, single-page web applications (SPAs) with a component-based architecture.

Bangla:
Angular হলো একটি TypeScript-ভিত্তিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা Google দ্বারা তৈরি। এটি ডাইনামিক, সিঙ্গেল-পেজ ওয়েব অ্যাপ্লিকেশন (SPA) তৈরি করতে ব্যবহৃত হয় এবং কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার অনুসরণ করে।

---

✅ Core Features (মূল বৈশিষ্ট্য):

English:

• Component-based architecture
• Two-way data binding
• Dependency Injection
• Routing for SPAs
• Built-in directives and pipes

Bangla:

• কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার
• টু-ওয়ে ডাটা বাইন্ডিং
• ডিপেনডেন্সি ইনজেকশন
• SPA-এর জন্য রাউটিং
• বিল্ট-ইন ডিরেক্টিভ এবং পাইপস
  
  

  ✅ Why Use Angular? (কেন Angular ব্যবহার করব?)

  English:

  • Strong structure for large applications
  • Built-in tools for forms, HTTP, and routing
  • High performance and maintainability
  • Backed by Google and large community

  Bangla:

  • বড় অ্যাপ্লিকেশনের জন্য শক্তিশালী স্ট্রাকচার
  • ফর্ম, HTTP, এবং রাউটিং-এর জন্য বিল্ট-ইন টুলস
  • উচ্চ পারফরম্যান্স এবং সহজ মেইনটেন্যান্স
  • Google এবং বড় কমিউনিটির সাপোর্ট
    
    

    ✅ Angular Project Structure

    my-angular-app/
    │
    ├── node_modules/        → **English:** Installed dependencies  
    │                         → **Bangla:** ইনস্টল করা লাইব্রেরি ও প্যাকেজ
    │
    ├── src/                 → **English:** Main source code folder  
    │   │                     → **Bangla:** মূল সোর্স কোড ফোল্ডার
    │   ├── app/             → **English:** Application components, modules, services  
    │   │                     → **Bangla:** অ্যাপ্লিকেশনের কম্পোনেন্ট, মডিউল, সার্ভিস
    │   ├── assets/          → **English:** Images, CSS, static files  
    │   │                     → **Bangla:** ইমেজ, CSS, স্ট্যাটিক ফাইল
    │   ├── environments/    → **English:** Environment-specific configs  
    │   │                     → **Bangla:** এনভায়রনমেন্ট অনুযায়ী কনফিগারেশন
    │   ├── index.html       → **English:** Main HTML file  
    │   │                     → **Bangla:** প্রধান HTML ফাইল
    │   ├── main.ts          → **English:** Entry point for Angular app  
    │   │                     → **Bangla:** Angular অ্যাপের এন্ট্রি পয়েন্ট
    │   ├── styles.css       → **English:** Global styles  
    │                         → **Bangla:** গ্লোবাল স্টাইল
    │
    ├── angular.json         → **English:** Angular configuration file  
    │                         → **Bangla:** Angular কনফিগারেশন ফাইল
    ├── package.json         → **English:** Project dependencies and scripts  
    │                         → **Bangla:** প্রোজেক্টের ডিপেনডেন্সি ও স্ক্রিপ্ট
    ├── tsconfig.json        → **English:** TypeScript configuration  
    │                         → **Bangla:** TypeScript কনফিগারেশন
    ✅ Key Points
    
    app/ ফোল্ডারে আপনার কম্পোনেন্ট, সার্ভিস, মডিউল থাকবে।
    assets/ ফোল্ডারে ইমেজ, CSS, এবং অন্যান্য স্ট্যাটিক ফাইল থাকবে।
    angular.json ফাইল প্রোজেক্টের বিল্ড ও কনফিগারেশন নিয়ন্ত্রণ করে।
    package.json ফাইল ডিপেনডেন্সি ও npm স্ক্রিপ্ট ম্যানেজ করে।
    1. Angular Service তৈরি কিভাবে?
    English:
    
    Angular service is used to share data or logic across components. You create it using Angular CLI:
    ng generate service my-service
    This creates my-service.service.ts file. Then you inject it into a component using Dependency Injection.
    Bangla:
    
    Angular সার্ভিস ব্যবহার করা হয় কম্পোনেন্টগুলোর মধ্যে ডাটা বা লজিক শেয়ার করার জন্য। CLI দিয়ে সার্ভিস তৈরি করা যায়:
    ng generate service my-service
    
    এটি my-service.service.ts ফাইল তৈরি করবে। এরপর সার্ভিসকে কম্পোনেন্টে Dependency Injection এর মাধ্যমে ব্যবহার করা হয়।
    
    ✅ 2. Angular Module কিভাবে কাজ করে?
    English:
    
    Angular module (@NgModule) is a container for components, directives, pipes, and services. It organizes the application into functional blocks.
    
    AppModule is the root module.
    Modules declare components and import other modules.
    
    Bangla:
    
    Angular মডিউল (@NgModule) হলো একটি কন্টেইনার যেখানে কম্পোনেন্ট, ডিরেক্টিভ, পাইপ এবং সার্ভিস থাকে। এটি অ্যাপ্লিকেশনকে ফাংশনাল ব্লকে ভাগ করে।
    
    AppModule হলো মূল মডিউল।
    মডিউল কম্পোনেন্ট ডিক্লেয়ার করে এবং অন্য মডিউল ইমপোর্ট করে।
    
    
    ✅ 3. Angular Component Lifecycle (কম্পোনেন্টের জীবনচক্র):
    English:
    
    Angular components have lifecycle hooks:
    
    ngOnInit() – Called after component initialization.
    ngOnChanges() – Called when input properties change.
    ngDoCheck() – Custom change detection.
    ngAfterViewInit() – After view initialization.
    ngOnDestroy() – Before component is destroyed.
    
    Bangla:
    
    Angular কম্পোনেন্টের লাইফসাইকেল হুকগুলো হলো:
    
    ngOnInit() – কম্পোনেন্ট ইনিশিয়ালাইজ হওয়ার পর কল হয়।
    ngOnChanges() – ইনপুট প্রপার্টি পরিবর্তন হলে কল হয়।
    ngDoCheck() – কাস্টম চেঞ্জ ডিটেকশন।
    ngAfterViewInit() – ভিউ ইনিশিয়ালাইজ হওয়ার পর কল হয়।
    ngOnDestroy() – কম্পোনেন্ট ধ্বংস হওয়ার আগে কল হয়।
    
    ✅ Why Angular Component?
    English:
    
    Angular components are the building blocks of an Angular application. They allow you to:
    
    Encapsulate UI and Logic – Each component handles its own HTML, CSS, and TypeScript logic.
    Reusability – Components can be reused across different parts of the application.
    Maintainability – Breaking the app into smaller components makes it easier to manage and update.
    Data Binding – Components support one-way and two-way data binding for dynamic UI updates.
    Lifecycle Management – Components have lifecycle hooks for initialization, updates, and cleanup.
    
    Bangla:
    
    Angular কম্পোনেন্ট হলো অ্যাপ্লিকেশনের মূল বিল্ডিং ব্লক। এর সুবিধাগুলো হলো:
    
    UI এবং লজিক আলাদা রাখা – প্রতিটি কম্পোনেন্টের নিজস্ব HTML, CSS, এবং TypeScript লজিক থাকে।
    পুনঃব্যবহারযোগ্যতা – কম্পোনেন্টগুলো অ্যাপের বিভিন্ন অংশে পুনঃব্যবহার করা যায়।
    সহজ মেইনটেন্যান্স – ছোট ছোট কম্পোনেন্টে ভাগ করলে অ্যাপ ম্যানেজ করা সহজ হয়।
    ডাটা বাইন্ডিং – কম্পোনেন্টে ওয়ান-ওয়ে এবং টু-ওয়ে ডাটা বাইন্ডিং সাপোর্ট করে।
    লাইফসাইকেল ম্যানেজমেন্ট – কম্পোনেন্টে ইনিশিয়ালাইজেশন, আপডেট এবং ক্লিনআপের জন্য লাইফসাইকেল হুক থাকে।