आजकल, सभी ने "सिंगल पेज एप्लीकेशन" के बारे में सुना होगा। जीमेल जैसी कई जानी-मानी वेबसाइट सिंगल पेज एप्लिकेशन (एसपीए) की अवधारणा का उपयोग करती हैं।
एसपीए की अवधारणा है जिसमें जब कोई उपयोगकर्ता किसी भिन्न पृष्ठ के लिए अनुरोध करता है, तो एप्लिकेशन उस पृष्ठ पर नेविगेट नहीं करेगा, बल्कि मौजूदा पृष्ठ के भीतर ही नए पृष्ठ का दृश्य प्रदर्शित करेगा।
यह उपयोगकर्ता को यह एहसास दिलाता है कि उसने पृष्ठ को पहले स्थान पर नहीं छोड़ा है। रूट्स के साथ संयोजन में दृश्य की मदद से कोणीय में समान प्राप्त किया जा सकता है।
इस ट्यूटोरियल में, आप सीखेंगे-
- क्या एक दृश्य है?
- AngularJS में एनजी-व्यू डायरेक्टिव
- एनजी-देखें उदाहरण
क्या एक दृश्य है?
एक दृश्य वह सामग्री है जो उपयोगकर्ता को दिखाई जाती है। मूल रूप से उपयोगकर्ता क्या देखना चाहता है, तदनुसार उस एप्लिकेशन का दृश्य उपयोगकर्ता को दिखाया जाएगा।
विचारों और मार्गों का संयोजन तार्किक विचारों में एक अनुप्रयोग को विभाजित करने में एक की मदद करता है और विभिन्न विचारों को नियंत्रित करता है।
एप्लिकेशन को अलग-अलग दृश्यों में विभाजित करना और एप्लिकेशन के विभिन्न भाग को लोड करने के लिए रूटिंग का उपयोग करना तार्किक रूप से एप्लिकेशन को विभाजित करने और इसे अधिक प्रबंधनीय बनाने में मदद करता है।
मान लेते हैं कि हमारे पास एक ऑर्डर करने का आवेदन है, जिसमें एक ग्राहक ऑर्डर देख सकता है और नए को रख सकता है।
नीचे दिए गए आरेख और बाद की व्याख्या यह प्रदर्शित करती है कि इस आवेदन को एक पृष्ठ के आवेदन के रूप में कैसे बनाया जाए।
अब, दो अलग-अलग वेब पेज होने के बजाय, "व्यू ऑर्डर्स" के लिए एक और "न्यू ऑर्डर्स" के लिए दूसरा, एंगुलरजेएस में, आप एक ही पेज में "व्यू ऑर्डर्स" और "न्यू ऑर्डर्स" नामक दो अलग-अलग विचार बनाएंगे।
हमारे आवेदन में 2 संदर्भ लिंक भी होंगे, जिन्हें #show और #new कहा जाता है।
- इसलिए जब एप्लिकेशन MyApp / # शो में जाता है, तो यह व्यू ऑर्डर्स का दृश्य दिखाएगा, उसी समय यह पेज को नहीं छोड़ेगा। यह "व्यू ऑर्डर्स" की जानकारी के साथ मौजूदा पेज के सेक्शन को रीफ्रेश करेगा। वही "न्यू ऑर्डर्स" दृश्य के लिए जाता है।
तो इस तरह से यह अधिक सरल और आसान बनाने के लिए आवेदन को अलग-अलग विचारों में बदलने के लिए सरल हो जाता है और जब भी आवश्यक हो बदलाव करना आसान होता है।
और प्रत्येक दृश्य में उस कार्यक्षमता के लिए व्यावसायिक तर्क को नियंत्रित करने के लिए एक संबंधित नियंत्रक होगा।
AngularJS में एनजी-व्यू डायरेक्टिव
"NgView" एक निर्देश है जो मुख्य मार्ग (index.html) फ़ाइल में वर्तमान मार्ग के प्रदान किए गए टेम्पलेट को शामिल करके $ मार्ग सेवा का पूरक है।
जब भी वर्तमान मार्ग बदलता है, दृश्य में पृष्ठ को बदले बिना $ मार्ग सेवा के कॉन्फ़िगरेशन के अनुसार इसमें परिवर्तन शामिल होते हैं।
हम बाद के अध्याय में मार्गों को शामिल करेंगे, अब हम अपने आवेदन में कई विचारों को जोड़ने पर ध्यान केंद्रित करेंगे।
नीचे पूरी फ़्लोचार्ट है कि पूरी प्रक्रिया कैसे काम करती है। हम नीचे दिखाए गए हमारे उदाहरण में हर प्रक्रिया के लिए विस्तार से जाएंगे।
एनजी-देखें उदाहरण
आइए एक उदाहरण देखें कि हम विचारों को कैसे लागू कर सकते हैं।
हमारे उदाहरण में, हम उपयोगकर्ता के लिए दो विकल्प प्रस्तुत करने जा रहे हैं,
- एक "ईवेंट" प्रदर्शित करना है, और दूसरा एक "ईवेंट" जोड़ना है।
- जब उपयोगकर्ता ऐड इवेंट लिंक पर क्लिक करता है, तो उन्हें "ईवेंट जोड़ें" के लिए दृश्य दिखाया जाएगा और वही "ईवेंट इवेंट" के लिए जाता है।
कृपया इस उदाहरण को प्राप्त करने के लिए नीचे दिए गए चरणों का पालन करें।
चरण 1) एक स्क्रिप्ट संदर्भ के रूप में कोणीय-मार्ग फ़ाइल शामिल करें।
यह मार्ग फ़ाइल कई मार्गों और विचारों के होने के कार्यों का उपयोग करने के लिए आवश्यक है। इस फाइल को angularJS वेबसाइट से डाउनलोड किया जा सकता है।
चरण 2) इस चरण में,
- Href टैग जोड़ें जो "एक नई घटना को जोड़ना" और "एक घटना को प्रदर्शित करना" लिंक का प्रतिनिधित्व करेंगे।
- इसके अलावा, एनजी-व्यू निर्देश के साथ एक div टैग जोड़ें जो दृश्य का प्रतिनिधित्व करेगा।
जब भी उपयोगकर्ता "नया ईवेंट लिंक जोड़ें" या "ईवेंट प्रदर्शन लिंक" पर क्लिक करता है, तो यह संबंधित दृश्य को इंजेक्ट करने की अनुमति देगा।
चरण 3) अपने स्क्रिप्ट टैग में Angular JS के लिए, निम्न कोड जोड़ें।
चलो रूटिंग के बारे में चिंता न करें, अभी के लिए, हम इसे बाद के अध्याय में देखेंगे। आइए अभी के विचारों के लिए कोड देखें।
- कोड के इस खंड का अर्थ है कि जब उपयोगकर्ता href टैग "NewEvent" पर क्लिक करता है जिसे पहले div टैग में परिभाषित किया गया था। यह वेब पेज add_event.html पर जाएगा, और वहां से कोड ले जाएगा और इसे दृश्य में इंजेक्ट करेगा। दूसरे इस दृष्टिकोण के लिए व्यावसायिक तर्क को संसाधित करने के लिए, "AddEventController" पर जाएं।
- कोड के इस खंड का अर्थ है कि जब उपयोगकर्ता href टैग "DisplayEvent" पर क्लिक करता है जिसे पहले div टैग में परिभाषित किया गया था। यह वेब पेज show_event.html पर जाएगा, वहां से कोड लें और इसे दृश्य में इंजेक्ट करें। दूसरे, इस दृष्टिकोण के लिए व्यावसायिक तर्क को संसाधित करने के लिए, "ShowDisplayController" पर जाएं।
- कोड के इस खंड का अर्थ है कि उपयोगकर्ता को दिखाया गया डिफ़ॉल्ट दृश्य प्रदर्शन दृश्य है
चरण 4) अगला "डिस्प्लेएवेंट" और "न्यू इवेंट जोड़ें" कार्यक्षमता दोनों के लिए व्यावसायिक तर्क को संसाधित करने के लिए नियंत्रकों को जोड़ना है।
हम बस प्रत्येक नियंत्रक के लिए प्रत्येक स्कोप ऑब्जेक्ट के लिए एक संदेश चर जोड़ रहे हैं। उपयोगकर्ता को उपयुक्त दृश्य दिखाए जाने पर यह संदेश प्रदर्शित हो जाएगा।
Event Registration Guru99 Global Event
चरण 5) add_event.html और show_event.html नामक पृष्ठ बनाएँ। नीचे दिखाए अनुसार पृष्ठों को सरल रखें।
हमारे मामले में, add_event.html पृष्ठ में "नई घटना जोड़ें" पाठ के साथ एक हेडर टैग होगा और संदेश "यह एक नई घटना जोड़ें" है को प्रदर्शित करने के लिए एक अभिव्यक्ति है।
इसी तरह, show_event.html पृष्ठ में "शो इवेंट" टेक्स्ट को होल्ड करने के लिए एक हेडर टैग भी होगा और संदेश प्रदर्शित करने के लिए एक संदेश अभिव्यक्ति भी होगी "यह एक इवेंट प्रदर्शित करना है।"
संदेश चर का मान नियंत्रक के आधार पर इंजेक्ट किया जाएगा जो दृश्य से जुड़ा हुआ है।
प्रत्येक पृष्ठ के लिए, हम संदेश चर जोड़ने जा रहे हैं, जिसे प्रत्येक संबंधित नियंत्रक से इंजेक्ट किया जाएगा।
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से, हम 2 चीजों को नोटिस कर सकते हैं
- पता बार प्रतिबिंबित करेगा कि वर्तमान दृश्य क्या प्रदर्शित किया जा रहा है। इसलिए चूंकि डिफ़ॉल्ट दृश्य शो इवेंट स्क्रीन को दिखाने के लिए है, इसलिए पता बार "डिस्प्लेवेंट" के लिए पता दिखाता है।
- यह खंड दृश्य है, जो मक्खी पर बनता है। चूंकि डिफ़ॉल्ट दृश्य शो इवेंट एक है, यह वह है जो उपयोगकर्ता को प्रदर्शित किया जाता है।
अब प्रदर्शित पेज में Add New Event लिंक पर क्लिक करें। अब आपको नीचे आउटपुट मिलेगा।
आउटपुट:
- पता बार अब यह दर्शाएगा कि वर्तमान दृश्य अब "नया ईवेंट जोड़ें" दृश्य है। ध्यान दें कि आप अभी भी उसी एप्लिकेशन पेज पर होंगे। आपको एक नए एप्लिकेशन पृष्ठ पर निर्देशित नहीं किया जाएगा।
- यह अनुभाग दृश्य है, और यह अब "नई घटना जोड़ें" कार्यक्षमता के लिए HTML को दिखाने के लिए बदल जाएगा। तो अब इस सेक्शन में हेडर टैग "Add New Event" और टेक्स्ट "This is to a New Event" यूजर को प्रदर्शित होता है।