অ্যাঙুলারজেএস মডিউল - AngularJS modiule
AngularJS মডিউল(modiule) এপ্লিকেশনকে সংজ্ঞায়িত করে।
মডিউল(modiule) হচ্ছে এপ্লিকেশনের বিভিন্ন অংশের পাত্র।
মডিউল(modiule) হচ্ছে এপ্লিকেশন Controller এর পাত্র।
কন্ট্রোলার(Controller) সবসময় মডিউল(modiule) এর অন্তর্ভুক্ত হয়।
মডিউল(modiule) তৈরি
AngularJS ফাংশন angular.module() ব্যবহার করে মডিউল(modiule) তৈরি করা হয়।
AngularJS Module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
উপরের কোডে angular.module() ফাংশনে "myApp" প্যারামিটার দ্বারা ঐ এইচটিএমএল এলিমেন্টকে নির্দেশ করে যেখানে এপ্লিকেশন রান করবে।
এখন আপনি AngularJS এপ্লিকেশনে কন্ট্রোলার(controller), ডিরেক্টিভ(directive), ফিল্টার(filter) এবং আরো অনেক কিছু যোগ করতে পারবেন।
কন্ট্রোলার(Controller) যোগ করা
আপনার এপ্লিকেশনে কন্ট্রোলার যোগ করে, কন্ট্রোলার(controller) কে ng-controller() ডিরেক্টিভের কাছে রেফার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ fName + " " + age }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.fName = "Tamim";
$scope.age = "20";
});
</script>
</body>
</html>
ফলাফল
পরবর্তী অধ্যায়ে কন্ট্রোলার(controller) সম্মন্ধে বিস্তারিত আলোচনা করা হয়েছে।
ডিরেক্টিভ(Directive) যোগ করা
AngularJS এর নিজস্ব অনেক ডিরেক্টিভ(Directive) আছে যেগুলোকে আপনি আপনার এপ্লিকেশনে বিভিন্ন কাজের জন্য ব্যবহার করতে পারেন।
AngularJS এর সম্পূর্ণ রেফারেন্সের জন্য আমাদের ডিরেক্টিভ রেফারেন্স পেজটি ভিজিট করে আসুন।
নিজস্ব ডিরেক্টিভ ছাড়াও angular.module() ফাংশন ব্যবহার করে নিজের মত করে ডিরেক্টিভ তৈরি করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "ডিরেক্টিভ constractor"
};
});
</script>
</body>
</html>
ফলাফল
পরবর্তী অধ্যায়ে ডিরেকটিভ(directive) সম্মন্ধে বিস্তারিত আলোচনা করা হয়েছে।
আলাদা ফাইলে মডিউল(modiule)এবং কন্ট্রোলার(Controller)
AngularJS এপ্লিকেশনে মডিউল(modiule)এবং কন্ট্রোলার(Controller) কে সাধারণত জাভাস্ক্রিপ্ট ফাইলের মধ্যে রাখা হয়।
নিচের উদাহরণে, "myApp.js" জাভাস্ক্রিপ্ট ফাইলে মডিউল এর মাধ্যমে এপ্লিকেশনকে সংজ্ঞায়িত করা হয়েছে এবং "myCtrl.js" এর মধ্যে এপ্লিকেশনের কন্ট্রোলার(controller) রাখা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ fName + " " + age }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
ফলাফল
myApp.js
var app = angular.module("myApp", []);
ডিপেন্ডেন্ট মডিউল(dependent module) সংজ্ঞায়িত করার জন্য angular.module() ফাংশনের মধ্যে [] প্যারমিটার ব্যবহার করা হয়েছে।
[] প্যারামিটার ব্যবহার না করে নতুন মডিউল(module) তৈরি করা যায় না। কিন্তু বিদ্যমান মডিউল(module) কে পূনরুদ্ধার(retrive) করা যায়।
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.fName = "Tamim";
$scope.age= "20";
});
ফাংশন গ্লোবাল নেমস্পেস(Global Namespace) কে দূষিত করতে পারে।
জাভাস্ক্রিপ্টে গ্লোবাল ফাংশনের ব্যবহার এড়িয়ে চলা উচিৎ। কেননা এগুলোকে খুব সহজেই অন্য কোনো স্ক্রিপ্ট ওভাররাইট বা ধংস করতে পারে।
AngularJS মডিউলে(module) সকল ফাংশন লোকাল হওয়ায় এই সমস্যা থেকে আমরা পরিত্রাণ পাই।
AngularJS লাইব্রেরী কখন লোড করবো?
আমরা সাধারণত জাভাস্ক্রিপ্ট ফাইলকে <body> এলিমেন্টের শেষে রাখি।
কিন্তু AngularJS লাইব্রেরিকে হয় <head> ট্যাগের মধ্যে অথবা <body> ট্যাগের শুরুতে রাখার জন্য সুপারিশ করবো।
কেননা AngularJS লাইব্রেরি সম্পূর্ণ লোড না হওয়া পর্যন্ত angular.moduleকে কল করলে এর ভেতরের কোডগুলো ঠিকমত কম্পাইল হয় না।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ fName + " " + age }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.fName = "Tamim";
$scope.age = "20";
});
</script>
</body>
</html>
ফলাফল