AngularJS ng-view उदाहरण के साथ

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

⚡ स्मार्ट सारांश

AngularJS में व्यू का उपयोग करके एक पेज को दूसरे पेज पर नेविगेट करने के बजाय उसकी सामग्री को बदला जा सकता है, जिससे सिंगल पेज एप्लिकेशन तुरंत प्रतिक्रिया देने में सक्षम होता है। ng-view डायरेक्टिव उस क्षेत्र को चिह्नित करता है जहां प्रत्येक रूट अपने टेम्पलेट और कंट्रोलर को बदलता है।

  • 🪟 एकल प्लेसहोल्डर: ng-view ले जाने वाला एक तत्व यह दर्शाता है कि प्रत्येक रूटेड टेम्प्लेट कहाँ इंजेक्ट किया जाता है, और प्रति पृष्ठ केवल एक ही ऐसे तत्व की अनुमति है।
  • 🔗 मार्ग युग्मन: प्रत्येक रूट एक टेम्प्लेटयूआरएल और एक कंट्रोलर का नाम देता है, जो उस व्यू के लिए मार्कअप और लॉजिक को एक साथ जोड़ता है।
  • 📦 मॉड्यूल निर्भरता: व्यू के लिए angular-route.js के साथ-साथ ngRoute मॉड्यूल पर घोषित निर्भरता की आवश्यकता होती है।
  • 🎯 सहज दृश्य: अन्यथा खंड किसी भी बेमेल पते को पुनर्निर्देशित करता है, जो पहली बार लोड होने पर एक दृश्य प्रस्तुत करता है।
  • 🌐 सर्वर की आवश्यकता है: टेम्प्लेट HTTP के माध्यम से प्राप्त किए जाते हैं, इसलिए पेज को फाइल सिस्टम से खोलने के बजाय HTTP पर ही उपलब्ध कराया जाना चाहिए।
  • ⚠️ समर्थन स्थिति: AngularJS का सपोर्ट 31 दिसंबर 2021 को समाप्त हो गया और इसे अब कोई और सुरक्षा पैच नहीं मिलेगा।
विस्तार में पढ़ें

AngularJS ng-view डायरेक्टिव

प्रसिद्ध साइटें जैसे कि Gmail सिंगल पेज एप्लिकेशन की अवधारणा का उपयोग करें। जब कोई उपयोगकर्ता किसी दूसरे पेज का अनुरोध करता है, तो एप्लिकेशन उसे दूसरे पेज पर नहीं ले जाता; यह नए पेज का दृश्य मौजूदा पेज के अंदर ही प्रदर्शित करता है, जिससे ऐसा लगता है कि उपयोगकर्ता ने पेज छोड़ा ही नहीं। AngularJS में भी व्यू और राउट का उपयोग करके यही हासिल किया जाता है।

⚠️ सहायता सूचना: AngularJS पहुँच गया 31 दिसंबर 2021 को उनका निधन हो गया। और इसे कोई और पैच या सुरक्षा सुधार प्राप्त नहीं होता है। नीचे दिया गया निर्देश मौजूदा AngularJS 1.x अनुप्रयोगों को बनाए रखने के लिए सटीक है; आधुनिक कोणीय समतुल्य है <router-outlet>.

दृश्य क्या है?

व्यू वह सामग्री है जो उपयोगकर्ता को दिखाई जाती है। उपयोगकर्ता जो कुछ भी देखना चाहता है, एप्लिकेशन का उससे मेल खाने वाला व्यू प्रदर्शित होता है।

व्यू और रूट को संयोजित करने से एक एप्लिकेशन तार्किक व्यू में विभाजित हो जाता है और प्रत्येक को एक से जोड़ देता है। नियंत्रकजिससे एप्लिकेशन का प्रबंधन अधिक आसान हो जाता है।

मान लीजिए कि एक ऑर्डरिंग एप्लिकेशन है जिसमें ग्राहक ऑर्डर देख सकते हैं और नए ऑर्डर दे सकते हैं। नीचे दिया गया आरेख दर्शाता है कि यह एक सिंगल पेज एप्लिकेशन कैसे बनता है।

दृश्य क्या है?

दो अलग-अलग वेब पेजों के बजाय, एक "ऑर्डर देखें" के लिए और दूसरा "नए ऑर्डर" के लिए, AngularJS एक ही पृष्ठ पर दो दृश्य प्रदर्शित करता है, जिन तक दो संदर्भ लिंक के माध्यम से पहुंचा जा सकता है। #show और #new:

  • के लिए नेविगेट कर रहा है MyApp/#show पेज छोड़े बिना ही 'ऑर्डर देखें' व्यू प्रदर्शित होता है। केवल मौजूदा पेज का वही भाग रीफ्रेश होता है।
  • के लिए नेविगेट कर रहा है MyApp/#new न्यू ऑर्डर्स व्यू के लिए भी यही प्रक्रिया लागू होती है।

किसी एप्लिकेशन को इस तरह से व्यू में विभाजित करने से यह प्रबंधनीय और परिवर्तन करने में आसान रहता है, और प्रत्येक व्यू में उस फ़ंक्शन के लिए व्यावसायिक तर्क रखने वाला एक संबंधित नियंत्रक होता है।

AngularJS में एनजी-व्यू निर्देश

RSI एनजीव्यू निदेश पूरक $route वर्तमान रूट के रेंडर किए गए टेम्पलेट को मुख्य लेआउट फ़ाइल में शामिल करके सेवा प्रदान की जाती है, सामान्यतः index.html.

वर्तमान मार्ग में हर बार परिवर्तन होने पर, उसमें शामिल दृश्य भी उसके अनुसार बदल जाता है। $route पेज को रीलोड किए बिना ही कॉन्फ़िगरेशन किया जा सकता है। मार्गों इन विषयों पर अलग से चर्चा की गई है; यहां मुख्य उद्देश्य एकाधिक दृश्य जोड़ना है।

नीचे दिया गया फ्लोचार्ट पूरी प्रक्रिया को दर्शाता है, जिसे उदाहरण के माध्यम से चरण दर चरण समझाया गया है।

AngularJS में एनजी-व्यू निर्देश

AngularJS में ng-view को कैसे लागू करें

यह उदाहरण उपयोगकर्ता को दो विकल्प प्रदान करता है: एक इवेंट प्रदर्शित करना और एक इवेंट जोड़ना। क्लिक करने पर एक घटना जोड़ें यह ऐड इवेंट व्यू दिखाता है, और डिस्प्ले इवेंट के लिए भी यही बात लागू होती है।

चरण 1) angular-route फ़ाइल को स्क्रिप्ट संदर्भ के रूप में शामिल करें। यह फ़ाइल कई रूट और व्यू का उपयोग करने के लिए आवश्यक है, और AngularJS साइट पर उपलब्ध है।

एंगुलर-रूट फ़ाइल को शामिल करें

चरण 2) href टैग और div टैग जोड़ें।

  1. “Add New Event” और “Display Event” से लिंक करने वाले href टैग जोड़ें।
  2. एक div जोड़ें जिसमें ng-view दृश्य क्षेत्र को चिह्नित करने का निर्देश। जब भी किसी लिंक पर क्लिक किया जाता है, तो संबंधित दृश्य वहां इंजेक्ट किया जाता है।

href टैग और div टैग जोड़ें

चरण 3) AngularJS स्क्रिप्ट टैग में, रूटिंग कॉन्फ़िगरेशन जोड़ें।

  1. जब उपयोगकर्ता क्लिक करता है नई इवैंट लिंक, एंगुलरजेएस लोड होता है add_event.htmlयह अपने मार्कअप को व्यू में इंजेक्ट करता है और इसका उपयोग करता है। AddEventController व्यावसायिक तर्क के लिए।
  2. जब उपयोगकर्ता क्लिक करता है प्रदर्शन घटना लिंक लोड हो रहा है show_event.html और उपयोग करता है ShowDisplayController.
  3. RSI otherwise यह क्लॉज़ उपयोगकर्ता को दिखाई देने वाले डिफ़ॉल्ट दृश्य को सेट करता है, जो यहां DisplayEvent है।

रूटिंग कॉन्फ़िगरेशन

चरण 4) दोनों फंक्शनों के लिए व्यावसायिक तर्क को संसाधित करने हेतु नियंत्रक जोड़ें। प्रत्येक नियंत्रक अपने स्कोप ऑब्जेक्ट पर एक संदेश सेट करता है, जो संबंधित दृश्य प्रदर्शित होने पर दिखाया जाता है।

नियंत्रक जोड़ें

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>
</head>
<body ng-app="sampleApp">

<h1>Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#!/NewEvent">Add New Event</a></li>
        <li><a href="#!/DisplayEvent">Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp', ["ngRoute"]);

    app.config(function($routeProvider) {
        $routeProvider
            .when("/NewEvent", {
                templateUrl: "add_event.html",
                controller: "AddEventController"
            })
            .when("/DisplayEvent", {
                templateUrl: "show_event.html",
                controller: "ShowDisplayController"
            })
            .otherwise({
                redirectTo: '/DisplayEvent'
            });
    });

    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });

    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is to display an Event";
    });
</script>

</body>
</html>

⚠️ मूल सूची में तीन सुधार किए गए हैं। सबसे पहले, लिंक पढ़ें #!NewEvent स्लैश के बिना जबकि मार्गों को इस प्रकार घोषित किया जाता है /NewEventइसलिए कुछ भी मेल नहीं खाया। AngularJS 1.6 से डिफ़ॉल्ट हैश उपसर्ग यह है। !जिससे सही पता बनता है #!/NewEvent — विस्मय चिह्न के बाद एक स्लैश। दूसरा, ShowDisplayController संदेश को “यह एक इवेंट प्रदर्शित कर रहा है” पर सेट करें, जिसमें शब्द गायब है सेवा मेरे कि आसपास के पाठ उद्धरण। तीसरा, lib/bootstrap.js इसे एक ऐसे सापेक्ष पथ से लोड किया गया था जो कहीं भी हल नहीं होता और कभी उपयोग नहीं किया जाता, इसलिए इसे हटा दिया गया है।

मिस न करें:

चरण 5) पेज बनाएं add_event.html और show_event.htmlप्रत्येक में एक हेडर और एक एक्सप्रेशन होता है जो उसके कंट्रोलर द्वारा इंजेक्ट किए गए संदेश को प्रदर्शित करता है।

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

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

आउटपुट:

एनजी-व्यू आउटपुट

एनजी-व्यू आउटपुट

ng-view में आने वाली सामान्य त्रुटियाँ और उन्हें ठीक करने के तरीके

लगभग हर ng-view विफलता मॉड्यूल वायरिंग, एड्रेस फॉर्मेट या पेज को सर्व करने के तरीके के कारण होती है, न कि स्वयं डायरेक्टिव के कारण।

  • दृश्य क्षेत्र खाली रहता है: la ngRoute मॉड्यूल को निर्भरता के रूप में सूचीबद्ध नहीं किया गया था, या angular-route.js लोड नहीं हुआ। दोनों आवश्यक हैं, और स्क्रिप्ट बाद में आनी चाहिए। angular.min.js.
  • लिंक पते को बदल देते हैं लेकिन कुछ भी प्रदर्शित नहीं होता: href रूट से मेल नहीं खाता। AngularJS 1.6 से एड्रेस में बदलाव की आवश्यकता है। #!/Route1.5 के लिए लिखा गया पुराना कोड उपयोग किया गया #/Route.
  • CORS त्रुटि के कारण टेम्पलेट लोड नहीं हो पा रहे हैं: यह पेज सीधे डिस्क से खोला गया था। इसे HTTP पर सर्व करें, क्योंकि templateUrl AJAX अनुरोध के माध्यम से फ़ाइल प्रोटोकॉल ब्लॉकों को फ़ेच किया जाता है।
  • केवल अंतिम दृश्य ही दिखाई देता है: एक से अधिक एलिमेंट ng-view का उपयोग करते हैं। AngularJS प्रति पेज केवल एक व्यू रीजन को ही मान्यता देता है।
  • पहली बार लोड करने पर कुछ भी दिखाई नहीं देता: नहीं otherwise क्लॉज़ को इस प्रकार कॉन्फ़िगर किया गया है कि खाली पता किसी भी रूट से मेल नहीं खाता है।

अक्सर पूछे जाने वाले प्रश्न

नहीं। ngRoute प्रति पृष्ठ केवल एक व्यू रीजन का समर्थन करता है। एक साथ कई नामित रीजन के लिए, ui-router लाइब्रेरी का उपयोग करें, जो ui-view प्रदान करती है और नेस्टेड और सिबलिंग व्यू का समर्थन करती है।

HTML5 मोड को सक्षम करें $locationProvider.html5Mode(true) और एक बेस टैग जोड़ें। सर्वर को अज्ञात पाथ को index.html पर रीराइट करना होगा, अन्यथा रीफ़्रेश करने पर 404 त्रुटि आएगी।

काफी हद तक। AI ये टूल रूट टेबल को एंगुलर रूट्स एरे में परिवर्तित करते हैं और ng-view को router-outlet से बदल देते हैं। कंट्रोलर को अभी भी मैन्युअल रूप से कंपोनेंट के रूप में फिर से लिखना होगा।

एआई सहायक तीन सामान्य संदिग्धों की शीघ्रता से जांच करते हैं: एक गुम हुई ngRoute निर्भरता, एक हैश उपसर्ग जो रूट से मेल नहीं खाता है, और एक टेम्पलेट पथ जिसे ब्राउज़र प्राप्त नहीं कर सकता है।

हाँ। एक जोड़ें resolve रूट में ब्लॉक करें। AngularJS कंट्रोलर को इंस्टैंशिएट करने से पहले उन प्रॉमिस के सेटल होने का इंतजार करता है, जिससे डेटा आने के दौरान व्यू के खाली फ्लैश होने से बचा जा सके।

इस पोस्ट को संक्षेप में इस प्रकार लिखें: