पैरामीटर के साथ कोणीयजेएस रूटिंग: सिंगल पेज एप्लीकेशन उदाहरण

इससे पहले कि हम रूट करना शुरू करें, चलो बस सिंगल-पेज एप्लिकेशन पर एक त्वरित अवलोकन करें।

सिंगल पेज एप्लीकेशन क्या है?

एकल पृष्ठ अनुप्रयोग या (एसपीए) वे वेब अनुप्रयोग हैं जो एकल HTML पृष्ठ को लोड करते हैं और गतिशील रूप से वेब अनुप्रयोग के साथ उपयोगकर्ता की बातचीत के आधार पर पृष्ठ को अपडेट करते हैं।

AngularJS में रूटिंग क्या है?

AngularJS में, रूटिंग वह है जो आपको सिंगल पेज एप्लिकेशन बनाने की अनुमति देता है।

• AngularJS मार्ग आपको अपने एप्लिकेशन में विभिन्न सामग्री के लिए अलग URL बनाने में सक्षम बनाते हैं।
• AngularJS मार्गों में से एक को कई सामग्री दिखाने की अनुमति मिलती है जिसके आधार पर मार्ग चुना जाता है।
• # साइन के बाद URL में एक रूट निर्दिष्ट किया गया है।

आइए एक साइट का उदाहरण लेते हैं जिसे URL के माध्यम से होस्ट किया जाता है http://example.com/index.html ।

इस पृष्ठ पर, आप अपने आवेदन के मुख्य पृष्ठ की मेजबानी करेंगे। मान लीजिए कि यदि एप्लिकेशन एक ईवेंट आयोजित कर रहा था और कोई यह देखना चाहता था कि डिस्प्ले पर विभिन्न ईवेंट क्या हैं, या किसी विशेष ईवेंट का विवरण देखना चाहते हैं या किसी ईवेंट को हटाना चाहते हैं। एकल पृष्ठ अनुप्रयोग में, जब रूटिंग को सक्षम किया जाता है, तो यह सभी कार्यक्षमता निम्न लिंक के माध्यम से उपलब्ध होगी

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

# प्रतीक का उपयोग विभिन्न मार्गों (ShowEvent, DisplayEvent, और DeleteEvent) के साथ किया जाएगा।

• इसलिए यदि उपयोगकर्ता सभी ईवेंट देखना चाहता था, तो उन्हें लिंक ( http://example.com/index.html#ShowEhu ) पर निर्देशित किया जाएगा , अन्यथा
• यदि वे किसी विशेष घटना को देखना चाहते हैं, तो उन्हें लिंक पर पुनः निर्देशित किया जाएगा ( http://example.com/index.html#DisplayEvent ) या
• यदि वे किसी घटना को हटाना चाहते हैं, तो उन्हें http://example.com/index.html#DeleteEvent लिंक पर निर्देशित किया जाएगा ।

ध्यान दें कि मुख्य URL समान है।

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

• कोणीय मार्ग जोड़ना ($ मार्गप्रोवाइडर)
• एक डिफ़ॉल्ट मार्ग बनाना
• मार्ग से मापदंडों तक पहुंचना
• कोणीय $ मार्ग सेवा का उपयोग करना
• HTML5 रूटिंग को सक्षम करना

कोणीय मार्ग जोड़ना ($ मार्गप्रोवाइडर)

इसलिए जैसा कि हमने पहले चर्चा की थी, AngularJS में मार्गों का उपयोग उपयोगकर्ता को आपके आवेदन के एक अलग दृष्टिकोण के लिए किया जाता है। और यह राउटिंग उसी एचटीएमएल पेज पर की जाती है ताकि यूजर को यह अनुभव हो कि उसने पेज नहीं छोड़ा है।

रूटिंग को लागू करने के लिए किसी भी विशिष्ट क्रम में आपके आवेदन में निम्नलिखित मुख्य चरणों को लागू किया जाना है।

1. कोणीय-मार्ग.जेएस का संदर्भ। यह Google द्वारा विकसित एक जावास्क्रिप्ट फ़ाइल है जिसमें राउटिंग की सभी कार्यक्षमता है। इसे आपके एप्लिकेशन में रखा जाना चाहिए ताकि यह उन सभी मुख्य मॉड्यूलों को संदर्भित कर सके जो रूटिंग के लिए आवश्यक हैं।

2. अगला महत्वपूर्ण कदम यह है कि आपके आवेदन के भीतर से एनकाउंटर मॉड्यूल पर निर्भरता बढ़ाई जाए। इस निर्भरता की आवश्यकता है ताकि रूटिंग कार्यक्षमता का उपयोग अनुप्रयोग के भीतर किया जा सके। यदि यह निर्भरता नहीं जोड़ी जाती है, तो कोई कोणीय.JS एप्लिकेशन के भीतर रूटिंग का उपयोग नहीं कर पाएगा।

   नीचे इस कथन का सामान्य सिंटैक्स दिया गया है। यह एनकाउंटर कीवर्ड के समावेश के साथ मॉड्यूल की एक सामान्य घोषणा है।

var module = angular.module("sampleApp", ['ngRoute']);

3. अगला कदम आपके $ मार्गप्रॉइडर को कॉन्फ़िगर करना होगा। यह आपके आवेदन में विभिन्न मार्गों को प्रदान करने के लिए आवश्यक है।

   नीचे इस कथन का सामान्य वाक्यविन्यास है जो बहुत ही आत्म-व्याख्यात्मक है। यह सिर्फ बताता है कि जब प्रासंगिक पथ चुना जाता है, तो उपयोगकर्ता को दिए गए दृश्य को प्रदर्शित करने के लिए मार्ग का उपयोग करें।

when(path, route)

4. आपके HTML पृष्ठ के भीतर से आपके मार्ग के लिंक। अपने HTML पृष्ठ में, आप अपने आवेदन में विभिन्न उपलब्ध मार्गों के संदर्भ लिंक जोड़ेंगे।

 मार्ग 1 

5. अंत में एनजी-व्यू निर्देश का समावेश होगा, जो सामान्य रूप से एक डिव टैग में होगा। इसका उपयोग संबंधित मार्ग को चुने जाने पर दृश्य की सामग्री को इंजेक्ट करने के लिए किया जाएगा।

अब, उपर्युक्त चरणों का उपयोग करके रूटिंग का एक उदाहरण देखें।

हमारे उदाहरण में,

हम उपयोगकर्ता के लिए 2 लिंक प्रस्तुत करेंगे,

• एक को एंगुलर जेएस कोर्स के लिए विषयों को प्रदर्शित करना है , और दूसरा Node.js कोर्स के लिए है।
• जब उपयोगकर्ता लिंक पर क्लिक करता है, तो उस पाठ्यक्रम के विषय प्रदर्शित किए जाएंगे।

चरण 1) एक स्क्रिप्ट संदर्भ के रूप में कोणीय-मार्ग फ़ाइल शामिल करें।

यह मार्ग फ़ाइल कई मार्गों और विचारों के होने के कार्यों का उपयोग करने के लिए आवश्यक है। इस फाइल को कोणीय.जेएस वेबसाइट से डाउनलोड किया जा सकता है।

चरण 2) href टैग जोड़ें जो "कोणीय जेएस विषय" और "नोड जेएस विषय" के लिंक का प्रतिनिधित्व करेंगे।

Step3) एनजी-व्यू निर्देश के साथ एक div टैग जोड़ें जो दृश्य का प्रतिनिधित्व करेगा।

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

चरण 4) AngularJS के लिए अपने स्क्रिप्ट टैग में, "ngRoute मॉड्यूल" और "$ मार्गप्रोपाइडर" सेवा जोड़ें।

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

1. पहला कदम "एनकाउंटर मॉड्यूल" को शामिल करना सुनिश्चित करना है। इस जगह के साथ, कोणीय अपने आवेदन में मार्ग को स्वचालित रूप से संभाल लेगा। Google द्वारा विकसित ngRoute मॉड्यूल में सभी कार्यक्षमता है जो रूटिंग को संभव बनाने की अनुमति देता है। इस मॉड्यूल को जोड़कर, एप्लिकेशन स्वचालित रूप से सभी रूटिंग कमांड को समझ जाएगा।
2. $ रूपेप्रोइडर एक सेवा है जिसे कोणीय को पृष्ठभूमि में उन मार्गों को सुनने के लिए उपयोग किया जाता है जिन्हें कहा जाता है। इसलिए जब उपयोगकर्ता एक लिंक पर क्लिक करता है, तो राउपरोविडर इसका पता लगाएगा और फिर तय करेगा कि किस मार्ग पर जाना है।
3. कोणीय लिंक के लिए एक मार्ग बनाएं - इस ब्लॉक का अर्थ है कि जब कोणीय लिंक पर क्लिक किया जाता है, तो फाइल कोणीय पृष्ठ पर इंजेक्ट करें और किसी भी व्यावसायिक तर्क को संसाधित करने के लिए नियंत्रक 'AngularController' का भी उपयोग करें।
4. नोड लिंक के लिए एक मार्ग बनाएं - इस ब्लॉक का अर्थ है कि जब नोड लिंक पर क्लिक किया जाता है, तो फाइल को Node.html पर इंजेक्ट करें और किसी भी व्यावसायिक तर्क को संसाधित करने के लिए नियंत्रक 'NodeController' का भी उपयोग करें।

चरण 5) आगे AngularController और NodeController दोनों के लिए व्यावसायिक तर्क को संसाधित करने के लिए नियंत्रकों को जोड़ना है।

प्रत्येक नियंत्रक में, हम प्रत्येक पाठ्यक्रम के लिए विषय के नाम और विवरण को संग्रहीत करने के लिए कुंजी-मान जोड़े का एक सरणी बना रहे हैं। सरणी चर 'ट्यूटोरियल' प्रत्येक नियंत्रक के लिए गुंजाइश ऑब्जेक्ट में जोड़ा जाता है।

Guru99 Global Event


Angular JS Topics
Node JS Topics

चरण 6) Angular.html और Node.html नामक पृष्ठ बनाएँ। प्रत्येक पृष्ठ के लिए हम नीचे दिए गए चरणों को पूरा कर रहे हैं।

ये चरण सुनिश्चित करेंगे कि प्रत्येक पृष्ठ पर सरणी के सभी मुख्य-मूल्य जोड़े प्रदर्शित किए जाएँ।

1. ट्यूटोरियल चर में परिभाषित प्रत्येक कुंजी-मूल्य जोड़ी के माध्यम से जाने के लिए एनजी-दोहराने के निर्देश का उपयोग करना।
2. प्रत्येक कुंजी-मूल्य जोड़ी का नाम और विवरण प्रदर्शित करना।

• Angular.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• नोड। Html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

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

आउटपुट:

यदि आप AngularJS टॉपिक्स लिंक पर क्लिक करते हैं तो नीचे आउटपुट प्रदर्शित होगा।

आउटपुट स्पष्ट रूप से दिखाता है कि,

• जब "कोणीय जेएस विषय" लिंक पर क्लिक किया जाता है, तो हमने अपने कोड में जो रूटप्रोइडर घोषित किया है, वह तय करता है कि कोणीय.html कोड इंजेक्ट किया जाना चाहिए।
• इस कोड को "div" टैग में इंजेक्ट किया जाएगा, जिसमें एनजी-व्यू निर्देश है। इसके अलावा, पाठ्यक्रम विवरण के लिए सामग्री "ट्यूटोरियल चर" से आती है, जो एंगुलरकंट्रोलर में परिभाषित गुंजाइश ऑब्जेक्ट का हिस्सा था।
• जब कोई Node.js विषय पर क्लिक करता है, तो वही परिणाम होगा, और Node.js विषयों के लिए दृश्य प्रकट होगा।
• इसके अलावा, ध्यान दें कि पेज URL समान रहता है, यह केवल # टैग के बाद मार्ग है जो बदलता है। और यह एकल पृष्ठ अनुप्रयोगों की अवधारणा है। URL में #hash टैग एक विभाजक है जो मार्ग को अलग करता है (जो कि हमारे मामले में 'कोणीय' है जैसा कि ऊपर की छवि में दिखाया गया है) और मुख्य HTML पृष्ठ (Sample.html)

एक डिफ़ॉल्ट मार्ग बनाना

AngularJS में रूटिंग से डिफ़ॉल्ट मार्ग होने की सुविधा भी मिलती है। यह वह मार्ग है जिसे मौजूदा मार्ग के लिए कोई मिलान नहीं होने पर चुना जाता है।

डिफ़ॉल्ट मार्ग $ मार्गप्रोपिडर सेवा को परिभाषित करते समय निम्नलिखित शर्त जोड़कर बनाया जाता है।

यदि मौजूदा मार्गों में से कोई भी मेल नहीं खाता है, तो नीचे दिए गए सिंटैक्स का अर्थ बस एक अलग पृष्ठ पर पुनर्निर्देशित करना है।

otherwise ({redirectTo: 'page'});

आइए ऊपर दिए गए एक ही उदाहरण का उपयोग करें और हमारी $ मार्गप्रोपाइडर सेवा में एक डिफ़ॉल्ट मार्ग जोड़ें।

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

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

1. यहाँ हम समान अंतर के साथ उपरोक्त कोड का उपयोग कर रहे हैं, यह है कि हम अन्यथा विवरण और "पुनर्निर्देशन" विकल्प का उपयोग कर रहे हैं यह निर्दिष्ट करने के लिए कि यदि कोई मार्ग निर्दिष्ट नहीं है तो कौन सा दृश्य लोड किया जाना चाहिए। हमारे मामले में हम चाहते हैं कि '/ कोणीय' दृश्य दिखाया जाए।

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

आउटपुट:

आउटपुट से,

• आप स्पष्ट रूप से देख सकते हैं कि दिखाया गया डिफ़ॉल्ट दृश्य कोणीय जेएस दृश्य है।
• ऐसा इसलिए है क्योंकि जब पृष्ठ लोड होता है तो यह $ मार्गप्रोपिडर फ़ंक्शन में 'अन्यथा' विकल्प पर जाता है और '/ कोणीय' दृश्य लोड करता है।

मार्ग से मापदंडों तक पहुंचना

कोणीय भी रूटिंग के दौरान पैरामीटर प्रदान करने के लिए कार्यक्षमता प्रदान करता है। URL में मार्ग के अंत में पैरामीटर जोड़े जाते हैं, उदाहरण के लिए, http: //guru99/index.html#/Angular/1 । इस उदाहरण में

1. , http: //guru99/index.html हमारा मुख्य एप्लिकेशन URL है
2. # प्रतीक मुख्य एप्लिकेशन URL और मार्ग के बीच विभाजक है।
3. कोणीय हमारा मार्ग है
4. और अंत में '1' वह पैरामीटर है जो हमारे रूट में जोड़ा जाता है

URL में पैरामीटर कैसे दिखते हैं, इसका सिंटैक्स नीचे दिखाया गया है:

HTMLPage # / मार्ग / पैरामीटर

यहां आप देखेंगे कि URL में मार्ग के बाद पैरामीटर पारित किया गया है।

तो हमारे उदाहरण में, कोणीय जेएस विषयों के लिए ऊपर, हम नीचे दिखाए गए अनुसार एक पैरामीटर पारित कर सकते हैं

Sample.html # / कोणीय / 1

Sample.html # / कोणीय / 2

Sample.html # / कोणीय / 3

यहां 1, 2 और 3 के पैरामीटर वास्तव में विषय का प्रतिनिधित्व कर सकते हैं।

आइए विस्तार से देखें कि हम इसे कैसे लागू कर सकते हैं।

चरण 1) निम्नलिखित कोड को अपने दृश्य में जोड़ें

1. उपयोगकर्ता को कोणीय जेएस पाठ्यक्रम के सभी विषयों को दिखाने के लिए एक तालिका जोड़ें

2. विषय "नियंत्रकों" को दिखाने के लिए एक तालिका पंक्ति जोड़ें। इस पंक्ति के लिए, href टैग को "कोणीय / 1" में बदलें, जिसका अर्थ है कि जब उपयोगकर्ता इस विषय पर क्लिक करता है, तो पैरामीटर 1 मार्ग के साथ URL में पारित किया जाएगा।

3. "मॉडल" विषय दिखाने के लिए एक तालिका पंक्ति जोड़ें। इस पंक्ति के लिए, href टैग को "कोणीय / 2" में बदलें, जिसका अर्थ है कि जब उपयोगकर्ता इस विषय पर क्लिक करता है, तो पैरामीटर 2 मार्ग के साथ URL में पारित किया जाएगा।

4. "निर्देश" विषय दिखाने के लिए एक तालिका पंक्ति जोड़ें। इस पंक्ति के लिए, href टैग को "कोणीय / 3" में बदलें, जिसका अर्थ है कि जब उपयोगकर्ता इस विषय पर क्लिक करता है, तो पैरामीटर 3 मार्ग के साथ URL में पारित किया जाएगा।

चरण 2) रूटप्रोइडर सेवा फ़ंक्शन में: विषय को यह बताने के लिए जोड़ें कि मार्ग के बाद URL में पारित किसी भी पैरामीटर को चर विषय को सौंपा जाना चाहिए।

चरण 3) नियंत्रक में आवश्यक कोड जोड़ें

1. नियंत्रक फ़ंक्शन को परिभाषित करते समय पैरामीटर के रूप में "$ मार्गप्रेम" को पहले जोड़ना सुनिश्चित करें। इस पैरामीटर में URL में पास किए गए सभी रूट मापदंडों तक पहुंच होगी।
2. "PathParams" पैरामीटर में topicId ऑब्जेक्ट का संदर्भ होता है, जिसे रूट पैरामीटर के रूप में पास किया जाता है। यहाँ हम '$ pathParams.topicId' वैरिएबल को 'स्कोप स्कोप.tutotialid' वैरिएबल के रूप में अपने स्कोप ऑब्जेक्ट में वेरिएबल कर रहे हैं। यह इसलिए किया जा रहा है ताकि इसे ट्यूटोरियल व्यू के माध्यम से हमारे विचार में संदर्भित किया जा सके।

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

चरण 4) Angular.html पेज में ट्यूटोरियल चर को प्रदर्शित करने के लिए अभिव्यक्ति जोड़ें।

Anguler


{{tutorialid}}

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

आउटपुट:

आउटपुट स्क्रीन में,

• यदि आप पहले विषय के लिए टॉपिक विवरण लिंक पर क्लिक करते हैं, तो नंबर 1 URL से जुड़ जाता है।
• इस संख्या को तब Angular.JS रूपेप्रोवाइडर सेवा द्वारा "रूपेपराम" तर्क के रूप में लिया जाएगा और फिर इसे हमारे नियंत्रक द्वारा एक्सेस किया जा सकता है।

कोणीय $ मार्ग सेवा का उपयोग करना

$ मार्ग सेवा आपको मार्ग के गुणों का उपयोग करने की अनुमति देती है। नियंत्रक में फ़ंक्शन को परिभाषित करने पर $ मार्ग सेवा एक पैरामीटर के रूप में उपलब्ध है। नियंत्रक से $ मार्ग पैरामीटर कैसे उपलब्ध है, इसका सामान्य सिंटैक्स नीचे दिखाया गया है;

myApp.controller('MyController',function($scope,$route)

1. myApp आपके अनुप्रयोगों के लिए परिभाषित कोणीय.JS मॉड्यूल है
2. MyController आपके आवेदन के लिए परिभाषित नियंत्रक का नाम है
3. जैसे आपके आवेदन के लिए $ स्कोप वैरिएबल उपलब्ध कराया जाता है, जिसका उपयोग कंट्रोलर से दृश्य को जानकारी देने के लिए किया जाता है। $ मार्ग पैरामीटर का उपयोग मार्ग के गुणों तक पहुंचने के लिए किया जाता है।

आइए नजर डालते हैं कि हम $ मार्ग सेवा का उपयोग कैसे कर सकते हैं।

इस उदाहरण में,

• हम "mytext" नामक एक सरल कस्टम चर बनाने जा रहे हैं, जिसमें स्ट्रिंग शामिल होगी "यह कोणीय है।"
• हम इस चर को हमारे मार्ग में संलग्न करने जा रहे हैं। और बाद में हम $ मार्ग सेवा का उपयोग करके अपने नियंत्रक से इस स्ट्रिंग को एक्सेस करने जा रहे हैं और फिर बाद में गुंजाइश ऑब्जेक्ट का उपयोग करके हमारे विचार में प्रदर्शित करते हैं।

तो, आइए देखें कि इसे हासिल करने के लिए हमें कौन से कदम उठाने होंगे।

चरण 1) मार्ग में एक कस्टम कुंजी-मूल्य जोड़ी जोड़ें। यहां, हम 'mytext' नामक एक कुंजी जोड़ रहे हैं और इसे "यह कोणीय है।"

चरण 2) संबंधित कोड को कंट्रोलर में जोड़ें

1. नियंत्रक फ़ंक्शन में $ मार्ग पैरामीटर जोड़ें। $ मार्ग पैरामीटर कोणीय में परिभाषित एक महत्वपूर्ण पैरामीटर है, जो मार्ग के गुणों को एक्सेस करने की अनुमति देता है।
2. "Mytext" वैरिएबल जो मार्ग में परिभाषित किया गया था, $ मार्ग के माध्यम से पहुँचा जा सकता है। वर्तमान संदर्भ। इसके बाद स्कोप ऑब्जेक्ट के 'टेक्स्ट' वेरिएबल को असाइन किया गया है। पाठ चर फिर तदनुसार दृश्य से पहुँचा जा सकता है।

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

चरण 3) एक अभिव्यक्ति के रूप में गुंजाइश वस्तु से पाठ चर का संदर्भ जोड़ें। यह हमारे Angular.html पेज पर जोड़ा जाएगा जैसा कि नीचे दिखाया गया है।

यह "यह कोणीय है" पाठ को दृश्य में इंजेक्ट करने का कारण होगा। {{Tutorialid}} अभिव्यक्ति वही है जो पिछले विषय में देखा गया है और यह संख्या '1' प्रदर्शित करेगा।

Anguler


{{text}}

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

आउटपुट:

आउटपुट से,

• हम देख सकते हैं कि "यह कोणीय है" पाठ भी प्रदर्शित होता है जब हम तालिका के किसी भी लिंक पर क्लिक करते हैं। विषय आईडी पाठ के समान समय पर भी प्रदर्शित होती है।

HTML5 रूटिंग को सक्षम करना

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

नमूना। Html / कोणीय / १

नमूना। Html / कोणीय / २

नमूना। Html / कोणीय / ३

इस अवधारणा को आम तौर पर उपयोगकर्ता के लिए सुंदर URL के रूप में जाना जाता है।

HTML5 रूटिंग के लिए 2 मुख्य चरण हैं, जिन्हें पूरा करना आवश्यक है।

1. $ लोकपर्व विन्यास कॉन्फ़िगर करना
2. रिश्तेदार लिंक के लिए हमारा आधार निर्धारित करना

आइए विस्तार से देखें कि ऊपर दिए गए चरणों को हमारे उदाहरण में कैसे पूरा किया जाए

चरण 1) संबंधित कोड को कोणीय मॉड्यूल में जोड़ें

1. एप्लिकेशन में निरंतर आधार जोड़ें - यह HTML5 रूटिंग के लिए आवश्यक है ताकि एप्लिकेशन को पता हो कि आवेदन का आधार स्थान क्या है।
2. $ LocationProvider सेवाएँ जोड़ें। यह सेवा आपको html5Mode को परिभाषित करने की अनुमति देती है।
3. सच करने के लिए $ $ locationProvider सेवा का HTML5Mode सेट करें।

चरण 2) URL पढ़ने में आसान बनाने के लिए सभी #tags को लिंक ('Angular / 1', 'Angular / 2', 'Angular / 3') के लिए निकालें।

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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

आउटपुट:

आउटपुट से,

• आप देख सकते हैं कि एप्लिकेशन एक्सेस करते समय # टैग नहीं है।

सारांश

• रूटिंग का उपयोग उपयोगकर्ता को एक ही वेब पेज पर विभिन्न दृश्य प्रस्तुत करने के लिए किया जाता है। यह मूल रूप से एकल पृष्ठ अनुप्रयोगों में उपयोग की जाने वाली अवधारणा है जो लगभग सभी आधुनिक दिन वेब अनुप्रयोगों के लिए कार्यान्वित की जाती है
• एक डिफ़ॉल्ट मार्ग कोणीय.जेएस मार्ग के लिए सेट-अप किया जा सकता है। इसका उपयोग यह निर्धारित करने के लिए किया जाता है कि उपयोगकर्ता को दिखाया जाने वाला डिफ़ॉल्ट दृश्य क्या होगा
• पैरामीटर्स को रूट पैरामीटर के रूप में URL के माध्यम से मार्ग में भेजा जा सकता है। इन मापदंडों को बाद में नियंत्रक में $ मार्गप्रेम पैरामीटर का उपयोग करके एक्सेस किया जाता है
• $ मार्ग सेवा का उपयोग उस रूट में कस्टम की-वैल्यू पेयर को परिभाषित करने के लिए किया जा सकता है जिसे बाद में दृश्य के भीतर से एक्सेस किया जा सकता है
• HTML5 रूटिंग का उपयोग कोणीय में # URL को रूट करने से सुंदर URL बनाने के लिए किया जाता है