उदाहरण के साथ AngularJS नियंत्रक ट्यूटोरियल

AngularJs में नियंत्रक क्या है?

AngularJs में एक कंट्रोलर व्यू से डेटा लेता है, डेटा को प्रोसेस करता है, और फिर उस डेटा को उस व्यू में भेजता है जो अंतिम उपयोगकर्ता को प्रदर्शित होता है। नियंत्रक के पास आपका मुख्य व्यावसायिक तर्क होगा।

नियंत्रक डेटा मॉडल का उपयोग करेगा, आवश्यक प्रसंस्करण को पूरा करेगा और फिर आउटपुट को उस दृश्य को पास करेगा जो अंत उपयोगकर्ता को प्रदर्शित होता है।

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

• कोणीय के दृष्टिकोण से नियंत्रक क्या करता है
• एक बुनियादी नियंत्रक का निर्माण कैसे करें
• नियंत्रक में तरीके कैसे परिभाषित करें
• बाहरी फ़ाइलों में एनजी-नियंत्रक का उपयोग करना

कोणीय के दृष्टिकोण से नियंत्रक क्या करता है

निम्नलिखित एंगुलर जेएस कंट्रोलर के काम करने की एक सरल परिभाषा है।

• कंट्रोलर की प्राथमिक जिम्मेदारी डेटा को नियंत्रित करना है जो दृश्य में पास हो जाता है। गुंजाइश और दृश्य में दो-तरफ़ा संचार होता है।
• दृश्य के गुण गुंजाइश पर "फ़ंक्शन" कह सकते हैं। दृश्य पर इसके अलावा घटनाएँ गुंजाइश पर "विधियों" को बुला सकती हैं। नीचे दिए गए कोड स्निपेट एक फ़ंक्शन का एक सरल उदाहरण देता है।
  • फ़ंक्शन ($ स्कोप) जिसे नियंत्रक और एक आंतरिक फ़ंक्शन को परिभाषित करते समय परिभाषित किया जाता है जो $ स्कोप का नाम वापस करने के लिए उपयोग किया जाता है। फ़र्स्टनाम और $ स्कोप ।ब्लास्टनाम।
  • AngularJS में जब आप किसी फ़ंक्शन को एक चर के रूप में परिभाषित करते हैं, तो इसे एक विधि के रूप में जाना जाता है।
• इस तरह से डेटा कंट्रोलर से स्कोप तक जाता है, और फिर डेटा स्कोप से आगे और पीछे से व्यू तक जाता है।
• मॉडल का उपयोग दृश्य को दिखाने के लिए किया जाता है। मॉडल को उस दायरे में परिभाषित विधियों के माध्यम से संशोधित किया जा सकता है जिसे दृश्य से घटनाओं के माध्यम से ट्रिगर किया जा सकता है। हम दो तरह से मॉडल बाइंडिंग को दायरे से मॉडल तक परिभाषित कर सकते हैं।
• DOM को हेरफेर करने के लिए नियंत्रकों को आदर्श रूप से उपयोग नहीं किया जाना चाहिए। यह निर्देशों द्वारा किया जाना चाहिए जो हम बाद में देखेंगे।
• कार्यक्षमता के आधार पर नियंत्रक का सर्वोत्तम अभ्यास है। उदाहरण के लिए, यदि आपके पास इनपुट के लिए एक फॉर्म है और आपको इसके लिए एक नियंत्रक की आवश्यकता है, तो "फॉर्म कंट्रोलर" नामक एक नियंत्रक बनाएं।

एक बुनियादी नियंत्रक का निर्माण कैसे करें

इससे पहले कि हम एक नियंत्रक के निर्माण के साथ शुरू करें, हमें पहले अपना मूल HTML पेज सेटअप करना होगा।

नीचे दिया गया कोड स्निपेट एक सरल HTML पेज है, जिसका शीर्षक "इवेंट पंजीकरण" है और इसमें बूटस्ट्रैप, jquery और कोणीय जैसे महत्वपूर्ण पुस्तकालयों के संदर्भ हैं।

1. हम बूटस्ट्रैप सीएसएस स्टाइलशीट के संदर्भ जोड़ रहे हैं, जिसका उपयोग बूटस्ट्रैप पुस्तकालयों के संयोजन में किया जाएगा।
2. हम कोणीयराज पुस्तकालयों के संदर्भ जोड़ रहे हैं। इसलिए अब हम कोणीय के साथ जो कुछ भी करते हैं। आगे जाने वाले इस पुस्तकालय से संदर्भित होंगे।
3. हम अपने वेब पेज को कुछ नियंत्रणों के लिए अधिक संवेदनशील बनाने के लिए बूटस्ट्रैप लाइब्रेरी के संदर्भ जोड़ रहे हैं।
4. हमने jquery पुस्तकालयों के संदर्भ जोड़े हैं जिनका उपयोग DOM हेरफेर के लिए किया जाएगा। यह एंगुलर द्वारा आवश्यक है क्योंकि एंगुलर में कुछ कार्यक्षमता इस लाइब्रेरी पर निर्भर है।

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

दूसरी बात यह है कि हमारी फ़ाइलों और फ़ाइल संरचना को देखें जिसे हम अपने पाठ्यक्रम की अवधि के लिए शुरू करने जा रहे हैं।

1. पहले हम अपनी फ़ाइलों को 2 फ़ोल्डरों में अलग करते हैं जैसा कि किसी भी पारंपरिक वेब एप्लिकेशन के साथ किया जाता है। हमारे पास "सीएसएस" फ़ोल्डर है। इसमें हमारी सभी कैस्केडिंग शैली की शीट फाइलें होंगी, और फिर हमारे पास हमारे "lib" फ़ोल्डर होंगे, जिसमें हमारी सभी जावास्क्रिप्ट फाइलें होंगी।
2. Bootstrap.css फ़ाइल को CSS फोल्डर में रखा गया है और इसका उपयोग हमारी वेबसाइट के लिए एक अच्छा लुक और फील जोड़ने के लिए किया जाता है।
3. Angular.js हमारी मुख्य फ़ाइल है जिसे कोणीयजेएस साइट से डाउनलोड किया गया था और यह हमारे काम के फ़ोल्डर में रखा गया था।
4. App.js फ़ाइल में नियंत्रकों के लिए हमारा कोड होगा।
5. Bootstrap.js फ़ाइल का उपयोग हमारे वेब अनुप्रयोग में बूटस्ट्रैप कार्यक्षमता जोड़ने के लिए bootstrap.cs फ़ाइल के पूरक के लिए किया जाता है।
6. Jquery फ़ाइल का उपयोग हमारी साइट पर DOM मैनिपुलेशन कार्यक्षमता जोड़ने के लिए किया जाएगा।

आइए एक उदाहरण देखें कि कोणीय का उपयोग कैसे करें। js,

हम यहां क्या करना चाहते हैं, यह केवल टेक्स्ट फॉर्मेट में और टेक्स्ट बॉक्स में "AngularJS" शब्दों को प्रदर्शित करने के लिए है, जब पृष्ठ को ब्राउज़र में देखा जाता है।

Guru99 Global Event
Tutorial Name : 
This tutorial is {{tutorialName}}

कोड स्पष्टीकरण:

1. एनजी-ऐप कीवर्ड निरूपित करने के लिए है कि इस आवेदन एक कोणीय आवेदन के रूप में विचार किया जाना चाहिए किया जाता है। कुछ भी जो उपसर्ग 'एनजी' से शुरू होता है, एक निर्देश के रूप में जाना जाता है। "DemoApp" हमारे Angular.JS एप्लिकेशन को दिया गया नाम है।
2. हमने एक div टैग बनाया है और इस टैग में हमने अपने नियंत्रक "DemoController" के नाम के साथ एक एनजी-नियंत्रक निर्देश जोड़ा है। यह मूल रूप से हमारे div टैग को डेमो कंट्रोलर की सामग्री तक पहुँचने की क्षमता प्रदान करता है। आपको यह सुनिश्चित करने के निर्देश के तहत नियंत्रक के नाम का उल्लेख करने की आवश्यकता है कि आप नियंत्रक के भीतर परिभाषित कार्यक्षमता तक पहुंचने में सक्षम हैं।
3. हम एनजी-मॉडल निर्देश का उपयोग करके एक मॉडल बाइंडिंग बना रहे हैं। यह क्या करता है कि यह ट्यूटोरियल नाम के लिए पाठ बॉक्स को सदस्य चर "TutorialName" के लिए बाध्य करता है।
4. हम "tutorialName" नामक एक सदस्य चर बना रहे हैं, जिसका उपयोग उन जानकारियों को प्रदर्शित करने के लिए किया जाएगा, जो ट्यूटोरियल नाम के लिए पाठ बॉक्स में उपयोगकर्ता प्रकार हैं।
5. हम एक मॉड्यूल बना रहे हैं जो हमारे डेमोऐप एप्लिकेशन से जुड़ेगा। इसलिए यह मॉड्यूल अब हमारे एप्लिकेशन का हिस्सा बन गया है।
6. मॉड्यूल में, हम एक फ़ंक्शन को परिभाषित करते हैं जो हमारे ट्यूटोरियलनाम चर के लिए "एंगुलरजेएस" का डिफ़ॉल्ट मान प्रदान करता है।

यदि कमांड को सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

चूंकि हमने चर ट्यूटोरियलनाम को "कोणीय जेएस" का मान दिया है, इसलिए यह टेक्स्ट बॉक्स में और सादे टेक्स्ट लाइन में प्रदर्शित होता है।

नियंत्रक में तरीके कैसे परिभाषित करें

आम तौर पर, कोई व्यक्ति व्यवसाय तर्क को अलग करने के लिए नियंत्रक में कई तरीकों को परिभाषित करना चाहेगा।

उदाहरण के लिए, मान लें कि आप अपने नियंत्रक को 2 बुनियादी चीजें करना चाहते हैं,

1. 2 संख्याओं को जोड़कर प्रदर्शन करें
2. 2 संख्याओं का घटाव करें

फिर आप अपने नियंत्रक के अंदर आदर्श रूप से 2 तरीके बनाएँगे, एक जोड़ और दूसरा घटाव करने के लिए।

आइए एक सरल उदाहरण देखें कि आप Angular.JS नियंत्रक के भीतर कस्टम तरीकों को कैसे परिभाषित कर सकते हैं। नियंत्रक केवल एक स्ट्रिंग लौटाएगा।

Guru99 Global Event
Tutorial Name :

This tutorial is {{tutorialName}} 
 

कोड स्पष्टीकरण:

1. यहां, हम केवल एक फ़ंक्शन को परिभाषित कर रहे हैं जो "AngularJS" की एक स्ट्रिंग लौटाता है। फंक्शन TutorialName नामक एक सदस्य चर के माध्यम से स्कोप ऑब्जेक्ट से जुड़ा हुआ है।
2. यदि कमांड को सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

बाहरी फ़ाइलों में एनजी-नियंत्रक का उपयोग करना

आइए "हैलोवर्ल्ड" का एक उदाहरण देखें जहां सभी कार्यक्षमता को एक फ़ाइल में रखा गया था। अब अलग-अलग फ़ाइलों में नियंत्रक के लिए कोड रखने का समय है।

ऐसा करने के लिए नीचे दिए गए चरणों का पालन करें।

चरण 1) app.js फ़ाइल में, अपने नियंत्रक के लिए निम्न कोड जोड़ें

angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});

उपरोक्त कोड निम्नलिखित बातें करता है,

1. "ऐप" नामक एक मॉड्यूल को परिभाषित करें जो नियंत्रक कार्यक्षमता के साथ नियंत्रक को रखेगा।
2. "HelloWorldCtrl" नाम के साथ एक नियंत्रक बनाएं। इस नियंत्रक का उपयोग "हैलो वर्ल्ड" संदेश प्रदर्शित करने के लिए कार्यक्षमता के लिए किया जाएगा।
3. स्कोप ऑब्जेक्ट को कंट्रोलर से व्यू में जानकारी पास करने के लिए उपयोग किया जाता है। तो हमारे मामले में, स्कोप ऑब्जेक्ट का उपयोग "संदेश" नामक एक वैरिएबल को रखने के लिए किया जाएगा।
4. हम चर संदेश को परिभाषित कर रहे हैं और इसे "हैलो वर्ल्ड" मान प्रदान कर रहे हैं।

चरण 2) अब, अपने नमूना में। html फ़ाइल में एक div class जोड़ें जिसमें ng-नियंत्रक निर्देश होगा और फिर सदस्य चर "संदेश" के लिए एक संदर्भ जोड़ें।

इसके अलावा स्क्रिप्ट फ़ाइल app.js जो आपके नियंत्रक के लिए स्रोत कोड है के लिए एक संदर्भ जोड़ने के लिए मत भूलना।

Guru99 Global Event
{{message}}

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

आउटपुट:

सारांश

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