অ্যাংগুলার-জেএস অ্যাপ্লিকেশন
Sheikh Mahfuzur Rahman
অ্যাংগুলার-জেএস অ্যাপ্লিকেশন
আপনি পূর্বের সবগুলো টিউটোরিয়াল পড়ে থাকলে, একটি প্রকৃত অ্যাংগুলার-জেএস সিংগেল পেজ অ্যাপ্লিকেশন(SPA) তৈরির জন্য এটাই উপযুক্ত সময়!
একটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের উদাহরণ
আশা করি পূর্বের টিউটোরিয়ালগুলো পড়ে আপনি আপনার প্রথম অ্যাংগুলার-জেএস অ্যাপ্লিকেশন তৈরির জন্য যথেষ্ট কৌশল শিখে নিয়েছেনঃ
My Note
Number of characters left: 100
উদাহরণসহ অ্যাপ্লিকেশনটির ব্যাখ্যাঃ
myNoteApp">
<head>
</head>
<body>
myNoteCtrl">
<h2>My Note</h2>
<textarea ng-model="message" cols="40" rows="10">
<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
</div>
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
</body>
</html>
অ্যাপ্লিকেশন ফাইলটি হলো "myNoteApp.js":
var app = angular.module("myNoteApp", []);
কন্ট্রোলার ফাইলটি হলো "myNoteCtrl.js":
app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved");};
});
<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশন ng-app="myNoteApp" এর কন্টেইনার হিসেবে কাজ করেঃ
<html ng-app="myNoteApp">
একটি <div> এলিমেন্ট এইচটিএমএল পেজে কন্ট্রোলার ng-controller="myNoteCtrl" এর স্কোপ হিসেবে কাজ করেঃ
<div ng-controller="myNoteCtrl">
একটি ng-model ডিরেক্টিভ একটি <textarea> কে কন্ট্রোলার ভ্যারিয়েবল ম্যাসেজে বাইন্ড করেঃ
<textarea ng-model="message" cols="40" rows="10"></textarea>
ng-click ইভেন্ট দু'টি কন্ট্রোলার ফাংশন clear() এবং clear() কে ইনভোক বা আহবান করেঃ
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
একটি ng-bind ডিরেক্টিভ বাকি থাকা ক্যারেকটারগুলো দেখিয়ে কন্ট্রোলার ফাংশন left() কে <span> তে বাইন্ড করেঃ
Number of characters left: <span ng-bind="left()"></span>
পেজে অ্যাপনার অ্যাপ্লিকেশন লাইব্রেরিকে যোগ করা হয়েছে (লাইব্রেরির পরে):
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের কাঠামো
উপরে ব্যবহার উপযোগী একটি বাস্তব অ্যাংগুলার-জেএস (single page application অর্থাৎ SPA) এর কাঠামো দেয়া হয়েছে।
<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের (ng-app=) কন্টেইনার।
<div> এলিমেন্টটি একটি অ্যাংগুলার-জেএস কন্ট্রোলারের (ng-controller=) স্কোপ ঠিক করে দেয়।
একটি অ্যাপ্লিকেশনে অনেকগুলো কন্ট্রোলার ব্যবহার করতে পারবেন।
একটি অ্যাপ্লিকেশন ফাইল (my...App.js) অ্যাপ্লিকেশন মড্যুল কোড নির্ধারণ করে।
এক বা একাধিক কন্ট্রোলার ফাইল (my...Ctrl.js) কন্ট্রোলার কোড নির্ধারণ করে।
পুরো প্রক্রিয়াটির সারাংশ?
অ্যাংগুলার-জেএস লাইব্রেরিটি <head> এ লোড হয়, কারন সঠিকভাবে কম্পাইলড হওয়ার জন্য স্ক্রিপ্টগুলো লাইব্রেরি কোডের উপর নির্ভর করে।
ng-app ডিরেক্টিভটি অ্যাপ্লিশনের রুট এলিমেন্টে রাখা হয়।
সিংগেল পেজ অ্যাপ্লিকেশনের(SPA) জন্য <html> এলিমেন্টটিই অধিকাংশ সময় অ্যাপ্লিকেশন রুট হয়ে থাকে।
এক বা একাধিক ng-controller ডিরেক্টিভ অ্যাপ্লিকেশন কন্ট্রোলার নির্ধারণ করে দেয়। প্রত্যেকটি কন্ট্রোলারের নিজস্ব স্কোপ (যে এইচটিএমএল এলিমেন্টে সেগুলো ডিফাইন করা হয়েছে) রয়েছে।
HTML DOMContentLoaded ইভেন্টে অ্যাংগুলার-জেএস সয়ংক্রিয়ভাবে সচল হয়ে যায়। যদি একটি ng-app ডিরেক্টিভ পাওয়া যায় অ্যাংগুলার-জেএস ঐ ডিরেক্টিভে উল্লেখিত (নেমড) যেকোন মড্যুলকে লোড করবে এবং DOM কে ng-app দিয়ে অ্যাপ্লিকেশনের রুট হিসেবে কম্পাইল করবে।
পুরো পেজটিই অ্যাপ্লিকেশনের রুট হতে পারে; অথবা এর ক্ষুদ্রতর অংশও হতে পারে। পেজের অংশটি যত ক্ষুদ্র হবে অ্যাপ্লিকেশনটি তত দ্রুত কম্পাইল ও অ্যাকজিকিউট করবে।
