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 টেমপ্লেট, এবং স্টাইলের সমন্বয়ে তৈরি হয়।
কম্পোনেন্টের গঠন:
- ক্লাস: এটি কম্পোনেন্টের লজিক বা ডেটা ধারণ করে।
- টেমপ্লেট: এটি HTML কোডের অংশ, যা কম্পোনেন্টের UI তৈরি করে।
- স্টাইল: 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 অ্যাপ্লিকেশনকে আরও কার্যকরী, ডাইনামিক এবং সিস্টেমেটিকভাবে সংগঠিত করে তোলে, যা উন্নত পারফরমেন্স এবং ভালো ব্যবহারকারী অভিজ্ঞতা প্রদান করে।
Read more
