AngularJS মডিউল

অ্যাংগুলারজস মডিউল একটি অ্যাপ্লিকেশন নির্দিষ্ট করে

মডিউল হল অ্যাপ্লিকেশনের ভিন্ন অংশগুলির কনটেনার

মডিউল হল অ্যাপ্লিকেশন কন্ট্রোলারের কনটেনার

কন্ট্রোলার একটি মডিউলের অংশ।

মডিউল তৈরি করুন

অ্যাংগুলারজস ফাংশন ব্যবহার করেangular.module একটি মডিউল তৈরি করুন:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" পারামিটার এটা ইঙ্গিত করে যে অ্যাপ্লিকেশন HTML ইলিমেন্টের মধ্যে চালানো হবে

এখন, আপনি অ্যাংগুলারজেস অ্যাপ্লিকেশনে কন্ট্রোলার, ইনডিক্টিভ, ফিল্টার ইত্যাদি যোগ করতে পারবেন

কন্ট্রোলার যোগ করা

একটি কন্ট্রোলার আপনার অ্যাপ্লিকেশনে যোগ করুন এবং ng-controller ইনডিক্টিভ কন্ট্রোলারকে উল্লেখ করে

এর

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

আপনার হাতে পরীক্ষা করুন

আপনি এই টিউটোরিয়ালের পরবর্তী অংশে কন্ট্রোলার নিয়ে আরও বিস্তারিত জানতে পারবেন

ইনডিক্টিভ যোগ করা

অ্যাংগুলারজেস একটি সেট বিন্দুইন্ড ইনডিক্টিভ রাখে, যা আপনি এক্সকুয়াস এপ্লিকেশনে কাজে লাগাতে পারেন

পূর্ণ পরামর্শ পাওয়ার জন্য, আমাদের অ্যাংগুলারজেস ইনডিক্টিভ পরামর্শ দেখুন

এছাড়া, আপনি একটি নিজস্ব ইনডিক্টিভ আপনার অ্যাপ্লিকেশনে যোগ করতে মডিউল ব্যবহার করতে পারেন

এর

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

আপনার হাতে পরীক্ষা করুন

আপনি এই টিউটোরিয়ালের পরবর্তী অংশে ইনডিক্টিভ নিয়ে আরও বিস্তারিত জানতে পারবেন

ফাইলে

অ্যাংগুলারজেস অ্যাপ্লিকেশনে মডিউল ও কন্ট্রোলারকে জেভাস্ক্রিপ্ট ফাইলে রাখা হয়

এই উদাহরণে, "myApp.js" অ্যাপ্লিকেশন মডিউল নির্দিষ্টকরণ ধারণ করে

এর

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

আপনার হাতে পরীক্ষা করুন

myApp.js

var app = angular.module("myApp", []);

মডিউল নির্দিষ্টকরণের [] পারামিটার ব্যবহার করা যায় প্রত্যক্ষ নির্ভর মডিউল নির্দিষ্ট করতে

যদি [] পারামিটার না থাকে, তবে আপনি একটি নতুন মডিউল তৈরি করছেন না, বরং একটি সম্বন্ধিত মডিউল সংগ্রহ করছেন

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

ফাংশন গ্লোবাল নেমস্পেসে পরিচ্ছন্ন করতে পারে

জেভাস্ক্রিপ্টে সার্ভিক্যাল ফাংশনকে ব্যবহার করা না দেওয়া ভালো

অ্যাংগুলারজেস মডিউল এই সমস্যাটিকে কমাতে সকল ফাংশনকে মডিউল লোকালে রাখে

কোথায় লাইব্রেরী লোড করা

তবে, এটা সুপারিশ করা হয় যে আপনি এটা HTML অ্যাপ্লিকেশনে স্ক্রিপ্ট লোড করতে প্রয়োজন <body> এলিমেন্টের শেষে এটা বেশি দেখা যায় <head> বা <body> সূত্রের শুরুতে অ্যাংগুলারজেস লাইব্রেরী লোড করা

এটা কারণ এটা হলো যেহেতু লাইব্রেরি লোড হওয়ার পরই এটা কম্পাইল করা যায় angular.module ব্যবহার হল

এর

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

আপনার হাতে পরীক্ষা করুন