एनजी-कंट्रोलर उदाहरण के साथ AngularJS नियंत्रक
AngularJS में कंट्रोलर क्या है?
A नियंत्रक AngularJS में व्यू से डेटा लिया जाता है, डेटा को प्रोसेस किया जाता है, और फिर उस डेटा को व्यू में भेजा जाता है जो अंतिम उपयोगकर्ता को दिखाया जाता है। नियंत्रक में आपका मुख्य व्यावसायिक तर्क होगा। नियंत्रक डेटा मॉडल का उपयोग करेगा, आवश्यक प्रोसेसिंग करेगा और फिर आउटपुट को व्यू में भेजेगा जो बदले में अंतिम उपयोगकर्ता को दिखाया जाता है।
एंगुलर के परिप्रेक्ष्य से नियंत्रक क्या करता है?
AngularJS नियंत्रक के कामकाज की एक सरल परिभाषा निम्नलिखित है:
- नियंत्रक की प्राथमिक जिम्मेदारी दृश्य को भेजे जाने वाले डेटा को नियंत्रित करना है। स्कोप और दृश्य में दो-तरफ़ा संचार होता है।
- दृश्य के गुण स्कोप पर "फ़ंक्शन" को कॉल कर सकते हैं। इसके अलावा दृश्य पर ईवेंट स्कोप पर "मेथड्स" को कॉल कर सकते हैं। नीचे दिया गया कोड स्निपेट फ़ंक्शन का एक सरल उदाहरण देता है।
- RSI फ़ंक्शन($स्कोप) जिसे नियंत्रक को परिभाषित करते समय परिभाषित किया जाता है और एक आंतरिक फ़ंक्शन जिसका उपयोग $scope.firstName और $scope.lastName के संयोजन को वापस करने के लिए किया जाता है।
- In AngularJSजब आप किसी फ़ंक्शन को चर के रूप में परिभाषित करते हैं, तो उसे विधि के रूप में जाना जाता है।
- इस तरह से डेटा नियंत्रक से स्कोप तक जाता है, और फिर डेटा स्कोप से दृश्य तक आगे-पीछे होता है।
- स्कोप का उपयोग मॉडल को दृश्य में दिखाने के लिए किया जाता है। मॉडल को स्कोप में परिभाषित विधियों के माध्यम से संशोधित किया जा सकता है जिसे दृश्य से घटनाओं के माध्यम से ट्रिगर किया जा सकता है। हम स्कोप से मॉडल तक दो तरफ़ा मॉडल बाइंडिंग को परिभाषित कर सकते हैं।
- DOM में हेरफेर करने के लिए नियंत्रकों का आदर्श रूप से उपयोग नहीं किया जाना चाहिए। यह निर्देशों द्वारा किया जाना चाहिए जिसे हम बाद में देखेंगे।
- सबसे अच्छा अभ्यास कार्यक्षमता के आधार पर नियंत्रक रखना है। उदाहरण के लिए, यदि आपके पास इनपुट के लिए एक फ़ॉर्म है और आपको उसके लिए एक नियंत्रक की आवश्यकता है, तो "फ़ॉर्म नियंत्रक" नामक एक नियंत्रक बनाएँ।
AngularJS में एक बेसिक कंट्रोलर कैसे बनाएं
AngularJS में नियंत्रक बनाने के चरण नीचे दिए गए हैं:
चरण 1) एक बुनियादी HTML पृष्ठ बनाएँ
इससे पहले कि हम नियंत्रक का निर्माण शुरू करें, हमें पहले अपना मूल HTML पृष्ठ सेटअप करना होगा।
नीचे दिया गया कोड स्निपेट एक सरल HTML पेज है जिसका शीर्षक “ईवेंट रजिस्ट्रेशन” है और इसमें महत्वपूर्ण लाइब्रेरीज़ के संदर्भ हैं जैसे Bootstrap, jQuery और कोणीय।
- हम बूटस्ट्रैप CSS स्टाइलशीट में संदर्भ जोड़ रहे हैं, जिसका उपयोग बूटस्ट्रैप लाइब्रेरीज़ के साथ किया जाएगा।
- हम Angularjs लाइब्रेरी में संदर्भ जोड़ रहे हैं। इसलिए अब हम Angular.js के साथ जो भी करेंगे, उसका संदर्भ इस लाइब्रेरी से लिया जाएगा।
- हम अपने वेब पेज को कुछ नियंत्रणों के लिए अधिक उत्तरदायी बनाने के लिए बूटस्ट्रैप लाइब्रेरी में संदर्भ जोड़ रहे हैं।
- हमने jQuery लाइब्रेरीज़ के संदर्भ जोड़े हैं जिनका उपयोग DOM मैनिपुलेशन के लिए किया जाएगा। Angular के लिए यह आवश्यक है क्योंकि Angular में कुछ कार्यक्षमता इस लाइब्रेरी पर निर्भर है।
डिफ़ॉल्ट रूप से, उपरोक्त कोड स्निपेट हमारे सभी उदाहरणों में मौजूद रहेगा, ताकि हम बाद के अनुभागों में केवल विशिष्ट AngularJS कोड दिखा सकें।
चरण 2) फ़ाइलें और फ़ाइल संरचना की जाँच करें
दूसरा, आइए हम अपनी फाइलों और फाइल संरचना पर नजर डालें, जिसे हम अपने पाठ्यक्रम की अवधि के लिए शुरू करने जा रहे हैं।
- सबसे पहले हम अपनी फ़ाइलों को 2 फ़ोल्डरों में विभाजित करते हैं जैसा कि किसी भी पारंपरिक वेब एप्लिकेशन के साथ किया जाता है। हमारे पास "CSS" फ़ोल्डर है। इसमें हमारी सभी कैस्केडिंग स्टाइल शीट फ़ाइलें होंगी, और फिर हमारे पास हमारा "lib" फ़ोल्डर होगा जिसमें हमारी सभी फाइलें होंगी। Javaलिपि फाइलें.
- बूटस्ट्रैप.css फ़ाइल को CSS फ़ोल्डर में रखा जाता है और इसका उपयोग हमारी वेबसाइट के लिए एक अच्छा लुक और फील जोड़ने के लिए किया जाता है।
- Angular.js हमारी मुख्य फ़ाइल है जिसे AngularJS साइट से डाउनलोड किया गया था और हमारे lib फ़ोल्डर में रखा गया था।
- App.js फ़ाइल में नियंत्रकों के लिए हमारा कोड होगा।
- bootstrap.js फ़ाइल का उपयोग हमारे वेब अनुप्रयोग में बूटस्ट्रैप कार्यक्षमता जोड़ने के लिए bootstrap.cs फ़ाइल के पूरक के रूप में किया जाता है।
- jQuery फ़ाइल का उपयोग हमारी साइट पर DOM मैनिपुलेशन कार्यक्षमता जोड़ने के लिए किया जाएगा।
चरण 3) आउटपुट प्रदर्शित करने के लिए AngularJS कोड का उपयोग करें
हम यहाँ जो करना चाहते हैं वह यह है कि जब ब्राउज़र में पेज देखा जाए तो “AngularJS” शब्द टेक्स्ट फ़ॉर्मेट और टेक्स्ट बॉक्स दोनों में प्रदर्शित हो। आइए एक उदाहरण देखें कि ऐसा करने के लिए angular.js का उपयोग कैसे करें:
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/jquery-1.11.3.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName}} </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoController', function($scope){ $scope.tutorialName = "Angular JS"; }); </script> </body> </html>
कोड स्पष्टीकरण:
- RSI एनजी-ऐप कीवर्ड का उपयोग यह दर्शाने के लिए किया जाता है कि इस एप्लिकेशन को एक एंगुलर एप्लिकेशन के रूप में माना जाना चाहिए। उपसर्ग से शुरू होने वाली कोई भी चीज़ 'एनजी' ए के रूप में जाना जाता है निदेश. “DemoApp” हमारे Angular.JS एप्लिकेशन को दिया गया नाम है।
- हमने एक div टैग बनाया है और इस टैग में हमने अपने नियंत्रक "DemoController" के नाम के साथ एक ng-controller निर्देश जोड़ा है। यह मूल रूप से हमारे div टैग को डेमो नियंत्रक की सामग्री तक पहुँचने की क्षमता देता है। आपको यह सुनिश्चित करने के लिए निर्देश के तहत नियंत्रक का नाम उल्लेख करना होगा कि आप नियंत्रक के भीतर परिभाषित कार्यक्षमता तक पहुँचने में सक्षम हैं।
- हम ng-model निर्देश का उपयोग करके एक मॉडल बाइंडिंग बना रहे हैं। यह जो करता है वह यह है कि यह ट्यूटोरियल नाम के लिए टेक्स्ट बॉक्स को सदस्य चर "tutorialName" से बांधता है।
- हम "tutorialName" नामक एक सदस्य चर बना रहे हैं जिसका उपयोग उपयोगकर्ता द्वारा ट्यूटोरियल नाम के लिए टेक्स्ट बॉक्स में टाइप की गई जानकारी को प्रदर्शित करने के लिए किया जाएगा।
- हम एक मॉड्यूल बना रहे हैं जो हमारे DemoApp एप्लीकेशन से जुड़ेगा। तो यह मॉड्यूल अब हमारे एप्लीकेशन का हिस्सा बन गया है।
- मॉड्यूल में, हम एक फ़ंक्शन परिभाषित करते हैं जो हमारे tutorialName वैरिएबल को “AngularJS” का डिफ़ॉल्ट मान प्रदान करता है।
यदि कमांड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप ब्राउज़र में अपना कोड चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
चूंकि हमने tutorialName वेरिएबल को “Angular JS” का मान दिया है, इसलिए यह टेक्स्ट बॉक्स और प्लेन टेक्स्ट लाइन में प्रदर्शित होता है।
AngularJS कंट्रोलर्स में मेथड्स को कैसे परिभाषित करें
सामान्यतः, व्यवसाय तर्क को अलग करने के लिए नियंत्रक में अनेक विधियां परिभाषित करना आवश्यक होगा।
उदाहरण के लिए, मान लीजिए कि आप चाहते हैं कि आपका कंट्रोलर दो बुनियादी काम करे,
- 2 संख्याओं का योग करें
- 2 संख्याओं का घटाव करें
फिर आप आदर्श रूप से अपने नियंत्रक के अंदर 2 विधियां बनाएंगे, एक जोड़ने के लिए और दूसरा घटाने के लिए।
आइए एक सरल उदाहरण देखें कि आप Angular.JS कंट्रोलर के भीतर कस्टम मेथड कैसे परिभाषित कर सकते हैं। कंट्रोलर बस एक स्ट्रिंग लौटाएगा।
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body ng-app="DemoApp"> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/jquery-1.11.3.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name :<input type="text" ng-model="tutorialName"><br> <br> This tutorial is {{tutorialName}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', function($scope) { $scope.tutorialName = "Angular JS"; $scope.tName = function() { return $scope.tName; }; }); </script> </body> </html>
कोड स्पष्टीकरण:
- यहाँ, हम बस एक फ़ंक्शन परिभाषित कर रहे हैं जो “AngularJS” की एक स्ट्रिंग लौटाता है। फ़ंक्शन ट्यूटोरियलनाम नामक सदस्य चर के माध्यम से स्कोप ऑब्जेक्ट से जुड़ा हुआ है।
- यदि कमांड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप ब्राउज़र में अपना कोड चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
एनजी-कंट्रोलर उदाहरण के साथ AngularJS नियंत्रक
आइए "HelloWorld" का एक उदाहरण देखें, जहाँ सभी कार्यक्षमताएँ एक ही फ़ाइल में रखी गई थीं। अब नियंत्रक के लिए कोड को अलग-अलग फ़ाइलों में रखने का समय आ गया है।
आइये ऐसा करने के लिए नीचे दिए गए चरणों का पालन करें:
चरण 1) App.js फ़ाइल में, अपने कंट्रोलर के लिए निम्न कोड जोड़ें
angular.module('app',[]).controller('HelloWorldCtrl',function($scope) { $scope.message = "Hello World" });
उपरोक्त कोड निम्नलिखित कार्य करता है:
- "ऐप" नामक एक मॉड्यूल परिभाषित करें जो नियंत्रक कार्यक्षमता के साथ नियंत्रक को रखेगा।
- “HelloWorldCtrl” नाम से एक कंट्रोलर बनाएँ। इस कंट्रोलर का उपयोग “Hello World” संदेश प्रदर्शित करने की कार्यक्षमता के लिए किया जाएगा।
- स्कोप ऑब्जेक्ट का उपयोग कंट्रोलर से दृश्य तक जानकारी भेजने के लिए किया जाता है। इसलिए हमारे मामले में, स्कोप ऑब्जेक्ट का उपयोग "संदेश" नामक एक चर को रखने के लिए किया जाएगा।
- हम message वेरिएबल को परिभाषित कर रहे हैं और उसे “Hello World” मान प्रदान कर रहे हैं।
चरण 2) अब, अपनी Sample.html फ़ाइल में एक div क्लास जोड़ें जिसमें ng-controller निर्देश होगा और फिर सदस्य चर “message” का संदर्भ जोड़ें
इसके अलावा स्क्रिप्ट फ़ाइल app.js का संदर्भ जोड़ना न भूलें जिसमें आपके नियंत्रक का स्रोत कोड है।
<!DOCTYPE html> <html ng-app="app"> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body> <h1> Guru99 Global Event</h1> <div class="container"> <div ng-controller="HelloWorldCtrl">{{message}}</div> </div> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/jquery-1.11.3.min.js"></script> <script src="app.js"></script> </body> </html>
यदि उपरोक्त कोड सही ढंग से दर्ज किया गया है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
सारांश
- नियंत्रक की प्राथमिक जिम्मेदारी एक स्कोप ऑब्जेक्ट बनाना है जो बदले में दृश्य को पास हो जाता है
- ng-app, ng-controller और ng-model निर्देशों का उपयोग करके एक सरल नियंत्रक कैसे बनाएं
- किसी नियंत्रक में कस्टम विधियाँ कैसे जोड़ें, जिसका उपयोग AngularJS मॉड्यूल के भीतर विभिन्न कार्यात्मकताओं को अलग करने के लिए किया जा सकता है।
- इस परत को दृश्य परत से अलग करने के लिए बाहरी फ़ाइलों में नियंत्रकों को परिभाषित किया जा सकता है। वेब एप्लिकेशन बनाते समय यह आमतौर पर सबसे अच्छा अभ्यास है।