उदाहरण के साथ AngularJS मॉड्यूल ट्यूटोरियल

एक AngularJS मॉड्यूल क्या है?

एक मॉड्यूल एप्लिकेशन कार्यक्षमता को परिभाषित करता है जो एनजी-ऐप निर्देश का उपयोग करके पूरे HTML पृष्ठ पर लागू होता है। यह कार्यक्षमता, जैसे सेवाओं, निर्देशों और फ़िल्टर को परिभाषित करता है, एक तरह से जो इसे विभिन्न अनुप्रयोगों में पुन: उपयोग करना आसान बनाता है।

हमारे पहले के सभी ट्यूटोरियल में, आपने अपने मुख्य कोणीय अनुप्रयोग को परिभाषित करने के लिए उपयोग किए जाने वाले एनजी ऐप निर्देश पर ध्यान दिया होगा। यह Angular.JS में मॉड्यूल की प्रमुख अवधारणाओं में से एक है।

इस ट्यूटोरियल में, आप सीखेंगे-

• AngularJS में मॉड्यूल कैसे बनाएं
• मॉड्यूल और नियंत्रक

AngularJS में मॉड्यूल कैसे बनाएं

इससे पहले कि हम एक मॉड्यूल क्या है के साथ शुरू करते हैं, चलो एक मॉड्यूल के बिना एक AngularJS आवेदन का एक उदाहरण देखें और फिर अपने आवेदन में मॉड्यूल होने की आवश्यकता को समझें।

चलिए "DemoController.js" नामक एक फाइल बनाने पर विचार करते हैं और फाइल में नीचे कोड जोड़ते हैं

Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});

उपर्युक्त कोड में, हमने "डेमोकंट्रोलर" नामक एक फ़ंक्शन बनाया है जो हमारे आवेदन के भीतर एक नियंत्रक के रूप में कार्य करने वाला है।

इस कंट्रोलर में, हम सिर्फ 2 वेरिएबल्स a और b को जोड़ रहे हैं और इन वैरिएबल्स के एडिशन को एक नए वेरिएबल, c और असाइन कर वापस स्कोप ऑब्जेक्ट में असाइन कर रहे हैं।

अब हम अपना मुख्य नमूना बनाते हैं। आइए नीचे दिए गए कोड स्निपेट को अपने HTML पेज में डालें।

गुरु 99 ग्लोबल इवेंट {{सी}}

ऊपर दिए गए कोड में, हम अपने DemoController को शामिल कर रहे हैं और फिर एक अभिव्यक्ति के माध्यम से $ गुंजाइश.c चर के मूल्य का आह्वान कर रहे हैं।

लेकिन हमारे एनजी-ऐप के निर्देश पर ध्यान दें, इसका एक खाली मूल्य है।

• इसका मूल रूप से मतलब है कि सभी नियंत्रक जिन्हें एनजी-ऐप निर्देश के संदर्भ में कहा जाता है, वैश्विक स्तर पर पहुँचा जा सकता है। कोई सीमा नहीं है जो एक दूसरे से कई नियंत्रकों को अलग करती है।
• अब आधुनिक समय की प्रोग्रामिंग में, यह किसी भी मॉड्यूल से जुड़े नहीं होने और उन्हें विश्व स्तर पर सुलभ बनाने के लिए एक बुरा अभ्यास है। नियंत्रकों के लिए परिभाषित कुछ तार्किक सीमा होनी चाहिए।

और यह वह जगह है जहां मॉड्यूल आते हैं। सीमाओं के उस पृथक्करण को बनाने के लिए मॉड्यूल का उपयोग किया जाता है और कार्यक्षमता के आधार पर नियंत्रकों को अलग करने में सहायता करता है।

आइए मॉड्यूल को लागू करने के लिए ऊपर दिए गए कोड को बदलें और हमारे कंट्रोलर को इस मॉड्यूल से जोड़े

var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});

ऊपर लिखे कोड में मुख्य अंतर पर ध्यान दें

1. var sampleApp = angular.module('sampleApp',[]);

   हम विशेष रूप से एक 'एंगुलरजेएस' मॉड्यूल बना रहे हैं, जिसे 'नमूनाएप' कहा जाता है। यह कार्यक्षमता के लिए एक तार्किक सीमा बनाएगा जिसमें यह मॉड्यूल शामिल होगा। तो हमारे उपरोक्त उदाहरण में, हमारे पास एक मॉड्यूल है जिसमें एक नियंत्रक होता है जो 2 गुंजाइश वस्तुओं के अतिरिक्त की भूमिका निभाता है। इसलिए, हमारे पास तार्किक सीमा के साथ एक मॉड्यूल हो सकता है जो कहता है कि यह मॉड्यूल केवल आवेदन के लिए गणितीय गणना की कार्यक्षमता का प्रदर्शन करेगा।

2. sampleApp.controller('DemoController', function($scope)

   अब हम कंट्रोलर को हमारे AngularJS मॉड्यूल "SampleApp" से जोड़ रहे हैं। इसका अर्थ यह है कि यदि हम अपने मुख्य HTML कोड में मॉड्यूल 'sampleApp' का संदर्भ नहीं देते हैं, तो हम अपने नियंत्रक की कार्यक्षमता का संदर्भ नहीं दे पाएंगे।

हमारा मुख्य HTML कोड नीचे दिखाया गया नहीं होगा

Guru99 Global Event
{{c}}

आइए ऊपर लिखे कोड और हमारे पिछले कोड में मुख्य अंतरों पर ध्यान दें

हमारे शरीर टैग में,

• खाली एनजी-ऐप निर्देश होने के बजाय, हम अब मॉड्यूल का नमूना ले रहे हैं।
• इस एप्लिकेशन मॉड्यूल को कॉल करके, हम अब कंट्रोलर 'DemoController' और डेमो कंट्रोलर में मौजूद कार्यक्षमता तक पहुंच सकते हैं।

मॉड्यूल और नियंत्रक

Angular.JS में, आधुनिक दिन वेब अनुप्रयोगों को विकसित करने के लिए उपयोग किया जाने वाला पैटर्न तार्किक रूप से कई स्तरों की कार्यक्षमता को अलग करने के लिए कई मॉड्यूल और नियंत्रक बनाने का है।

आम तौर पर मॉड्यूल को अलग जावास्क्रिप्ट फ़ाइलों में संग्रहीत किया जाएगा, जो मुख्य एप्लिकेशन फ़ाइल से अलग होगा।

आइए एक उदाहरण देखें कि यह कैसे प्राप्त किया जा सकता है।

नीचे दिए गए उदाहरण में,

• हम यूटिलिटीज.जेएस नामक एक फाइल बनाएंगे जिसमें 2 मॉड्यूल होंगे, एक जोड़ की कार्यक्षमता के लिए और दूसरा घटाव की कार्यक्षमता के प्रदर्शन के लिए होगा।
• फिर हम 2 अलग-अलग एप्लिकेशन फाइल बनाने जा रहे हैं और हर एप्लिकेशन फाइल से यूटिलिटी फाइल एक्सेस कर रहे हैं।
• एक अनुप्रयोग फ़ाइल में हम मॉड्यूल को जोड़ देंगे और दूसरे में, हम घटाव के लिए मॉड्यूल को एक्सेस करेंगे।

चरण 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;});

ऊपर लिखे कोड में मुख्य बिंदुओं पर ध्यान दें

1.  var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);

   2 अलग-अलग Angular Module बनाए गए हैं, जिनमें से एक को 'AdditionApp' नाम दिया गया है और दूसरे को 'SubtractionApp' नाम दिया गया है।

2. AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)

   प्रत्येक मॉड्यूल के लिए 2 अलग-अलग नियंत्रक परिभाषित किए गए हैं, एक को DemoAddController कहा जाता है और दूसरा DemoSubtractController है। प्रत्येक नियंत्रक के पास संख्याओं के जोड़ और घटाव के लिए अलग-अलग तर्क होते हैं।

चरण 2) अपनी मुख्य एप्लिकेशन फ़ाइलें बनाएं। चलिए ApplicationAddition.html नामक एक फाइल बनाते हैं और नीचे दिए गए कोड को जोड़ते हैं

Addition :{{c}}

ऊपर लिखे कोड में मुख्य बिंदुओं पर ध्यान दें

1. हम अपनी मुख्य एप्लिकेशन फाइल में हमारी यूटिलिटीज.जेएस फाइल का उल्लेख कर रहे हैं। यह हमें इस फाइल में परिभाषित किसी भी AngularJS मॉड्यूल का संदर्भ देता है।

2. हम क्रमशः एनजी-ऐप निर्देश और एनजी-नियंत्रक का उपयोग करके 'एडिशनएप' मॉड्यूल और डेमोएडॉन्ट कंट्रोलर का उपयोग कर रहे हैं।

3. {{c}}

   चूँकि हम उपर्युक्त मॉड्यूल और नियंत्रक को संदर्भित कर रहे हैं, हम एक अभिव्यक्ति के माध्यम से $ गुंजाइश.c चर का संदर्भ देने में सक्षम हैं। एक्सप्रेशन 2 स्कोप वैरिएबल a और b के जोड़ का परिणाम होगा जो 'DemoAddCroller' कंट्रोलर में किया गया था।

   उसी तरह हम घटाव फ़ंक्शन के लिए करेंगे।

चरण 3) अपनी मुख्य एप्लिकेशन फ़ाइलें बनाएं। चलो "ApplicationSubtraction.html" नामक एक फ़ाइल बनाते हैं और नीचे दिए गए कोड को जोड़ते हैं

Subtraction :{{d}}

ऊपर लिखे कोड में मुख्य बिंदुओं पर ध्यान दें

1. हम अपनी मुख्य एप्लिकेशन फाइल में हमारी यूटिलिटीज.जेएस फाइल का उल्लेख कर रहे हैं। यह हमें इस फ़ाइल में परिभाषित किसी भी मॉड्यूल को संदर्भित करने की अनुमति देता है।

2. हम क्रमशः एनजी-ऐप निर्देश और एनजी-नियंत्रक का उपयोग करके 'सबट्रैक्शनऐप मॉड्यूल और डेमोसबट्रैक्टकंट्रोलर तक पहुंच बना रहे हैं।

3. {{d}}

   चूँकि हम उपर्युक्त मॉड्यूल और नियंत्रक को संदर्भित कर रहे हैं इसलिए हम एक अभिव्यक्ति के माध्यम से $ गुंजाइश.d चर का संदर्भ देने में सक्षम हैं। यह अभिव्यक्ति 2 स्कोप वैरिएबल के ए और बी के घटाव का परिणाम होगी जो 'डेमोसबट्रैक्टकंट्रोलर' कंट्रोलर में किया गया था।

सारांश

• एंगुलरजेएस मॉड्यूल के उपयोग के बिना, नियंत्रकों के पास एक वैश्विक गुंजाइश होने लगती है जो खराब प्रोग्रामिंग प्रथाओं की ओर जाता है।
• व्यापार तर्क को अलग करने के लिए मॉड्यूल का उपयोग किया जाता है। इन विभिन्न मॉड्यूलों के भीतर तार्किक रूप से अलग होने के लिए कई मॉड्यूल बनाए जा सकते हैं।
• प्रत्येक AngularJS मॉड्यूल को परिभाषित और नियत करने के लिए नियंत्रकों का अपना सेट हो सकता है।
• मॉड्यूल और नियंत्रकों को परिभाषित करते समय, वे सामान्य रूप से अलग जावास्क्रिप्ट फ़ाइलों में परिभाषित होते हैं। इन जावास्क्रिप्ट फ़ाइलों को तब मुख्य एप्लिकेशन फ़ाइल में संदर्भित किया जाता है।