1. লিখেছেন সুদীপ্ত সাহা
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট মডিউল
মডিউল বলতে অ্যাপ্লিকেশনকে বোঝানো হয়। সকল অ্যাপ্লিকেশন কন্ট্রোলারই মডিউলের অংশ। মডিউল আপনার অ্যাপ্লিকেশনকে ভালোভাবে বুঝতে সাহায্য করে এবং একইসাথে গ্লোবাল নেমস্পেসকে সুসংগঠিত রাখে।
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট মডিউল উদাহরনঃ
এই উদাহরনে myApp.js অ্যাপ্লিকেশন মডিউল ধারন করে এবং myCtrl.js কন্ট্রোলার ধারন করেঃ
DOCTYPE html>
<html>
<head>
</head>
<body>
myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
</body>
</html>
কন্ট্রোলার গ্লোবাল নেমস্পেসকে অসংগঠিত করে তোলেঃ
এই টিউটোরিয়ালের একটি উদাহরণে গ্লোবাল ভ্যালু ব্যবহার করা হয়েছে (গ্লোবাল ভ্যারিয়েবল বা গ্লোবাল ফাংশন)।
কোন অ্যাপ্লিকেশনে গ্লোবাল ভ্যালু এরিয়ে চলা উচিৎ। গ্লোবাল ভ্যালুকে খুব সহজে অন্য কোন স্ক্রিপ্ট দ্বারা নষ্ট করা যায় অথবা ওভাররাইট করা যায়। অ্যাঙ্গুলার জাভাস্ক্রিপ্ট মডিউল দ্বারা এই সমস্যার সমাধান করা যায়।
মডিউলবিহীন কন্ট্রোলারঃ
এই উদাহরণের অ্যাপ্লিকেশনে নেম নেই এবং এর কন্ট্রোলার ফাংশন গ্লোবালঃ
DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
function myCtrl($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>
</body>
</html>
মডিউলযুক্ত কন্ট্রোলারঃ
এই উদাহরণের অ্যাপ্লিকেশনের নেম হচ্ছে ng-app=”myApp” নেই এবং এর কন্ট্রোলার মডিউলের একটি প্রপার্টিঃ
DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
একটি লাইব্রেরি কখন লোড করতে হয়?
উপরের সবগুলো উদাহরনে অ্যাঙ্গুলার জাভাস্ক্রিপ্ট লাইব্রেরি <head> এর মধ্যে লোড হয়।
HTML অ্যাপ্লিকেশনের ক্ষেত্রে সকল স্ক্রিপ্ট ফাইলগুলো <body> এর একদম নিচের দিকে লোড করা ভালো। কিন্তু বেশিরভাগ অ্যাঙ্গুলার জাভাস্ক্রিপ্টের উদাহরণে দেখা যায়, লাইব্রেরি ফাইলগুলো <head> এর মধ্যে লোড করা হয়। এর কারণ হচ্ছে, শুধুমাত্র লাইব্রেরি ফাইল লোড হওয়ার পর অ্যাঙ্গুলার মডিউল কম্পাইল করা সম্ভব। অন্য একটি সমাধান হলঃ পেজের নিজস্ব অ্যাঙ্গুলার জাভাস্ক্রিপ্ট লোড হওয়ার পূর্বে অ্যাঙ্গুলার জাভাস্ক্রিপ্ট লাইব্রেরিকে <body> এর মধ্যে লোড করানো।
DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন ফাইলঃ
মডিউল কি এবং কিভাবে কাজ করে তা আমরা এখন জানি, তাই এখন আমরা আমাদের নিজেদের অ্যাপ্লিকেশন ফাইল তৈরি করতে পারব।
একটি অ্যাপ্লিকেশনে কমপক্ষে একটি অ্যাপ্লিকেশন ফাইল এবং একটি মডিউল ফাইল থাকতে হবে।
প্রথমে “myApp.js” নামের একটি মডিউল ফাইল তৈরি করিঃ
var app = angular.module("myApp", []);
মডিউলের প্যারামিটার [] কোন ডাটার উপর নির্ভরশীল মডিউলকে নির্দেশ করে।
এরপর “myCtrl.js” নামের একটি কন্ট্রোলার ফাইল তৈরি করিঃ
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
এবং সবশেষে HTML ফাইলকে এডিট করতে হবেঃ
DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
