एंगुलरजेएस मॉड्यूल
एक AngularJS मॉड्यूल एक एप्लिकेशन को परिभाषित करता है।
मॉड्यूल एक अनुप्रयोग के विभिन्न भागों के लिए एक कंटेनर है।
मॉड्यूल एप्लिकेशन नियंत्रकों के लिए एक कंटेनर है।
नियंत्रक हमेशा एक मॉड्यूल से संबंधित होते हैं।
एक मॉड्यूल बनाना
AngularJS फ़ंक्शन का उपयोग करके एक मॉड्यूल बनाया गया है angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"MyApp" पैरामीटर एक HTML तत्व को संदर्भित करता है जिसमें एप्लिकेशन चलेगा।
अब आप अपने AngularJS एप्लिकेशन में नियंत्रक, निर्देश, फ़िल्टर और बहुत कुछ जोड़ सकते हैं।
एक नियंत्रक जोड़ना
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
= "John";
$scope.lastName
= "Doe";
});
</script>
आप इस ट्यूटोरियल में बाद में नियंत्रकों के बारे में और जानेंगे।
एक निर्देश जोड़ना
AngularJS में अंतर्निहित निर्देशों का एक सेट है जिसका उपयोग आप अपने एप्लिकेशन में कार्यक्षमता जोड़ने के लिए कर सकते हैं।
पूर्ण संदर्भ के लिए, हमारे AngularJS निर्देश संदर्भ पर जाएं ।
इसके अलावा आप अपने अनुप्रयोगों में अपने निर्देश जोड़ने के लिए मॉड्यूल का उपयोग कर सकते हैं:
उदाहरण
<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" में एक एप्लिकेशन मॉड्यूल परिभाषा है, जबकि "myCtrl.js" में नियंत्रक है:
उदाहरण
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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 = "John";
$scope.lastName= "Doe";
});
फ़ंक्शंस ग्लोबल नेमस्पेस को प्रदूषित कर सकते हैं
जावास्क्रिप्ट में वैश्विक कार्यों से बचा जाना चाहिए। उन्हें अन्य लिपियों द्वारा आसानी से अधिलेखित या नष्ट किया जा सकता है।
AngularJS मॉड्यूल सभी कार्यों को मॉड्यूल में स्थानीय रखकर, इस समस्या को कम करता है।
पुस्तकालय को कब लोड करना है
जबकि HTML अनुप्रयोगों में तत्व के अंत में स्क्रिप्ट रखना आम बात है
<body>, यह अनुशंसा की जाती है कि आप AngularJS लाइब्रेरी को या <head>तो <body>.
ऐसा इसलिए है क्योंकि लाइब्रेरी लोड होने के बाद ही कॉल को angular.moduleसंकलित किया जा सकता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>