Angular পরিচিতি এবং ইন্টিগ্রেশন

Angular হল একটি জনপ্রিয় ফ্রন্টএন্ড ফ্রেমওয়ার্ক (Frontend Framework) যা গুগল দ্বারা তৈরি এবং রক্ষণাবেক্ষণ করা হয়। এটি Single Page Applications (SPA) বা একক পৃষ্ঠা অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়। AngularJS (প্রথম সংস্করণ) থেকে শুরু হয়ে বর্তমানে Angular 2+ এর উন্নতি ঘটেছে, যা একটি কম্পোনেন্ট ভিত্তিক আর্কিটেকচার নিয়ে কাজ করে। Angular জাভাস্ক্রিপ্টের পরিবর্তে TypeScript ব্যবহার করে, যা আরও শক্তিশালী টাইপিং এবং অটো-কমপ্লিট সুবিধা প্রদান করে।

Angular ক্লায়েন্ট সাইডের ইউজার ইন্টারফেস (UI) তৈরি করতে সহায়ক এবং MeanJS স্ট্যাকের অংশ হিসেবে এটি অত্যন্ত জনপ্রিয়। এটি ডেভেলপারদের জন্য ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

Angular এর মূল বৈশিষ্ট্যসমূহ

১. কম্পোনেন্ট ভিত্তিক আর্কিটেকচার

Angular একটি কম্পোনেন্ট ভিত্তিক ফ্রেমওয়ার্ক, যেখানে অ্যাপ্লিকেশনটি ছোট ছোট কম্পোনেন্টে বিভক্ত থাকে। প্রতিটি কম্পোনেন্টের মধ্যে থাকে একটি HTML টেমপ্লেট, CSS স্টাইল এবং TypeScript ক্লাস যা অ্যাপ্লিকেশনের লজিক পরিচালনা করে। এই পদ্ধতি কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ করে।

২. ডাটা-বাইন্ডিং

Angular এ ডাটা-বাইন্ডিং ফিচারটি ডেভেলপারদের ডাইনামিক কন্টেন্টের সাথে সহজে ইন্টারঅ্যাক্ট করার সুযোগ দেয়। Two-way data binding এর মাধ্যমে মডেল এবং ভিউ একে অপরের সাথে স্বয়ংক্রিয়ভাবে সিঙ্ক্রোনাইজ হয়ে যায়।

৩. ডিরেকটিভ এবং পাইপস

Angular ডিরেকটিভের মাধ্যমে HTML ট্যাগের আচরণ পরিবর্তন করতে সাহায্য করে। যেমন: ngFor, ngIf, ইত্যাদি। পাইপস ডেটার ফর্ম্যাট পরিবর্তন করার জন্য ব্যবহৃত হয়, যেমন ডেটার তারিখ বা সংখ্যার ফরম্যাটিং।

৪. রাউটিং

Angular এর রাউটার প্যাকেজ ব্যবহার করে, ডেভেলপাররা অ্যাপ্লিকেশনটির বিভিন্ন ভিউগুলির মধ্যে নেভিগেট করতে পারেন। এটি স্পা (Single Page Application) নির্মাণে সহায়ক, যেখানে পৃষ্ঠা রিলোড না করেই ইউজারকে নতুন কনটেন্ট প্রদর্শন করা হয়।

৫. হ্যান্ডলিং ফর্ম এবং ভ্যালিডেশন

Angular সহজেই ফর্ম এবং তাদের ভ্যালিডেশন পরিচালনা করতে সহায়তা করে। Reactive Forms এবং Template-driven Forms এর মাধ্যমে ফর্ম তৈরি এবং ডেটা সংগ্রহ করা যায়।

৬. RxJS এবং অবজার্ভেবল

Angular RxJS ব্যবহার করে Observables এর মাধ্যমে অ্যাসিঙ্ক্রোনাস ডেটা ফ্লো পরিচালনা করে। এতে ডেভেলপাররা ডেটা স্ট্রিম এবং ইভেন্টগুলোর সাথে আরও ভালোভাবে কাজ করতে পারেন।

Angular এর সাথে MeanJS ইন্টিগ্রেশন

MeanJS স্ট্যাকের একটি গুরুত্বপূর্ণ অংশ হিসেবে Angular ব্যবহার করা হয়। Angular ক্লায়েন্ট সাইডের ইউজার ইন্টারফেস (UI) তৈরি করতে সহায়ক, আর Node.js এবং Express.js সার্ভার সাইডের কার্যকলাপ পরিচালনা করে, এবং MongoDB ডেটাবেস ব্যবহৃত হয়। এই সমন্বয়ে, ডেভেলপাররা একটি সম্পূর্ণ JavaScript ভিত্তিক অ্যাপ্লিকেশন তৈরি করতে পারেন।

MeanJS স্ট্যাকের সাথে Angular ইন্টিগ্রেশন

• Angular UI (Client-Side): Angular ক্লায়েন্ট সাইডের UI তৈরি করে এবং এর মাধ্যমে ইউজার ইন্টারঅ্যাকশন এবং ডাইনামিক কনটেন্ট রেন্ডারিং পরিচালনা করা হয়।
• Express.js (Server-Side): Express.js সার্ভার সাইডের API তৈরি করে, যা Angular অ্যাপ্লিকেশন থেকে HTTP রিকুয়েস্ট প্রক্রিয়া করে।
• Node.js (Runtime): Node.js সার্ভারের মাধ্যমে Angular অ্যাপ্লিকেশনটির ডাইনামিক কন্টেন্টের জন্য রিকুয়েস্ট হ্যান্ডলিং এবং API ইন্টারঅ্যাকশন সম্পাদন করা হয়।
• MongoDB (Database): MongoDB ডেটাবেস অ্যাপ্লিকেশন থেকে ডেটা সংগ্রহ ও সংরক্ষণ করতে ব্যবহৃত হয় এবং Angular এই ডেটা রেন্ডারিং করে UI তে দেখায়।

নির্দিষ্ট Angular মডিউল ও সেবা

1. HTTP Client: Angular অ্যাপ্লিকেশন Express.js সার্ভারে HTTP রিকুয়েস্ট পাঠাতে HttpClientModule ব্যবহার করে।
2. Services and Dependency Injection: Angular সেবার মাধ্যমে ডেটা হ্যান্ডলিং এবং API কলগুলো সংগঠিত করা হয়, এবং dependency injection এর মাধ্যমে প্রয়োজনীয় ডেটা ক্লাসে ইনজেক্ট করা হয়।
3. Router: Angular এর রাউটার মডিউল ব্যবহার করে অ্যাপ্লিকেশনের বিভিন্ন ভিউ বা পেজে নেভিগেট করা হয়।
4. State Management: Angular অ্যাপ্লিকেশনগুলিতে স্টেট পরিচালনার জন্য NgRx অথবা BehaviorSubject ব্যবহার করা হয়।

Angular ইন্টিগ্রেশনের সুবিধাসমূহ

১. ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি

Angular এবং MeanJS স্ট্যাক একত্রে ডেভেলপারদের একটি শক্তিশালী এবং দ্রুত ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে, যা ব্যবহারকারী ইন্টারঅ্যাকশন এবং কনটেন্ট রেন্ডারিং সহজ করে।

২. ওয়েব API-এর মাধ্যমে ডেটা এক্সচেঞ্জ

Angular অ্যাপ্লিকেশন, Express.js সার্ভারের মাধ্যমে ডেটা পাঠাতে এবং গ্রহণ করতে পারে। এতে অ্যাপ্লিকেশনটি ডাইনামিক এবং রিয়েল-টাইম ফিচারসহ কাজ করতে পারে।

৩. কম্পোনেন্ট-ভিত্তিক ইউজার ইন্টারফেস

Angular এর কম্পোনেন্ট আর্কিটেকচার ব্যবহার করে ডেভেলপাররা সহজে পুনঃব্যবহারযোগ্য UI কম্পোনেন্ট তৈরি করতে পারেন, যা অ্যাপ্লিকেশনটির রক্ষণাবেক্ষণ সহজ করে।

৪. দ্রুত ডেভেলপমেন্ট

Angular এবং MeanJS স্ট্যাকের মাধ্যমে, ডেভেলপাররা খুব দ্রুত এবং কার্যকরভাবে অ্যাপ্লিকেশন তৈরি করতে পারেন, কারণ এখানে ডেভেলপমেন্ট, রাউটিং, ডেটা ম্যানেজমেন্ট এবং UI রেন্ডারিং একসাথে কাজ করে।

সারাংশ

Angular একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা MeanJS স্ট্যাকের অংশ হিসেবে সার্ভার সাইড এবং ক্লায়েন্ট সাইড অ্যাপ্লিকেশন নির্মাণে গুরুত্বপূর্ণ ভূমিকা পালন করে। এর কম্পোনেন্ট ভিত্তিক আর্কিটেকচার, ডাটা-বাইন্ডিং, রাউটিং, এবং RxJS ব্যবহারকারী অ্যাপ্লিকেশনটিকে ডাইনামিক এবং স্কেলেবল করে তোলে। MeanJS স্ট্যাকের সাথে Angular ইন্টিগ্রেশন, ডেভেলপারদের দ্রুত, শক্তিশালী এবং আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

Angular হল একটি ওপেন সোর্স ফ্রন্টএন্ড ফ্রেমওয়ার্ক (Frontend Framework), যা গুগল দ্বারা তৈরি এবং মেইনটেইন করা হয়। এটি Single Page Applications (SPA) তৈরি করার জন্য ব্যবহৃত হয় এবং Model-View-Controller (MVC) বা Model-View-ViewModel (MVVM) আর্কিটেকচার অনুসরণ করে। Angular ডেভেলপারদের জন্য একটি শক্তিশালী টুল যা ডাইনামিক ও ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

Angular এর মূল ধারণা

১. কম্পোনেন্ট বেসড আর্কিটেকচার (Component-Based Architecture)

Angular অ্যাপ্লিকেশন গঠন করা হয় ছোট ছোট কম্পোনেন্ট এর মাধ্যমে। প্রতিটি কম্পোনেন্টের নিজস্ব টেমপ্লেট, ক্লাস এবং স্টাইল থাকে, যা অ্যাপ্লিকেশনের বিভিন্ন UI এলিমেন্টের প্রতিনিধিত্ব করে। এই কম্পোনেন্টগুলো একে অপরের সাথে যোগাযোগ করতে পারে এবং অ্যাপ্লিকেশনকে মডুলার ও স্কেলেবল করে তোলে।

• টেমপ্লেট: HTML যেখানে UI লেআউট তৈরি হয়।
• ক্লাস: TypeScript ক্লাস যা ডেটা এবং অ্যাকশনগুলিকে নিয়ন্ত্রণ করে।
• স্টাইল: CSS অথবা SCSS যা UI এর স্টাইলিং নিয়ন্ত্রণ করে।

২. ডাটা বাইন্ডিং (Data Binding)

Angular ডাটা বাইন্ডিং ব্যবহার করে, যার মাধ্যমে ক্লাসের ডেটা এবং UI এর মধ্যে দ্বিমুখী যোগাযোগ স্থাপন করা হয়। এর ফলে, যখন ডেটা পরিবর্তিত হয়, তখন তা UI-তে স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়, এবং যখন UI-তে কিছু পরিবর্তন হয়, তখন তা ডেটাতে প্রভাব ফেলে।

• একমুখী ডাটা বাইন্ডিং: ডেটা একবার ক্লাস থেকে টেমপ্লেটের দিকে প্রবাহিত হয়।
• দ্বিমুখী ডাটা বাইন্ডিং: ডেটা এবং UI একে অপরকে আপডেট করে, যেমন, Angular-এর ngModel।

৩. ডিরেকটিভস (Directives)

Angular ডিরেকটিভস ব্যবহার করে HTML এলিমেন্টগুলোর আচরণ পরিবর্তন করা হয়। ডিরেকটিভস হলো কাস্টম ট্যাগ বা অ্যাট্রিবিউট, যেগুলি HTML এ যুক্ত করলে কিছু নির্দিষ্ট আচরণ যোগ করা হয়।

• Structural Directives: যেমন *ngIf, *ngFor, যা DOM-এর স্ট্রাকচার পরিবর্তন করে।
• Attribute Directives: যেমন ngClass, ngStyle, যা HTML এলিমেন্টের স্টাইল বা আচরণ পরিবর্তন করে।

৪. রাউটিং (Routing)

Angular রাউটিং সিস্টেমের মাধ্যমে অ্যাপ্লিকেশনে বিভিন্ন পেজ বা ভিউগুলোর মধ্যে নেভিগেট করা যায়। একক পেজ অ্যাপ্লিকেশন (SPA) এর মধ্যে রাউটিং ব্যবহৃত হয়, যাতে এক পেজের মধ্যে বিভিন্ন ভিউ পরিবর্তিত হয় এবং পুরো পেজ রিফ্রেশ না হয়।

• RouterModule: Angular অ্যাপ্লিকেশনের রাউটিং পরিচালনার জন্য একটি নির্দিষ্ট মডিউল।
• ActivatedRoute: রাউটিং এবং URL সম্পর্কিত তথ্য পরিচালনা করতে ব্যবহৃত হয়।

৫. এনজেকশন (Dependency Injection)

Angular একটি শক্তিশালী Dependency Injection (DI) সিস্টেম ব্যবহার করে, যা ডেভেলপারদের সহজে নির্ভরশীলতার (dependencies) পরিচালনা করতে সাহায্য করে। DI এর মাধ্যমে কোড আরও মডুলার এবং টেস্টযোগ্য হয়ে ওঠে, কারণ আপনি যে কোনও সেবাকে (service) প্রয়োজনের সময় ইনজেক্ট করতে পারেন।

• Service: Angular-এ, একটি সার্ভিস হল একটি ক্লাস যা নির্দিষ্ট ফিচার বা কার্যক্রম সম্পাদন করে, যেমন HTTP রিকোয়েস্ট করা বা ডেটা প্রসেস করা।

৬. RxJS এবং অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং

Angular অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং করতে RxJS (Reactive Extensions for JavaScript) ব্যবহার করে। RxJS, Observables এর মাধ্যমে ডেটা স্ট্রিম পরিচালনা করতে সাহায্য করে। এটি অ্যাসিঙ্ক্রোনাস ডেটা ফেচিং বা প্রক্রিয়া করার জন্য একটি শক্তিশালী টুল।

• Observables: ডেটার স্ট্রিম বা সিকোয়েন্স, যা সময়ের সাথে আপডেট হতে পারে।
• Operators: RxJS এর মাধ্যমে বিভিন্ন অপারেশন যেমন ফিল্টার, ম্যাপ, কম্বাইন ইত্যাদি করা হয়।

৭. TypeScript ব্যবহার

Angular এর কোডিং ভাষা হল TypeScript, যা JavaScript এর উপরে তৈরি এবং টাইপ সিস্টেম এবং উন্নত ফিচার (যেমন ক্লাস, ইন্টারফেস, ডেকোরেটর) প্রদান করে। TypeScript কোড কম্পাইল হওয়ার পর JavaScript-এ রূপান্তরিত হয়, যা ব্রাউজারে রান করতে পারে।

• TypeScript এর সুবিধা: টাইপ সেফটি, কোডের উন্নত ডিবাগিং, এবং আরও পরিষ্কার স্ট্রাকচার।

Angular এর সুবিধাসমূহ

১. ফ্রন্টএন্ড অ্যাপ্লিকেশন উন্নয়নে শক্তিশালী টুল

Angular একটি কমপ্লিট ফ্রন্টএন্ড ফ্রেমওয়ার্ক (Complete Frontend Framework), যা কম্পোনেন্ট বেসড আর্কিটেকচার, ডাটা বাইন্ডিং, রাউটিং, এবং এনজেকশন এর মাধ্যমে অ্যাপ্লিকেশন তৈরি সহজ করে।

২. ডায়নামিক ওয়েব অ্যাপ্লিকেশন

Angular ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়ক, যেমন Single Page Applications (SPA) এবং Real-time Web Apps।

৩. মডুলার এবং স্কেলেবল কোড

Angular অ্যাপ্লিকেশন মডুলারভাবে তৈরি করা যায়, যার ফলে অ্যাপ্লিকেশনটি স্কেলেবল, সহজে রক্ষণাবেক্ষণযোগ্য এবং পুনঃব্যবহারযোগ্য হয়।

৪. এমভিসি এবং এমভিভিএম আর্কিটেকচার

Angular দুটি জনপ্রিয় আর্কিটেকচার প্যাটার্ন (MVC বা MVVM) অনুসরণ করে, যা ডেভেলপারদের ডেটা, ভিউ, এবং কন্ট্রোলারগুলোর মধ্যে পরিষ্কারভাবে বিভাজন করতে সহায়ক।

৫. ক্লাউড ডিপ্লয়মেন্ট এবং স্কেলিং

Angular অ্যাপ্লিকেশন ক্লাউড প্ল্যাটফর্মে যেমন Firebase বা AWS তে সহজে ডিপ্লয় করা যায়, এবং এর স্কেলেবিলিটি ও পারফরম্যান্স অত্যন্ত ভালো।

সারাংশ

Angular একটি শক্তিশালী এবং ফিচার-প্যাকড ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এর কম্পোনেন্ট বেসড আর্কিটেকচার, ডাটা বাইন্ডিং, রাউটিং, এবং Dependency Injection এর মাধ্যমে Angular ডেভেলপারদের কোডিং সহজ, দ্রুত এবং স্কেলেবল করতে সহায়তা করে। Angular কে আধুনিক ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য একটি অত্যন্ত জনপ্রিয় এবং কার্যকরী টুল হিসেবে বিবেচনা করা হয়।

Angular একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক (Frontend Framework) যা ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি Model-View-Controller (MVC) আর্কিটেকচার অনুসরণ করে এবং ডেটা বাইন্ডিং, কম্পোনেন্ট, এবং ডাইরেকটিভসের মাধ্যমে ডেভেলপারদের জন্য খুবই শক্তিশালী টুলস সরবরাহ করে। MeanJS স্ট্যাকের অংশ হিসেবে AngularJS ফ্রেমওয়ার্কটি সার্ভার এবং ক্লায়েন্ট সাইডের মধ্যে একটি দক্ষ সমন্বয় তৈরি করতে সহায়ক।

ডেটা বাইন্ডিং (Data Binding)

Angular তে ডেটা বাইন্ডিং হল সেই প্রক্রিয়া, যার মাধ্যমে মডেল (Model) এবং ভিউ (View) এর মধ্যে ডেটা সহজে এক্সচেঞ্জ করা হয়। এটি ওয়েব অ্যাপ্লিকেশনের ডাইনামিক ইন্টারফেস তৈরিতে গুরুত্বপূর্ণ ভূমিকা পালন করে। AngularJS বিভিন্ন ধরনের ডেটা বাইন্ডিং সাপোর্ট করে, যা নিম্নলিখিত:

১. One-way Data Binding

এটি এমন একটি প্রক্রিয়া যেখানে ডেটা এক্সপোর্ট বা ইনপুট ফিল্ড থেকে ভিউ পর্যন্ত পাঠানো হয়। ডেটার মান পরিবর্তন হলে, ভিউতে তা প্রতিফলিত হয়।

• Example:

  <div>{{ message }}</div>  <!-- message এখানে একটি model variable -->
  

২. Two-way Data Binding

এই প্রক্রিয়ায়, মডেল থেকে ডেটা ভিউতে এবং ভিউ থেকে মডেলে উভয় দিকেই প্রবাহিত হতে পারে। AngularJS এর ngModel ডাইরেকটিভ এই কাজটি করে।

• Example:

  <input [(ngModel)]="userName">
  <p>{{ userName }}</p> <!-- userName ভিউতে স্বয়ংক্রিয়ভাবে আপডেট হবে -->
  

৩. Event Binding

এটি ভিউতে ঘটে এমন একটি ইভেন্টকে মডেল বা ক্লাসের একটি ফাংশনের সাথে যুক্ত করার মাধ্যমে ডেটা এক্সচেঞ্জের প্রক্রিয়া।

• Example:

  <button (click)="greetUser()">Click Me</button>
  

৪. Property Binding

এটি মডেলের একটি প্রপার্টি ভিউয়ের একটি এলিমেন্টের প্রপার্টির সাথে বাইনডিং করে।

• Example:

  <img [src]="imageUrl">
  

কম্পোনেন্ট (Component)

Angular তে কম্পোনেন্ট হল অ্যাপ্লিকেশনের একক ব্লক, যা ইউজার ইন্টারফেসের একটি নির্দিষ্ট অংশ পরিচালনা করে। কম্পোনেন্ট একটি ক্লাস, HTML টেমপ্লেট, এবং স্টাইলের সমন্বয়ে তৈরি হয়।

কম্পোনেন্টের গঠন:

1. ক্লাস: এটি কম্পোনেন্টের লজিক বা ডেটা ধারণ করে।
2. টেমপ্লেট: এটি HTML কোডের অংশ, যা কম্পোনেন্টের UI তৈরি করে।
3. স্টাইল: CSS কোড যা টেমপ্লেটের স্টাইলিং নির্ধারণ করে।

Example of a Component:

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  userName: string = 'John Doe';
}

user.component.html:

<h1>{{ userName }}</h1>

কম্পোনেন্টগুলো অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে UI অংশের জন্য ব্যবহৃত হয় এবং Angular অ্যাপ্লিকেশনকে মডুলার ও পুনরায় ব্যবহারযোগ্য করে তোলে।

ডাইরেকটিভস (Directives)

Angular তে ডাইরেকটিভস হল বিশেষ ধরনের ক্লাস যা DOM (Document Object Model) উপাদানগুলোর আচরণ পরিবর্তন করে। এটি HTML ট্যাগে বা এলিমেন্টে নতুন ফিচার যোগ করে এবং DOM এর কার্যকারিতা পরিবর্তন করতে ব্যবহৃত হয়।

ডাইরেকটিভস-এর প্রকার:

১. Structural Directives

এই ধরনের ডাইরেকটিভস DOM এর গঠন পরিবর্তন করে। যেমন, নতুন এলিমেন্ট যুক্ত করা বা বিদ্যমান এলিমেন্ট মুছে ফেলা।

• Example:

  • *ngIf: এটি একটি এলিমেন্টকে DOM এ শো বা হাইড করতে ব্যবহার হয়।
  • *ngFor: এটি একটি লুপ চালিয়ে এলিমেন্টের রিপ্লিকা তৈরি করতে ব্যবহৃত হয়।

  <div *ngIf="isVisible">This will be shown if isVisible is true</div>
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
  

২. Attribute Directives

এই ধরনের ডাইরেকটিভস DOM এর স্টাইল বা আচরণ পরিবর্তন করে। এটি নির্দিষ্ট HTML প্রপার্টি পরিবর্তন করতে সাহায্য করে।

• Example:

  • ngClass: এটি একটি এলিমেন্টে CSS ক্লাস যোগ করতে ব্যবহৃত হয়।
  • ngStyle: এটি একটি এলিমেন্টে CSS স্টাইল যোগ করে।

  <div [ngClass]="{'highlight': isHighlighted}">Highlight me!</div>
  

সারাংশ

Angular এর ডেটা বাইন্ডিং, কম্পোনেন্ট, এবং ডাইরেকটিভস হল এর শক্তিশালী ফিচার, যা ডেভেলপারদের সহজে এবং দ্রুত ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

• ডেটা বাইন্ডিং এর মাধ্যমে মডেল এবং ভিউয়ের মধ্যে স্বয়ংক্রিয়ভাবে ডেটা সিঙ্ক্রোনাইজ করা যায়।
• কম্পোনেন্ট মডুলার আর্কিটেকচার তৈরি করতে সাহায্য করে, যেখানে UI অংশ এবং তাদের লজিক আলাদা করা হয়।
• ডাইরেকটিভস ডোম উপাদানের আচরণ পরিবর্তন করে, যার মাধ্যমে HTML ট্যাগের কার্যকারিতা বাড়ানো যায়।

এগুলি একটি Angular অ্যাপ্লিকেশনকে আরও কার্যকরী, ডাইনামিক এবং সিস্টেমেটিকভাবে সংগঠিত করে তোলে, যা উন্নত পারফরমেন্স এবং ভালো ব্যবহারকারী অভিজ্ঞতা প্রদান করে।

MeanJS স্ট্যাকের সাথে AngularJS প্রজেক্ট তৈরি করা এবং তাকে ইন্টিগ্রেট করা একটি গুরুত্বপূর্ণ পদক্ষেপ, কারণ এটি ক্লায়েন্ট সাইডের ইউজার ইন্টারফেস (UI) তৈরি করতে সহায়ক। চলুন, MeanJS স্ট্যাকের অংশ হিসেবে Angular প্রজেক্ট তৈরি এবং সেটি Express.js এর সাথে ইন্টিগ্রেট করার প্রক্রিয়া দেখুন।

১. Angular প্রজেক্ট তৈরি করা

প্রথমে, আপনাকে Angular CLI ইনস্টল করতে হবে যদি তা আপনার সিস্টেমে ইনস্টল না থাকে। Angular CLI একটি টুল যা Angular অ্যাপ্লিকেশন তৈরি, চালানো এবং ডিপ্লয় করার জন্য ব্যবহৃত হয়।

Angular CLI ইনস্টল করা:

npm install -g @angular/cli

একটি নতুন Angular প্রজেক্ট তৈরি করা:

ng new meanjs-angular-app
cd meanjs-angular-app

এটি একটি নতুন Angular অ্যাপ্লিকেশন তৈরি করবে এবং আপনাকে এটি চালানোর জন্য প্রয়োজনীয় সব ফাইল এবং ফোল্ডার তৈরি করে দিবে।

Angular অ্যাপ্লিকেশন রান করা:

ng serve

এখন আপনার অ্যাপ্লিকেশনটি http://localhost:4200 এ চলে যাবে।

২. Express.js অ্যাপ্লিকেশন তৈরি করা

এখন, একটি Express.js অ্যাপ্লিকেশন তৈরি করতে হবে, যেটি Angular অ্যাপ্লিকেশনটির সাথে API এবং সার্ভার সাইড ইন্টিগ্রেশন করবে।

Express.js অ্যাপ্লিকেশন তৈরি করা:

প্রথমে আপনার Express.js অ্যাপ্লিকেশন তৈরি করুন, যেমন পূর্বের উত্তরেও আলোচনা করা হয়েছে।

mkdir express-backend
cd express-backend
npm init -y
npm install express

এখন, app.js ফাইল তৈরি করুন এবং নিচের কোডটি যোগ করুন:

// app.js

const express = require('express');
const path = require('path');
const app = express();

// Static folder set
app.use(express.static(path.join(__dirname, '../meanjs-angular-app/dist')));

// API endpoint example
app.get('/api', (req, res) => {
  res.json({ message: 'Hello from Express API' });
});

// Serve Angular app
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../meanjs-angular-app/dist/index.html'));
});

// Port setup
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

ব্যাখ্যা:

• express.static: Angular অ্যাপ্লিকেশনের বিল্ড ফোল্ডারকে স্ট্যাটিক ফোল্ডার হিসেবে সেটআপ করা হয়েছে।
• /api: একটি API এন্ডপয়েন্ট তৈরি করা হয়েছে, যা JSON আউটপুট দিবে।
• Angular অ্যাপ্লিকেশন Serve: app.get('*') এর মাধ্যমে Angular অ্যাপ্লিকেশনটি সার্ভ করা হচ্ছে।

৩. Angular অ্যাপ্লিকেশন বিল্ড করা

Angular অ্যাপ্লিকেশনটি বিল্ড করতে হবে যাতে এটি প্রডাকশন মোডে রান করতে পারে এবং Express.js এর মাধ্যমে সার্ভ করা যায়।

cd meanjs-angular-app
ng build --prod

এটি আপনার Angular অ্যাপ্লিকেশনটি dist/ ফোল্ডারে বিল্ড করবে।

৪. Express.js এবং Angular এর ইন্টিগ্রেশন

এখন, আপনাকে Express.js অ্যাপ্লিকেশন থেকে Angular অ্যাপ্লিকেশনটির dist/ ফোল্ডারকে সার্ভ করতে হবে। উপরের app.js ফাইলটি আগে থেকেই dist/ ফোল্ডারের পথ সঠিকভাবে সেটআপ করেছে।

Express অ্যাপ্লিকেশন রান করা:

cd express-backend
node app.js

এখন, http://localhost:3000 এ গিয়ে আপনি Angular অ্যাপ্লিকেশনটি দেখতে পাবেন এবং /api এন্ডপয়েন্টে গিয়ে আপনি Express API থেকে JSON ডেটা পাবেন।

৫. API রিকোয়েস্ট Angular থেকে Express এ পাঠানো

এখন আমরা Angular অ্যাপ্লিকেশন থেকে Express API এর সাথে যোগাযোগ করব। Angular অ্যাপ্লিকেশনের মধ্যে HttpClient মডিউল ব্যবহার করে API রিকোয়েস্ট পাঠানো যাবে।

Angular Service তৈরি করা:

ng generate service api

এটি একটি নতুন api.service.ts ফাইল তৈরি করবে। এখানে API কল করার কোডটি যোগ করুন:

// src/app/api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  private apiUrl = 'http://localhost:3000/api'; // Express API এর URL

  constructor(private http: HttpClient) {}

  getMessage(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

Angular Component এ API ডেটা শো করা:

এখন, এই সার্ভিসটি একটি কম্পোনেন্টে ব্যবহার করে API থেকে ডেটা প্রদর্শন করা যাবে।

// src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ message }}</h1>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  message: string;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getMessage().subscribe((data) => {
      this.message = data.message;
    });
  }
}

এখন, যখন Angular অ্যাপ্লিকেশনটি localhost:4200 এ চলবে, তখন এটি Express API থেকে message ফিল্ডটি গ্রহণ করে এবং UI তে দেখাবে।

সারাংশ

এখন, আপনি একটি Angular অ্যাপ্লিকেশন তৈরি করেছেন এবং সেটি Express.js অ্যাপ্লিকেশনের সাথে সফলভাবে ইন্টিগ্রেট করেছেন। এটি আপনাকে MeanJS স্ট্যাক ব্যবহার করে একক পেজ অ্যাপ্লিকেশন (SPA) তৈরি এবং সার্ভার সাইড API তৈরি করার জন্য একটি শক্তিশালী ভিত্তি প্রদান করে। Angular ক্লায়েন্ট সাইডের ইন্টারফেস তৈরি করে, এবং Express সার্ভার সাইডের API এবং ডেটা প্রক্রিয়াকরণ পরিচালনা করে।

AngularJS (যদিও এটি পুরানো সংস্করণ, তবে অনেক অ্যাপ্লিকেশনে এখনো ব্যবহৃত হয়) এবং Angular 2+ উভয়ই Routing এবং UI Routing ব্যবস্থা প্রদান করে, যার মাধ্যমে একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) তৈরি করা যায়। MeanJS স্ট্যাকের মধ্যে AngularJS ব্যবহার করার মাধ্যমে বিভিন্ন পৃষ্ঠা বা ভিউয়ের মধ্যে নেভিগেশন পরিচালনা করা যায়।

এখানে, আমরা Angular Routing এবং UI Routes কনফিগারেশন সম্পর্কে বিস্তারিত আলোচনা করব, যা MeanJS অ্যাপ্লিকেশনগুলিতে ব্যবহার করা যায়।

Angular Routing: এক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) তৈরি করা

AngularJS Routing এ, আপনি একটি পৃষ্ঠা থেকে অন্য পৃষ্ঠায় নেভিগেট করতে পারেন ngRoute মডিউল ব্যবহার করে। এটি Single Page Application (SPA) তৈরি করার জন্য উপযুক্ত, যেখানে পৃষ্ঠা পরিবর্তন হলে পুরো পৃষ্ঠাটি রিফ্রেশ হয় না, শুধুমাত্র কনটেন্ট পরিবর্তন হয়।

1. AngularJS Routing কনফিগারেশন

AngularJS এ রাউটিং কনফিগার করতে, প্রথমে ngRoute মডিউল ইনস্টল করতে হবে এবং তারপরে $routeProvider ব্যবহার করে রাউট কনফিগার করা হয়।

1.1. ngRoute ইনস্টলেশন

npm install angular-route --save

1.2. AngularJS Routing কনফিগারেশন

// public/js/app.js
var app = angular.module('meanApp', ['ngRoute']);

// Routing কনফিগারেশন
app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutController'
    })
    .otherwise({
      redirectTo: '/home'
    });
});

এখানে, $routeProvider ব্যবহার করে আমরা দুটি রাউট কনফিগার করেছি:

• /home: হোম পৃষ্ঠার জন্য
• /about: অ্যাবাউট পৃষ্ঠার জন্য

যদি ইউজার /home বা /about রুটে প্রবেশ করে, তবে নির্দিষ্ট templateUrl (HTML ফাইল) এবং controller লোড হবে। otherwise() মেথডটি একটি ডিফল্ট রাউট সেট করে, যা ইউজার যদি ভুল রুটে প্রবেশ করে তবে সেটি /home রুটে রিডাইরেক্ট করবে।

1.3. AngularJS Controller

// public/js/controllers/home.controller.js
app.controller('HomeController', function($scope) {
  $scope.message = 'Welcome to the Home Page!';
});

// public/js/controllers/about.controller.js
app.controller('AboutController', function($scope) {
  $scope.message = 'Learn more about us on this page!';
});

এখানে দুটি কন্ট্রোলার তৈরি করা হয়েছে:

• HomeController: হোম পেজের জন্য
• AboutController: অ্যাবাউট পেজের জন্য

1.4. HTML ফাইলের কনফিগারেশন

<!-- public/index.html -->
<!DOCTYPE html>
<html ng-app="meanApp">
  <head>
    <title>MeanJS Routing Example</title>
  </head>
  <body>
    <div>
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
    <div ng-view></div> <!-- এখানে রাউটের কন্টেন্ট লোড হবে -->
  </body>
</html>

এখানে, ng-view ডিরেকটিভ ব্যবহার করা হয়েছে, যেখানে রাউটের কন্টেন্ট লোড হবে। যখন ইউজার /home বা /about রাউটে নেভিগেট করবে, তখন সেখানে নির্দিষ্ট টেমপ্লেট লোড হবে।

UI-Router: UI Routes কনফিগারেশন

UI-Router হল AngularJS এর জন্য একটি উন্নত রাউটিং লাইব্রেরি, যা ক্লায়েন্ট সাইড রাউটিং-এর আরও ফ্লেক্সিবিলিটি এবং শক্তিশালী কনফিগারেশন প্রদান করে। এর মাধ্যমে, আপনি নেস্টেড রাউট, প্যারামিটার ভিত্তিক রাউট, এবং অবস্থা ভিত্তিক রাউটিং (State-based Routing) ব্যবহার করতে পারেন।

2.1. UI-Router ইনস্টলেশন

npm install angular-ui-router --save

2.2. UI-Router কনফিগারেশন

// public/js/app.js
var app = angular.module('meanApp', ['ui.router']);

// UI-Router কনফিগারেশন
app.config(function($stateProvider, $urlRouterProvider) {

  // ডিফল্ট রাউট
  $urlRouterProvider.otherwise('/home');

  // রাউট কনফিগারেশন
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .state('about', {
      url: '/about',
      templateUrl: 'views/about.html',
      controller: 'AboutController'
    });
});

এখানে, $stateProvider ব্যবহার করে home এবং about রাউট কনফিগার করা হয়েছে। UI-Router এর মাধ্যমে, আমরা রাউটের URL এবং তার সাথে সম্পর্কিত templateUrl ও controller নির্ধারণ করেছি।

2.3. AngularJS Controller

// public/js/controllers/home.controller.js
app.controller('HomeController', function($scope) {
  $scope.message = 'Welcome to the Home Page!';
});

// public/js/controllers/about.controller.js
app.controller('AboutController', function($scope) {
  $scope.message = 'Learn more about us on this page!';
});

2.4. HTML ফাইলের কনফিগারেশন

<!-- public/index.html -->
<!DOCTYPE html>
<html ng-app="meanApp">
  <head>
    <title>MeanJS UI-Router Example</title>
  </head>
  <body>
    <div>
      <a ui-sref="home">Home</a>
      <a ui-sref="about">About</a>
    </div>
    <div ui-view></div> <!-- এখানে রাউটের কন্টেন্ট লোড হবে -->
  </body>
</html>

এখানে, ui-view ডিরেকটিভ ব্যবহার করা হয়েছে যেখানে UI-Router এর মাধ্যমে রাউটের কন্টেন্ট লোড হবে। এবং ui-sref ব্যবহার করে লিঙ্ক তৈরি করা হয়েছে যা নির্দিষ্ট রাউটের সাথে সংযুক্ত।

3. Angular Routing এবং UI-Routes ব্যবহারের পার্থক্য

সারাংশ

AngularJS Routing এবং UI-Router উভয়েরই নিজেদের মধ্যে পার্থক্য রয়েছে, তবে UI-Router বেশি ফ্লেক্সিবল এবং শক্তিশালী স্টেট-ভিত্তিক রাউটিং সিস্টেম প্রদান করে। MeanJS অ্যাপ্লিকেশনে, আপনি ngRoute বা UI-Router ব্যবহার করতে পারেন, তবে যদি আপনি উচ্চতর ফ্লেক্সিবিলিটি, নেস্টেড রাউটিং এবং শক্তিশালী স্টেট ম্যানেজমেন্ট চান, তবে UI-Router ব্যবহার করা উচিত।

এছাড়া, MeanJS স্ট্যাকের মধ্যে AngularJS এবং UI-Router এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন তৈরির সময় রাউটিং কনফিগারেশন করার প্রক্রিয়া সহজ এবং কার্যকর।