AngularJS मॉड्यूल
- पिछला पृष्ठ AngularJS एक्सप्रेशन
- अगला पृष्ठ AngularJS इन्स्ट्रक्शन
AngularJS मॉड्यूल एक अनुप्रयोग को परिभाषित करता है。
मॉड्यूल अनुप्रयोग के विभिन्न हिस्सों का कंटेनर है。
मॉड्यूल एक अनुप्रयोग कंट्रोलर का कंटेनर है。
कंट्रोलर हमेशा किसी मॉड्यूल के अंदर होते हैं。
मॉड्यूल बनाएं
AngularJS फ़ंक्शन का उपयोग करकेangular.module एक मॉड्यूल बनाएं:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" पैरामीटर एप्लिकेशन को जहां चलाना है का संदर्भ देता है。
अब, आप 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 = "Bill";
$scope.lastName = "Gates";
});
</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>
आप इस ट्यूटोरियल के अंतिम भाग में निर्देश के बारे में अधिक जानेंगे。
फ़ाइल में मॉड्यूल और कंट्रोलर
AngularJS एप्लिकेशन में, मॉड्यूल और कंट्रोलर को जेस्क्रिप्ट फ़ाइल में रखना बहुत आम है。
इस उदाहरण में, "myApp.js" एप्लिकेशन मॉड्यूल परिभाषा को शामिल करता है और "myCtrl.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";
});
फ़ंक्शन ग्लोबल नामस्पेस को प्रदूषित कर सकते हैं
जेसक्रिप्ट में वैश्विक फ़ंक्शन का इस्तेमाल करने से बचिए। वे बहुत आसानी से अन्य स्क्रिप्ट द्वारा ओवरराइड या नुकसान के कारण जा सकते हैं。
AngularJS मॉड्यूल इस समस्या को कम करने के लिए सभी फ़ंक्शन को मॉड्यूल स्थानीय में रखकर बचाते हैं。
कब लाइब्रेरी लोड करना है
वैसे ही HTML एप्लिकेशन में स्क्रिप्ट को <body> एलिमेंट के अंत में बहुत आम है, लेकिन आपको सुझाव है कि आप इसे <head> या <body> शुरूआत में AngularJS लाइब्रेरी लोड करें。
इसकी वजह यह है कि केवल लाइब्रेरी लोड होने के बाद ही उसका 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>
- पिछला पृष्ठ AngularJS एक्सप्रेशन
- अगला पृष्ठ AngularJS इन्स्ट्रक्शन
