Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Angular 2 में बेसिक रूटिंग कैसे करें

by
Difficulty:IntermediateLength:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Angular 2 के हाल ही के ऑफिशल रिलीज के साथ, कुछ सबसे बड़े बदलावों पर तेजी से काम करने का यह एक अच्छा समय है।

एक चीज जो बहुत बदल गई है वह Angular 2 राउटर है, जिसे पूरी तरह से अंतिम रिलीज तक lead-up में बदल दिया गया था। तो Angular 2 रूटिंग पर मेरे कोर्स से इन दो क्विक वीडियो ट्यूटोरियल में, मैं आपको दिखाऊंगा की रूट कॉन्फ़िगरेशन कैसे बनाएं और उन्हें ऐप में कैसे उपयोग करें। आप आसान रूट, रीडायरेक्टिंग, और वाइल्ड कार्ड रूट्स के बारे में जानेंगे। फिर आप देखेंगे कि रूट्स को प्रदर्शित करने के लिए अपने app कॉम्पोनेंट को कॉन्फ़िगर करने के डायरेक्टिव का उपयोग कैसे करें।

वीडियो कोर्स में पिछले लेसन को फॉलो करते हैं, लेकिन आप हमारे द्वारा उपयोग की जाने वाली टेक्निक को फॉलो करने में सक्षम होने चाहिए। आप GitHub पर पूरे प्रोजेक्ट के लिए सोर्स फाइलें पा सकते हैं।

Angular 2 में रूट कैसे बनाएं

रूटिंग का उपयोग क्यों करें?

रूटीन के बिना Angular 2 मैं एक पूरी app बनाना संभव है। तो अगर हम ऐसा कर सकते हैं, तो हमें रूटीन की जरूरत क्यों है?

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

रूटिंग के साथ, हम URLs स्विच करके नेविगेट करने में सक्षम होंगे। सभी कॉम्पोनेंट एक रूट मैप करेंगे, जिससे हम आसानी से हमारे एप के चारों ओर आ जा सकते हैं।

रूटिंग कैसे सेट करें

सबसे पहले, रूटिंग को कार्य करवाने के लिए, हमें हमारी index.html फाइल के टॉप में बेस href जोड़ने की जरूरत है।

add a base href in the head of our indexhtml file

पहले, हमने उन रूट्स के अंदर हमारे रूट्स को कॉन्फ़िगर किया था जो उन्हें होस्ट करते हैं। इस मामले में, इसका मतलब यह होगा कि हम अपनी app.component दिल में हमारी रूट कंफीग्रेशन जोड़ते हैं। नए राउटर के साथ, यह सुझाव दिया जाता है कि हम एक अलग फाइल में हमारी रूट कंफीग्रेशन बनाते हैं।

app.routes.ts

तो app फोल्डर के रूप में app.routes.ts नाम की एक फाइल बनाएं।

वह पहली चीज जो हम इस फाइल में जोड़ेंगे वह है इंपोर्ट्स।

सबसे पहले, Angular राउटर से provideRouter या RouterConfig को ले। उसके बाद About, Error, और Home कॉम्पोनेंट को pages फोल्डर से इंपोर्ट करें। हमें इन्हें इंपोर्ट करने की जरूरत है ताकि हम इन कॉम्पोनेंट्स पर रूट कर सकें।

Add imports to approutests

वह चीज जो हम करेंगे वह है हमारे राउट्स को होल्ड करने के लिए हमारे रूट कॉन्फ़िग को जोड़ना:

या हम const डिक्लेरेशन का प्रयोग कर रहे हैं। यह उन तरीकों में से है जिनसे हम TypeScript में एक वेरिएबल डिक्लेअर कर सकते हैं, और यह उस वैल्यू को रिप्रेजेंट करता है जिसे बदला नहीं जा सकता। इस केस में, हम इसका प्रयोग हमारे RouterConfig को होल्ड करने के लिए कर रहे हैं।

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

हम आसानी से उस कॉम्पोनेंट को जोड़ सकते हैं जिसे हम अपने app को खाली रूट पर शुरू करना चाहते हैं, लेकिन इसे हैंडल करने का सुझाया गया तरीका रीडायरेक्ट है। रीडायरेक्ट को पहले आना होगा या यह सही से काम नहीं करेगा। यहां है कि यह कैसा दिखता है:

code for the redirect

पहले हमारे पास अपना path है, जो एक खाली रूट है। यह वह रूट है जिसके साथ हमारा app लॉन्च होगा। फिर हमारे पास हमारा रीडायरेक्ट है, जो होम के लिए हमारे रूट को बदल देगा जब यह एक खाली रूट का सामना करेगा। उसके बाद, हमारे पास हमारा pathMatch है। मैं यह कहने के सिवाय बहुत विस्तार से नहीं जाऊंगा कि इससे खाली रूट का रीडायरेक्ट मैच होता है।

फिर हमारे पास हमारा रूट है जो AboutComponent पर पॉइंट करता है। पाथ को ‘about’ पर सेट किया गया है, जिसे हम इस रूट पर जाते समय एड्रेस बार में देखेंगे। कॉम्पोनेंट जो नेविगेट किया जाएगा वह AboutComponent है। उस, हमारे पास HomeComponent है। पाथ ‘home’ है, और लांच करने के लिए कॉम्पोनेंट HomeComponent है।

यह वह रूट है जिसे हम रीडायरेक्ट से नेविगेट करेंगे। फिर हम जो अंतिम रूट जुड़ेंगे वह एक वाइल्डकार्ड रूट है। यह हमारे द्वारा डिफाइन किए गए किसी भी रूट से मेल खाएगा। यही कारण है कि हमने रीडायरेक्ट को भी जोड़ा। यदि हम नहीं करते, तो हमारा app इस रूट पर शुरू होगा क्योंकि हम एक ऐसे रूप से शुरू करते हैं जो डिफाइन नहीं किया गया है, एक खाली रूट है।

रीडायरेक्ट को जोड़ने के बाद, जो भी रूट हम टाइप करते हैं, यदि वह मौजूद नहीं है, हमें हमारा एरर पेज मिलेगा। फिर हां Angular राउटर सेराउटर मेथड का उपयोग करके एक और const एक्सपोर्ट करते हैं। हम उन रूट्स का उपयोग करते हैं जिन्हें हम इस मेथड से कंफीग्र्ड करते हैं।

एक बार जब हम ऐसा कर लेते हैं, तो हमारे रूट समाप्त हो जाते हैं। आखिरी चीज जो हमें करनी है वह है हमारे app में रूटिंग को जोड़ना।

main.ts

main.ts फाइल पर जाएं। इस फाइल में हम जो पहली चीज करेंगे, वह है myRouterProviders द्वारा बनाए गए app रूट्स फाइल से इंपोर्ट करना। फिर हमें इसे अपने बूटस्ट्रैप फंक्शन में जोड़ना होगा। उन्हें यहां जोड़ने से हमारे एप में सभी कॉम्पोनेंट्स को रूट उपलब्ध कराने का लाभ मिलता है।

Adding routing to the app in the maints file

एक बार जब हम ऐसा कर लेते हैं, तो हम अपने रूट को सेटअप कर रहे होते हैं। अगले वीडियो में, हम रूटिंग कंफीग्रेशन पूरा करेंगे और app का प्रीव्यू करेंगे।

Angular 2 में रूट को होस्ट कैसे करें

होस्ट रूट्स के लिए App को कॉन्फ़िगर करना

अब तक, हमने अपने रूट्स को कॉन्फ़िगर किया है और उन्हें हमारे बूटस्ट्रैप फंक्शन में जोड़ा है। अब, हमें अपने रूट्स को होस्ट करने के लिए बस अपने एप्लीकेशन कॉम्पोनेंट को कॉन्फ़िगर करने की जरूरत है।

यहां बताया गया है कि app.component.ts को कैसा दिखना चाहिए:

Code for the file appcomponentts

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

सबसे पहले, हम अपने बूटस्ट्रैप nav bar के लिए एक div जोड़ते हैं। यह nav bar हर पेज पर नजर आएगा, क्योंकि यह टेंप्लेट का हिस्सा है। फिर nav bar के अंदर, हम अपना ब्रांड जोड़ते हैं। ये या इमेज हो सकती है, और यह आपकी app की ब्रांडिंग को रिप्रेजेंट करती है।

फिर हम एक unordered लिस्ट को जोड़ते हैं। अंदर, हम एक nav bar के लिए अपने लिंक को जोड़ेंगे। हमारे लिंक में, नेविगेट करने के लिए URL की बजाय, हमारे पास routerLink है। यह वह तरीका है जिससे हम यूजर इंटरेक्शन के तहत एक रूट पर नेविगेट करते हैं। जब हम इस बटन पर क्लिक करते हैं, तो हम होम रूट पर नेविगेट करने के लिए सेट होते हैं।

हम एक array के अंदर routerLink को दूसरी फॉर्म में भी लिख सकते हैं। हम आमतौर पर ऐसा करते हैं जब हमें अपने रूट के लिए अधिक जानकारी की सप्लाई करने की आवश्यकता होती है। फिर हमारे पास एक routerLinkActive डायरेक्टिव भी है, जो रूट के एक्टिव होने पर मैन्यू क्लास को लिंक पर अप्लाई करेगा। हम इसका उपयोग विजुअल क्यू (cue) को दिखाने के लिए कर रहे हैं कि हम किस पेज पर हैं।

फिर हम एक और राउटरलिंक जोड़ेंगे जो About पेज पर जाता है। फिर हम router-outlet डायरेक्टिव जोड़ेंगे। यही कारण है कि कॉम्पोनेंट को सिलेक्टर की आवश्यकता नहीं है। जब उन्हें रूट करने के लिए लोड किया जाता है तो यह डायरेक्टिव कॉम्पोनेंट्स को होस्ट करेगा। जबकि इस टेंपलेट के बाकी हिस्से हर पेज पर स्टैटिक दिखाई देंगे, router-outlet किस रूट पर नेविगेट किया गया है, इसके आधार पर बदल जाएगा। अंत में इस फाइल के लिए, हम राउटर डायरेक्टिव्स को जोड़ते हैं।

उसके बाद, आखिरी चीज जिसे हमें करने की जरूरत है वह है style.css फाइल में एक CSS नियम को जोड़ना:

यह रूल उस क्लास के लिए है जो राउटर लिंक से जुड़ा रूट एक्टिव होने पर अटैच किया जाएगा। लिंक का बैकग्राउंड का रंग सफेद होगा। और अब, राइटिंग हमारे एप के लिए कॉन्फ़िगर की गई है।

रूटिंग को टेस्ट करें

आगे बढ़े और प्रोजेक्ट को सेव करें और प्रोजेक्ट फोल्डर में npm start को रन करें।

यदि सब कुछ सही ढंग से किया गया हो, तो एप्लीकेशन को कंपाइल करना चाहिए और फिर वेब ब्राउजर से लांच करना चाहिए।

Home page

यदि आप ध्यान दें, होम लिंक बैकग्राउंड को सफेद रंग में shade किया गया है। ऐसा इसलिए है क्योंकि यह एक्टिव रूट है। फिर यदि हम About बटन पर क्लिक करते हैं, तो हमें About पेज पर जाना चाहिए।

About page

उसके बाद, आइए एड्रेस बार में एक रूट टाइप करते हैं जो है ही नहीं। जब हम ऐसा करते हैं, तो हमें एक एरर पेज मिलना चाहिए।

error page

अब हमारे पास app में काम करती हुई रूटिंग है, लेकिन इसके अलावा भी बहुत कुछ है। बाकी कोर्स में, आप बहुत अधिक गहराई से रूटिंग के अंदर जाएंगे।

पूरा कोर्स देखें

पूरे कोर्स में, Angular 2 रूटिंग, मैं आपको सिखाऊंगा कि अपने app में नए Angular 2 राउटर का उपयोग कैसे करें। आप बेसिक राउटिंग को टेक्स्ट पेजेस पर कैसे कंफर्म किया जाए, रूट पाथ से पैरामीटर कैसे निकाले जाएं, और अपने रूटिंग मॉडलर को कैसे बनाएं। आप यह भी देखेंगे कि Angular 2 राउटर के साथ यूजर एक्सेस कंट्रोल कैसे इंप्लीमेंट किया जा सकता है।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.