AngularJS: একটি অসাধারণ জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক

AngularJS হচ্ছে সিঙ্গেল পেইজ ওয়েব এপ্লিকেশন তৈরি করার জন্য জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। এখনকার প্রায় ওয়েব পেইজেই AngularJS ব্যবহার করা হয়। এছাড়া ionic নামে একটি অসাধারণ মোবাইল অ্যাপলিকেশন ফ্রেমওয়ার্ক রয়েছে। যা দিয়ে অ্যাঙ্গুলার জেএস ব্যবহার করে অ্যাপ তৈরি করা যায়। AngularJS জানতে পারলে দারুণ কিছু করে ফেলা সম্ভব। মার্কেটপ্লেসেও দারুণ সব জব পোস্ট রয়েছে AngularJS এর উপর। শিখতেও দারুণ লাগার কথা।

আমরা যখন একটা ওয়েব পেইজ লোড করি, তা সব কিছু এক সাথে লোড করে, তারপর আমাদের দেখায়। একটি পেইজে অনেক গুলো কন্টেন্ট থাকলে অনেক ব্যান্ডউইথ নষ্ট হয়, সময় লাগে লোড হতে ইত্যাদি ইত্যাদি। তো এসব সমস্যার সমাধান হচ্ছে মিনিমাল যা যা দরকার তা লোড করা। তারপর ইউজার যে অংশ দেখতে চায়, সে অনুযায়ী লোড করা। আর এটা করার জন্য দরকার Data Binding, MVC, Routing ইত্যাদি ইত্যাদি। আর এসব করার জন্যই অ্যাঙ্গুলার জেএস।

পিএইচপিতে আমরা যখন কোড লিখি, তখন হেডারের ডেটা গুলো আলাদা ফাইলে রেখে মেইন ফাইলে কল করতে পারি। ফুটারের ডেটা গুলো আলাদা ফাইলে রেখে কল করি মেইন ফাইলে। এতে কি হয়, আমাদের যদি হেডারের কোন কিছু পরিবর্তন করতে হয়, আমরা শুধু হেডার ফাইলেই পরিবর্তন করি। তাহলে যদি আমাদের ১০০টি পেইজ ও থাকে, আমাদের শুধু হেডারফাইল এডিট করলেই সব গুলো ফাইল এক সাথে এডিট হয়ে যায়। এইচটিএমএল এ এই সুবিধে নেই। আমাদের ১০০টি এইচটিএমএল ফাইল থাকলে যদি হেডারে কিছু পরিবর্তন করতে চাই, আমাদের সব গুলো ফাইলেই পরিবর্তন করতে হয়। আর এঙ্গুলার জেএস দিয়ে এইচটিএমএল এর এই সমস্যা আমরা সল্ভ করতে পারি। হেডারের কন্টেন্ট আলাদা, ফুটারের কন্টেন্ট আলাদা, সাইডবারের কন্টেন্ট আলাদা রেখে আমরা পরে মেইন ইনডেক্স ফাইল থেকে সেগুলোকে কল করতে পারি। এসব কিভাবে করা যায় আমরা দেখব।

সাধারণ একটা এইচটিএমএল Hello world! ফাইল হচ্ছে এমনঃ
আউটপুট এখানে দেখা যাবে। 

 

সাধারণ এইচটিএমএল পেইজকে আমরা একটু ডাইনামিক করতে চাই। যেমন যে এইচটিএমএল পেইজকে লোড করবে, ইনপুট থেকে তার নাম রিড করে তাকে হ্যালো জানাবো। তার জন্য জানা দরকার জাভাস্ক্রিপ্ট। যেমন জেকোয়েরী ব্যবহার করে আমরা করতে পারি এভাবেঃ  

আউটপুট এখানে দেখতে পারেন। 

অনেক গুলো কোড লিখতে হয়েছে।

আর একই জিনিস এঙ্গুলারে করতে চাইলেঃ
আউটপুট এখানে দেখা যাবে।  

 

অনেক সিম্পল! এঙ্গুলার আমাদের প্রজেক্টে ব্যবহার করার জন্য অন্যন্য স্ক্রিপ্ট এর মতই যুক্ত করতে হবে। তাই করেছি। ইউজার থেকে তার নাম নেওয়ার জন্য একটা ইনপুট ট্যাগ যুক্ত করেছি। ইনপুট ট্যাগে বাড়তি হিসেবে যুক্ত করেছি ng-model=”yourName”। এখানে ng-model হচ্ছে Directives। আমরা আরেকটি Directives ও যুক্ত করেছি, html ট্যাগের সাথে। ng-app, এটা দিয়ে বলছি এ পুরো অংশটা একটা এঙ্গুলার অ্যাপ, যেখানে এঙ্গুলার এক্টিভ করতে। ডিরেক্টিভস হচ্ছে কিছু কমান্ড, যা আমরা আমাদের এইচটিএমএল এ বসাই। যেমন ng-model, ng-app ইত্যাদি। এমন অনেক গুলো ডিরেক্টিভ রয়েছে। সব গুলোই ng- দিয়ে শুরু হয়। সব গুলো পাওয়া যাবে এখানে উদাহরণ সহ। এখন আমরা চাচ্ছি ইনপুটে যে লেখা হচ্ছে, লেখার সাথে সাথেই আমরা তা এইচটিএমএল এ দেখাতে, এটাকে বলে ডেটা বাইন্ডিং। তার জন্যঃ {{ yourName}} দিয়ে আমরা তা করেছি। যখন আমরা ইনপুটে কিছু লিখছি, তা সাথে সাথেই আপডেট হচ্ছে।

 

আরেকটা উদাহরণ দেখি। ইটারেশন/লুপ নিয়ে।

 

কোডগুলোর আউটপুট দেখা যাবে এখানে।

এখানে ng-init ডিরেক্টিভ দিয়ে আমরা animals নামে একটা অ্যারেতে কিছু প্রাণীর নাম রেখেছি। যাকে বলে ইনিশিয়েট করা। এ ডেটা গুলো যদিও রিয়েল প্রজেক্টে যে কোন জায়গা থেকে নিতে পারি, যেমন ডেটাবেজ বা এক্সটারনাল কোন ফাইল। তো যখন আমরা এ প্রাণী গুলো লিস্ট দেখাবো, তখন বার বার li ট্যাগ না লিখে ইটারেশনের মাধ্যমেই আমরা লিখতে পারিঃ

এখানে ng-repeat ডিরেক্টিভ দিয়ে ইটারেশন চালিয়েছি আমরা। animals নামক অ্যারের প্রতিটা প্রাণীর নামের জন্য ইয়াটারেশন চলবে।আমাদের চারটা প্রাণীর নাম রয়েছে, তাই চারবার ইটারেশন চলবে। name in animals মানে হচ্ছে প্রথমবার প্রথম প্রাণীর নাম name এ রাখবে, তারপর {{ name }} দিয়ে তা ডেটা বাইন্ড বা এইচটিএমএল এ দেখাবে। দ্বিতীয়বার দ্বিতীয় প্রাণীর নাম এভাবে চারটা।

 

ফিল্টারিংঃ

উপরের উদারহণটি আরেকটু আপডেট করতে পারি, যেমন একটা ইনপুট ফিল্ড যুক্ত করতে পারি। এবং আমাদের এ প্রাণীর নাম গুলো ফিল্টার করতে পারি। মানে যখন কেউ ইনপুটে কোন নাম ইনপুট দিবে, সাথে সাথে আমাদের প্রাণীর লিস্ট ফিল্টার হবেঃ

কোডগুলোর আউটপুট দেখা যাবে এখানে।

আমরা উপরে শুধু মাত্র একটা ইনপুট ফিল্ড যুক্ত করেছি। এবং ng-repeat ডিরেক্টিভ এ | filter:search । orderBy:’name’ যুক্ত করেছি। filter:search এ search হচ্ছে ইনপুট ফিল্ডে যুক্ত করে দেওয়া মডেলের নাম হচ্ছে search। এবং orderBy:’name’ মানে হচ্ছে name অনুযায়ী ডেটা অর্ডার হবে। অনেক সিমপ্লি অনেক কাজ করে ফেলা যায় তাই না?

এঙ্গুলারে MVC প্যাটার্ন আমরা ব্যবহার করতে পারি। MVC সম্পপুর্ণরূপ হচ্ছে Model View Controlar. মডেল হচ্ছে আমাদের ডেটা। ডেটা যে কোন জায়গা থেকে আসতে পারে, যেমন এইচটিএমএল এ স্ট্যাটিক ডেটা, ডেটাবেজ অথবা JSON। ভিউ হচ্ছে এইচটিএমএল ফাইলে আমরা যেভাবে ডেটা গুলো দেখাবো তা, যা টেম্পলেট ব্যবহার করে দেখানো হয়। কন্ট্রোলার হচ্ছে জাভাস্ক্রিপ্ট, যা দিয়ে ডেটা কন্ট্রোল করব যা ডেটা এবং ভিউ এর মধ্যে সমন্বয় করে।। এগুলো নিয়ে বিস্তারিত আরো দুই একটা লেখা লিখব আশা করি।

ইন্টারনেটে অনেক গুলো সুন্দর সুন্দর টিউটোরিয়াল রয়েছে AngularJS এর উপর। একটু সার্চ করলেই পাওয়া যাবে।

Dan Wahlin এর ইউটিউব চ্যানেলে অ্যাঙ্গুলার জেএস সম্পর্কে অনেক গুলো ভিডিও টিউটোরিয়াল রয়েছে। সেগুলো দেখে বিস্তারিত অনেক কিছু জানা যাবে।