AngularJS ng-view उदाहरण के साथ: दृश्य को कैसे लागू करें
जेम्स हार्टमैन
आजकल, हर किसी ने "सिंगल पेज एप्लीकेशन" के बारे में सुना होगा। जीमेल जैसी कई प्रसिद्ध वेबसाइट सिंगल पेज एप्लीकेशन (एसपीए) की अवधारणा का उपयोग करती हैं।
एसपीए वह अवधारणा है जिसमें जब कोई उपयोगकर्ता किसी भिन्न पृष्ठ के लिए अनुरोध करता है, तो एप्लीकेशन उस पृष्ठ पर नहीं जाएगा, बल्कि मौजूदा पृष्ठ के भीतर ही नए पृष्ठ का दृश्य प्रदर्शित करेगा।
यह उपयोगकर्ता को यह एहसास दिलाता है कि उसने पहले कभी पेज छोड़ा ही नहीं था। यही काम एंगुलर में रूट्स के साथ व्यूज़ की मदद से हासिल किया जा सकता है।
इस ट्यूटोरियल में आप सीखेंगे-
- दृश्य क्या है?
- AngularJS में एनजी-व्यू निर्देश
- उदाहरण के साथ AngularJS में ng-view को कैसे लागू करें
दृश्य क्या है?
दृश्य वह सामग्री है जो उपयोगकर्ता को दिखाई जाती है। मूल रूप से उपयोगकर्ता जो देखना चाहता है, उसके अनुसार ही एप्लिकेशन का वह दृश्य उपयोगकर्ता को दिखाया जाएगा।
दृश्यों और रूट्स का संयोजन किसी एप्लिकेशन को तार्किक दृश्यों में विभाजित करने और विभिन्न दृश्यों को नियंत्रकों से जोड़ने में मदद करता है।
एप्लिकेशन को विभिन्न दृश्यों में विभाजित करना और एप्लिकेशन के विभिन्न भागों को लोड करने के लिए रूटिंग का उपयोग करना, एप्लिकेशन को तार्किक रूप से विभाजित करने और इसे अधिक प्रबंधनीय बनाने में मदद करता है।
मान लीजिए कि हमारे पास एक ऑर्डरिंग एप्लीकेशन है, जिसमें ग्राहक ऑर्डर देख सकता है और नए ऑर्डर दे सकता है।
नीचे दिया गया चित्र और अनुवर्ती स्पष्टीकरण यह दर्शाता है कि इस एप्लिकेशन को एकल पृष्ठ एप्लिकेशन के रूप में कैसे बनाया जाए।
अब, दो अलग-अलग वेब पेजों के बजाय, एक “ऑर्डर देखें” और दूसरा “नए ऑर्डर” के लिए, AngularJS, तो आप एक ही पृष्ठ पर “ऑर्डर देखें” और “नए ऑर्डर” नामक दो अलग-अलग दृश्य बनाएँगे।
हमारे एप्लिकेशन में #show और #new नामक दो संदर्भ लिंक भी होंगे।
- इसलिए जब एप्लिकेशन MyApp/#show पर जाता है, तो यह View Orders का दृश्य दिखाएगा, साथ ही यह पेज को नहीं छोड़ेगा। यह केवल मौजूदा पेज के सेक्शन को “View Orders” की जानकारी के साथ रिफ्रेश करेगा। यही बात “New Orders” दृश्य के लिए भी लागू होती है।
इस तरह से एप्लिकेशन को अलग-अलग दृश्यों में विभाजित करना सरल हो जाता है, जिससे इसे अधिक प्रबंधनीय बनाया जा सके और आवश्यकता पड़ने पर इसमें परिवर्तन करना आसान हो जाए।
और प्रत्येक दृश्य में उस कार्यक्षमता के लिए व्यावसायिक तर्क को नियंत्रित करने हेतु एक संगत नियंत्रक होगा।
AngularJS में एनजी-व्यू निर्देश
"ngView" एक निर्देश है जो मुख्य लेआउट (index.html) फ़ाइल में वर्तमान रूट के रेंडर किए गए टेम्पलेट को शामिल करके $route सेवा को पूरक बनाता है।
प्रत्येक बार जब वर्तमान मार्ग परिवर्तित होता है, तो दृश्य में पृष्ठ को बदले बिना $route सेवा की कॉन्फ़िगरेशन के अनुसार इसमें परिवर्तन शामिल हो जाता है।
हम कवर करेंगे मार्गों अगले अध्याय में, फिलहाल, हम अपने अनुप्रयोग में एकाधिक दृश्य जोड़ने पर ध्यान केन्द्रित करेंगे।
नीचे संपूर्ण प्रक्रिया कैसे काम करती है इसका पूरा फ़्लोचार्ट दिया गया है। हम नीचे दिखाए गए हमारे उदाहरण में प्रत्येक प्रक्रिया के बारे में विस्तार से जानेंगे।
AngularJS में ng-view को कैसे लागू करें
आइए एक उदाहरण पर नज़र डालें कि हम AngularJS में ng-view को कैसे लागू कर सकते हैं। हमारे उदाहरण में, हम उपयोगकर्ता के सामने दो विकल्प प्रस्तुत करने जा रहे हैं,
- एक है “ईवेंट” प्रदर्शित करना, और दूसरा है “ईवेंट” जोड़ना।
- जब उपयोगकर्ता 'ईवेंट जोड़ें' लिंक पर क्लिक करता है, तो उसे 'ईवेंट जोड़ें' का दृश्य दिखाया जाएगा और यही बात 'ईवेंट प्रदर्शित करें' के लिए भी लागू होती है।
कृपया इस उदाहरण को लागू करने के लिए नीचे दिए गए चरणों का पालन करें।
चरण 1) स्क्रिप्ट संदर्भ के रूप में कोणीय-मार्ग फ़ाइल को शामिल करें।
कई रूट और व्यू की कार्यक्षमता का उपयोग करने के लिए यह रूट फ़ाइल आवश्यक है। इस फ़ाइल को एंगुलरजेएस वेबसाइट से डाउनलोड किया जा सकता है।
चरण 2) href टैग और div टैग जोड़ें.
इस चरण में,
- href टैग जोड़ें जो “नया ईवेंट जोड़ना” और “ईवेंट प्रदर्शित करना” के लिंक का प्रतिनिधित्व करेंगे।
- इसके अलावा, ng-view निर्देश के साथ एक div टैग जोड़ें जो दृश्य का प्रतिनिधित्व करेगा। यह जब भी उपयोगकर्ता “नया ईवेंट जोड़ें लिंक” या “ईवेंट प्रदर्शित करें लिंक” पर क्लिक करेगा, तो संबंधित दृश्य को इंजेक्ट करने की अनुमति देगा।
चरण 3) Angular JS के लिए अपने स्क्रिप्ट टैग में निम्नलिखित कोड जोड़ें।
अभी हम रूटिंग के बारे में चिंता नहीं करते, हम इसे अगले अध्याय में देखेंगे। अभी हम सिर्फ़ व्यूज़ के लिए कोड देखते हैं।
- कोड के इस भाग का अर्थ है कि जब उपयोगकर्ता href टैग “NewEvent” पर क्लिक करता है जिसे पहले div टैग में परिभाषित किया गया था। यह वेब पेज add_event.html पर जाएगा, और वहां से कोड लेकर उसे व्यू में इंजेक्ट करेगा। दूसरे, इस व्यू के लिए व्यावसायिक तर्क को संसाधित करने के लिए, “AddEventController” पर जाएँ।
- कोड के इस भाग का अर्थ है कि जब उपयोगकर्ता href टैग “DisplayEvent” पर क्लिक करता है जिसे पहले div टैग में परिभाषित किया गया था। यह वेब पेज show_event.html पर जाएगा, वहां से कोड लेगा और इसे दृश्य में इंजेक्ट करेगा। दूसरे, इस दृश्य के लिए व्यावसायिक तर्क को संसाधित करने के लिए, “ShowDisplayController” पर जाएँ।
- कोड के इस भाग का अर्थ है कि उपयोगकर्ता को दिखाया जाने वाला डिफ़ॉल्ट दृश्य DisplayEvent दृश्य है
चरण 4) व्यावसायिक तर्क को संसाधित करने के लिए नियंत्रक जोड़ें.
अगला कदम "डिस्प्लेइवेंट" और "नया इवेंट जोड़ें" कार्यक्षमता दोनों के लिए व्यावसायिक तर्क को संसाधित करने के लिए नियंत्रकों को जोड़ना है।
हम बस प्रत्येक नियंत्रक के लिए प्रत्येक स्कोप ऑब्जेक्ट में एक संदेश चर जोड़ रहे हैं। यह संदेश तब प्रदर्शित होगा जब उपयोगकर्ता को उचित दृश्य दिखाया जाएगा।
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="lib/bootstrap.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 display an Event";
});
</script>
</body>
</html>
चरण 5) add_event.html और show_event.html नामक पेज बनाएं
इसके बाद, add_event.html और show_event.html नामक पेज बनाएँ। पेज को सरल रखें, जैसा कि नीचे दिखाया गया है।
हमारे मामले में, add_event.html पृष्ठ में “नया ईवेंट जोड़ें” पाठ के साथ एक हेडर टैग होगा और “यह एक नया ईवेंट जोड़ने के लिए है” संदेश प्रदर्शित करने के लिए एक अभिव्यक्ति होगी।
इसी तरह, show_event.html पृष्ठ में भी “इवेंट दिखाएँ” पाठ रखने के लिए एक हेडर टैग होगा और इसमें “यह एक इवेंट प्रदर्शित करने के लिए है” संदेश प्रदर्शित करने के लिए एक संदेश अभिव्यक्ति भी होगी।
संदेश चर का मान उस नियंत्रक के आधार पर इंजेक्ट किया जाएगा जो दृश्य से जुड़ा हुआ है।
प्रत्येक पृष्ठ के लिए, हम message variable जोड़ने जा रहे हैं, जिसे प्रत्येक संबंधित नियंत्रक से इंजेक्ट किया जाएगा।
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से हम 2 बातें नोटिस कर सकते हैं
- पता बार यह दर्शाएगा कि वर्तमान में क्या दृश्य प्रदर्शित किया जा रहा है। इसलिए चूँकि डिफ़ॉल्ट दृश्य शो इवेंट स्क्रीन दिखाना है, इसलिए पता बार "डिस्प्लेइवेंट" के लिए पता दिखाता है।
- यह अनुभाग दृश्य है, जो तुरंत बनाया जाता है। चूंकि डिफ़ॉल्ट दृश्य शो इवेंट वाला होता है, इसलिए उपयोगकर्ता को यही दिखाया जाता है।
अब प्रदर्शित पेज में Add New Event लिंक पर क्लिक करें। अब आपको नीचे दिया गया आउटपुट मिलेगा।
आउटपुट:
- अब पता बार में यह दर्शाया जाएगा कि वर्तमान दृश्य अब “नया ईवेंट जोड़ें” दृश्य है। ध्यान दें कि आप अभी भी उसी आवेदन पृष्ठ पर होंगे। आपको किसी नए आवेदन पृष्ठ पर निर्देशित नहीं किया जाएगा।
- यह अनुभाग दृश्य है, और यह अब परिवर्तित होकर दृश्य दिखाएगा एचटीएमएल “नया ईवेंट जोड़ें” कार्यक्षमता के लिए। तो अब इस अनुभाग में हेडर टैग “नया ईवेंट जोड़ें” और टेक्स्ट “यह एक नया ईवेंट जोड़ने के लिए है” उपयोगकर्ता को प्रदर्शित किया जाता है।
