AngularJS मॉड्यूल
जेम्स हार्टमैन
एंगुलरजेएस मॉड्यूल क्या है?
मॉड्यूल उस एप्लिकेशन कार्यक्षमता को परिभाषित करता है जिसे ng-app निर्देश का उपयोग करके पूरे HTML पृष्ठ पर लागू किया जाता है। यह सेवाओं, निर्देशों और फ़िल्टर जैसी कार्यक्षमता को इस तरह से परिभाषित करता है कि इसे विभिन्न अनुप्रयोगों में पुनः उपयोग करना आसान हो जाता है।
हमारे सभी पिछले ट्यूटोरियल में, आपने अपने मुख्य Angular एप्लिकेशन को परिभाषित करने के लिए इस्तेमाल किए जाने वाले ng-app निर्देश को देखा होगा। यह Angular.JS में मॉड्यूल की प्रमुख अवधारणाओं में से एक है।
AngularJS में मॉड्यूल कैसे बनाएं
इससे पहले कि हम जानें कि मॉड्यूल क्या है, आइए मॉड्यूल रहित AngularJS एप्लिकेशन का एक उदाहरण देखें और फिर अपने एप्लिकेशन में मॉड्यूल रखने की आवश्यकता को समझें।
आइये एक फ़ाइल बनाने पर विचार करें जिसका नाम है “डेमोकंट्रोलर.js” और फ़ाइल में नीचे दिया गया कोड जोड़ें
Function Democontroller($scope) {
$scope.a=1;
$scope.b=2;
$scope.c=$scope.b + $scope.a;
});
उपरोक्त कोड में, हमने “DemoController” नामक एक फ़ंक्शन बनाया है जो हमारे एप्लिकेशन के भीतर नियंत्रक के रूप में कार्य करेगा।
इस नियंत्रक में, हम केवल 2 चरों a और b को जोड़ रहे हैं और इन चरों को एक नए चर c में जोड़ रहे हैं, और इसे स्कोप ऑब्जेक्ट में वापस असाइन कर रहे हैं।
अब चलिए अपना मुख्य Sample.html बनाते हैं, जो हमारा मुख्य एप्लीकेशन होगा। चलिए नीचे दिए गए कोड स्निपेट को अपने HTML पेज में डालते हैं।
<body ng-app="">
<div ng-controller="DemoController">
<h3> Guru99 Global Event</h3>
{{c}}
उपरोक्त कोड में, हम अपने DemoController को शामिल कर रहे हैं और फिर एक अभिव्यक्ति के माध्यम से $scope.c चर के मान को लागू कर रहे हैं।
लेकिन हमारे ng-app निर्देश पर ध्यान दें, इसका मान रिक्त है।
- इसका मूल रूप से मतलब है कि ng-app निर्देश के संदर्भ में बुलाए जाने वाले सभी नियंत्रकों को वैश्विक रूप से एक्सेस किया जा सकता है। ऐसी कोई सीमा नहीं है जो कई नियंत्रकों को एक दूसरे से अलग करती हो।
- अब आधुनिक प्रोग्रामिंग में, नियंत्रकों को किसी भी मॉड्यूल से न जोड़ना और उन्हें वैश्विक रूप से सुलभ बनाना एक बुरा अभ्यास है। नियंत्रकों के लिए कुछ तार्किक सीमा निर्धारित की जानी चाहिए।
और यहीं पर मॉड्यूल काम आते हैं। मॉड्यूल का उपयोग सीमाओं को अलग करने और कार्यक्षमता के आधार पर नियंत्रकों को अलग करने में सहायता के लिए किया जाता है।
आइए मॉड्यूल को लागू करने के लिए ऊपर दिए गए कोड को बदलें और हमारे नियंत्रक को इस मॉड्यूल से जोड़ें
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
$scope.a=1;
$scope.b=2;
$scope.c=$scope.b + $scope.a;
});
आइये ऊपर लिखे कोड में मुख्य अंतरों पर ध्यान दें
-
var sampleApp = angular.module('sampleApp',[]);हम विशेष रूप से 'sampleApp' नामक एक AngularJS मॉड्यूल बना रहे हैं। यह उस कार्यक्षमता के लिए एक तार्किक सीमा बनाएगा जो इस मॉड्यूल में होगी। इसलिए हमारे ऊपर दिए गए उदाहरण में, हमारे पास एक मॉड्यूल है जिसमें एक नियंत्रक है जो 2 स्कोप ऑब्जेक्ट्स को जोड़ने की भूमिका निभाता है। इसलिए, हमारे पास एक मॉड्यूल हो सकता है जिसकी तार्किक सीमा यह कहती है कि यह मॉड्यूल केवल एप्लिकेशन के लिए गणितीय गणनाओं की कार्यक्षमता का प्रदर्शन करेगा।
-
sampleApp.controller('DemoController', function($scope)अब हम कंट्रोलर को अपने AngularJS मॉड्यूल “SampleApp” से जोड़ रहे हैं। इसका मतलब यह है कि अगर हम अपने मुख्य HTML कोड में मॉड्यूल ‘sampleApp’ का संदर्भ नहीं देते हैं, तो हम अपने कंट्रोलर की कार्यक्षमता को संदर्भित नहीं कर पाएंगे।
हमारा मुख्य HTML कोड नीचे दिखाए अनुसार नहीं दिखेगा
<body ng-app="'sampleApp'">
<div ng-controller="DemoController">
<h3> Guru99 Global Event</h3>
{{c}}
आइये ऊपर लिखे कोड और हमारे पिछले कोड में मुख्य अंतरों पर ध्यान दें
<body ng-app="'sampleApp'">
हमारे शरीर टैग में,
- रिक्त ng-app निर्देश के स्थान पर, अब हम मॉड्यूल sampleApp को कॉल कर रहे हैं।
- इस एप्लिकेशन मॉड्यूल को कॉल करके, हम अब नियंत्रक 'डेमोकंट्रोलर' और डेमो नियंत्रक में मौजूद कार्यक्षमता तक पहुंच सकते हैं।
AngularJS में मॉड्यूल और नियंत्रक
In एंगुलर.जेएसविकास के लिए उपयोग किया जाने वाला पैटर्नping आधुनिक वेब अनुप्रयोगों में कई मॉड्यूल और नियंत्रक बनाकर कार्यक्षमता के विभिन्न स्तरों को तार्किक रूप से अलग किया जाता है।
सामान्यतः मॉड्यूल अलग-अलग स्थानों पर संग्रहित किए जाएंगे। Javascript फ़ाइलें, जो मुख्य अनुप्रयोग फ़ाइल से भिन्न होंगी.
आइये एक उदाहरण देखें कि यह कैसे हासिल किया जा सकता है।
नीचे दिए गए उदाहरण में,
- हम Utilities.js नाम की एक फ़ाइल बनाएंगे जिसमें 2 मॉड्यूल होंगे, एक जोड़ का कार्य करने के लिए और दूसरा घटाव का कार्य करने के लिए।traction।
- इसके बाद हम दो अलग-अलग एप्लिकेशन फ़ाइलें बनाएंगे और प्रत्येक एप्लिकेशन फ़ाइल से यूटिलिटी फ़ाइल तक पहुंचेंगे।
- एक एप्लिकेशन फ़ाइल में हम जोड़ के मॉड्यूल का उपयोग करेंगे और दूसरी में हम घटाव के मॉड्यूल का उपयोग करेंगे।traction।
चरण 1) एकाधिक मॉड्यूल और नियंत्रकों के लिए कोड परिभाषित करें।
var AdditionApp = angular.module('AdditionApp',[]);
AdditionApp.controller('DemoAddController', function($scope) {
$scope.a=5;
$scope.b=6;
$scope.c=$scope.a + $scope.b;
});
var SubractionApp = angular.module('SubtractionApp',[]);
SubractionApp.controller('DemoSubtractController', function($scope) {
$scope.a=8;
$scope.b=6;
$scope.d=$scope.a - $scope.b;
});
आइये ऊपर लिखे कोड के मुख्य बिंदुओं पर ध्यान दें
-
var AdditionApp = angular.module('AdditionApp',[]); var SubractionApp = angular.module('SubtractionApp',[]);दो अलग-अलग एंगुलर मॉड्यूल बनाए गए हैं, जिनमें से एक का नाम 'AdditionApp' और दूसरे का नाम 'Sub' रखा गया है।tractionApp'.
-
AdditionApp.controller('DemoAddController', function($scope) SubractionApp.controller('DemoSubtractController', function($scope)प्रत्येक मॉड्यूल के लिए 2 अलग-अलग नियंत्रक परिभाषित किए गए हैं, एक को DemoAddController और दूसरे को DemoSub कहा जाता है।tracप्रत्येक कंट्रोलर में जोड़ और घटाव के लिए अलग-अलग लॉजिक होते हैं।tracसंख्याओं का संयोजन।
चरण 2) अपनी मुख्य एप्लिकेशन फ़ाइलें बनाएँ। चलिए ApplicationAddition.html नामक फ़ाइल बनाएँ और नीचे दिया गया कोड जोड़ें
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Addition</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
Addition :{{c}}
</div>
</body>
</html>
आइये ऊपर लिखे कोड के मुख्य बिंदुओं पर ध्यान दें
-
<script src="/lib/Utilities.js"></script>
हम अपनी मुख्य एप्लिकेशन फ़ाइल में अपनी Utilities.js फ़ाइल को संदर्भित कर रहे हैं। यह हमें इस फ़ाइल में परिभाषित किसी भी AngularJS मॉड्यूल को संदर्भित करने की अनुमति देता है।
-
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
हम ng-app निर्देश और का उपयोग करके 'AdditionApp' मॉड्यूल और DemoAddController तक पहुँच रहे हैं एनजी नियंत्रक क्रमशः.
-
{{c}}चूँकि हम ऊपर बताए गए मॉड्यूल और कंट्रोलर को संदर्भित कर रहे हैं, इसलिए हम $scope.c वैरिएबल को एक्सप्रेशन के माध्यम से संदर्भित करने में सक्षम हैं। यह एक्सप्रेशन 2 स्कोप वैरिएबल a और b को जोड़ने का परिणाम होगा जिसे 'DemoAddController' कंट्रोलर में किया गया था।
हम सब के लिए भी यही तरीका अपनाएंगे।tracकार्य क्रिया।
चरण 3) अपनी मुख्य एप्लिकेशन फ़ाइलें बनाएँ। आइए "ApplicationSub" नाम की एक फ़ाइल बनाते हैं।trac"tion.html" फ़ाइल खोलें और नीचे दिया गया कोड जोड़ें।
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Addition</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
Subtraction :{{d}}
</div>
</body>
</html>
आइये ऊपर लिखे कोड के मुख्य बिंदुओं पर ध्यान दें
-
<script src="/lib/Utilities.js"></script>
हम अपनी मुख्य एप्लिकेशन फ़ाइल में अपनी Utilities.js फ़ाइल को संदर्भित कर रहे हैं। यह हमें इस फ़ाइल में परिभाषित किसी भी मॉड्यूल को संदर्भित करने की अनुमति देता है।
-
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
हम 'सब' तक पहुंच रहे हैंtractionApp मॉड्यूल और DemoSubtracng-app डायरेक्टिव और ng-controller का उपयोग करके tController को संचालित किया जा सकता है।
-
{{d}}चूंकि हम ऊपर उल्लिखित मॉड्यूल और कंट्रोलर का संदर्भ दे रहे हैं, इसलिए हम एक एक्सप्रेशन के माध्यम से $scope.d वेरिएबल का संदर्भ दे सकते हैं। यह एक्सप्रेशन सब-फंक्शन का परिणाम होगा।tracदो स्कोप वेरिएबल a और b का निर्धारण, जो कि किया गया था 'डेमोसबtractController' नियंत्रक
सारांश
- एंगुलरजेएस मॉड्यूल के उपयोग के बिना, नियंत्रकों का दायरा वैश्विक होने लगता है, जिससे खराब प्रोग्रामिंग प्रथाएं उत्पन्न होती हैं।
- मॉड्यूल का उपयोग व्यावसायिक तर्क को अलग करने के लिए किया जाता है। इन अलग-अलग मॉड्यूल के भीतर तार्किक रूप से अलग करने के लिए कई मॉड्यूल बनाए जा सकते हैं।
- प्रत्येक AngularJS मॉड्यूल में नियंत्रकों का अपना सेट परिभाषित और निर्दिष्ट किया जा सकता है।
- मॉड्यूल और नियंत्रकों को परिभाषित करते समय, उन्हें आम तौर पर अलग-अलग परिभाषित किया जाता है Javaलिपि फ़ाइलें. ये Javaइसके बाद स्क्रिप्ट फ़ाइलों को मुख्य अनुप्रयोग फ़ाइल में संदर्भित किया जाता है।
