कोणीय मूल बातें: रूटिंग कैसे जोड़ें

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

फिर आप एंकर टैग का उपयोग करके HTML फ़ाइल के अन्य पृष्ठों पर रूट कर सकते हैं। आप राउटर.नेविगेट () पद्धति का उपयोग करके टाइपस्क्रिप्ट फ़ाइल के भीतर अन्य पृष्ठों पर भी रूट कर सकते हैं।

कोणीय अनुप्रयोग में एक नया पृष्ठ कैसे बनाएं

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

1. अपने कोणीय ऐप में एक नया घटक बनाएं का उपयोग एनजी उत्पन्न घटक आज्ञा:

   एनजी घटक घर उत्पन्न करें

2. खोलें src/app/home/home.component.html फ़ाइल, और वर्तमान सामग्री को नई सामग्री से बदलें।

   <डिव क्लास ="विषय">
   <एच 2> घर </h2>
   <पी>
    मैं एक फोटोग्राफर हूं जो शादी की फोटोग्राफी करता है। मेरी परियोजनाओं की जाँच करें!
   </पी>
   <डिव क्लास ="कार्ड">
   <एच 4
   
   
   
   
   
   instagram viewer
   
   > जॉन & एमी </h4>
   <पी> ब्लू माउंटेन, ऑस्ट्रेलिया </पी>
   </div>
   <डिव क्लास ="कार्ड">
   <एच 4> रॉस & तक वहां पहुंच </h4>
   <पी> हंटर वैली गार्डन, ऑस्ट्रेलिया </पी>
   </div>
   </div>

3. आबाद करें src/app/home/home.component.css HTML सामग्री के लिए स्टाइल के साथ फ़ाइल।

   ।विषय {
   ऊंची लाईन: 2रेमो;
   फ़ॉन्ट आकार: 1.2em;
   }
   कार्ड {
   डब्बे की छाया: 0 4पिक्सल 8पिक्सल 0 आरजीबीए(0, 0, 0, 0.2);
   चौड़ाई: 400पिक्सल;
   गद्दी: 16पिक्सल;
   अंतर: 24पिक्सल 0पिक्सल;
   पीछे का रंग: सफेद धुआं;
   फ़ॉन्ट परिवार: सान्स सेरिफ़;
   }

4. का उपयोग करके एक और घटक बनाएं एनजी उत्पन्न घटक टर्मिनल में कमांड। आप एक संक्षिप्त पृष्ठ के रूप में नए घटक का उपयोग करेंगे।

   एनजी उत्पन्न घटक के बारे में

5. खोलें src/app/about/about.component.html फ़ाइल, और वर्तमान सामग्री को नई सामग्री से बदलें।

   <डिव क्लास ="विषय">
   <एच 2> मेरे बारे में </h2>
   <पी>
    मैं'एम जॉन, और मुझे तस्वीरें लेना पसंद है। मैं 25 से अधिक वर्षों से तस्वीरें ले रहा हूं। मेरे सोशल मीडिया पर मुझसे मिलें:
   </पी>
   <एक href=""> फेसबुक </एक><बीआर>
   <एक href=""> लिंक्डइन </एक><बीआर>
   <एक href=""> instagram </एक><बीआर>
   </div>
   

6. आबाद करें src/app/about/about.component.css HTML सामग्री के लिए स्टाइल के साथ फ़ाइल।

   ।विषय {
   ऊंची लाईन: 2रेमो;
   फ़ॉन्ट आकार: 1.2em;
   }
   

दो पेजों के बीच नेविगेट कैसे करें

आप एक पृष्ठ से दूसरे पृष्ठ पर नेविगेट करने के लिए रूटिंग का उपयोग कर सकते हैं। आप इसे रूटिंग फ़ाइल में कॉन्फ़िगर कर सकते हैं। इस उदाहरण में पूरे ऐप के लिए एक रूटिंग फ़ाइल होगी, जो में स्थित है src/app/app-routing.module.ts.

1. यदि आपके ऐप में पहले से ऐप-रूटिंग मॉड्यूल फ़ाइल नहीं है, तो आप इसका उपयोग करके एक फ़ाइल जेनरेट कर सकते हैं एनजी जनरेट मॉड्यूल आज्ञा। कमांड लाइन या टर्मिनल में, एप्लिकेशन के रूट फ़ोल्डर में नेविगेट करें और निम्न कमांड चलाएँ:

   एनजी जनरेट मॉड्यूल ऐप-रूटिंग --मॉड्यूल ऐप --फ्लैट

2. यह आपके में एक app-routing.module.ts फ़ाइल बनाएगा src/app फ़ोल्डर।
3. फ़ाइल के शीर्ष पर, होम और अबाउट घटकों के लिए अतिरिक्त आयात जोड़ें। सुनिश्चित करें कि आप राउटर मॉड्यूल और कॉमन मॉड्यूल भी आयात करते हैं; अंत में, आपके आयात विवरण इस तरह दिखने चाहिए:

   आयात { सामान्य मॉड्यूल } से '@ कोणीय/सामान्य';
   आयात { रूट, राउटर मॉड्यूल } से '@ कोणीय/राउटर';
   आयात {होमकंपोनेंट} से './home/home.component';
   आयात { के बारे में कॉम्पोनेंट } से './about/about.component'; 

4. आयात के नीचे, उन पथों को संग्रहीत करने के लिए एक नया मार्ग सरणी जोड़ें, जिनका उपयोग आप प्रत्येक पृष्ठ पर रूट करते समय करेंगे।

   स्थिरांक मार्ग: मार्ग = [
    { रास्ता: '', अवयव: होमकंपोनेंट},
    { रास्ता: 'के बारे में', अवयव: घटक के बारे में }
   ];

5. NgModule ब्लॉक को निम्न के साथ बदलें, जो राउटर मॉड्यूल को आयात और निर्यात सरणी में जोड़ता है।

   @NgModule({
    घोषणाएं: [],
    आयात: [
    कॉमनमॉड्यूल,
    राउटर मॉड्यूल। रूट के लिए (मार्ग)
    ],
    निर्यात: [राउटरमॉड्यूल]
   })

6. में src/app/app.component.html फ़ाइल, वर्तमान सामग्री को हटा दें, और राउटर-आउटलेट टैग जोड़ें।

   <डिव क्लास ="पात्र">
   <राउटर-आउटलेट></router-outlet>
   </div>
   

HTML फ़ाइल में नए पृष्ठ पर कैसे नेविगेट करें

किसी HTML फ़ाइल में किसी पृष्ठ पर नेविगेट करने के लिए, एंकर टैग का उपयोग करें। href विशेषता में, वह पथ जोड़ें जिसे आपने मार्ग सरणी में निर्दिष्ट किया है।

1. में src/app/app.component.html फ़ाइल, कंटेनर div से पहले दो एंकर टैग जोड़ें। यह आपको होम और अबाउट पेजों के बीच नेविगेट करने की अनुमति देगा।

   <डिव क्लास ="नेवबार">
   <एक वर्ग ="संपर्क" href="">घर</एक>
   <एक वर्ग ="संपर्क" href="/about">के बारे में</एक>
   </div>
   

2. इसमें कुछ स्टाइल जोड़ें src/app/app.component.css फ़ाइल।

   कंटेनर {
   अंतर: 48पिक्सल 35%;
   फ़ॉन्ट परिवार: &उद्धरण;एरियल&उद्धरण;, सान्स सेरिफ़;
   दिखाना: मोड़ना;
   फ्लेक्स-दिशा: कॉलम;
   संरेखित-आइटम: केंद्र;
   }
   .नवबार {
   पीछे का रंग: डार्कस्लेटग्रे;
   गद्दी: 30पिक्सल 50पिक्सल;
   दिखाना: मोड़ना;
   संरेखित-आइटम: केंद्र;
   फ़ॉन्ट परिवार: सान्स सेरिफ़;
   }
   ।संपर्क:फर्स्ट-ऑफ़-टाइप {
   मार्जिन-सही: 32पिक्सल;
   }
   ।संपर्क {
   रंग: सफेद;
   text-decoration: कोई भी नहीं;
   फ़ॉन्ट आकार: 14पीटीई;
   फ़ॉन्ट वजन: साहसिक;
   }
   

3. समग्र पृष्ठ मार्जिन में कुछ स्टाइल जोड़ें src/styles.css.

   तन {
   अंतर: 0;
   गद्दी: 0;
   }

4. कमांड प्रॉम्प्ट या टर्मिनल में, एंगुलर एप्लिकेशन के रूट फ़ोल्डर में नेविगेट करें। का उपयोग करके एप्लिकेशन चलाएँ एनजी सर्व कमांड, और इसके संकलन समाप्त होने की प्रतीक्षा करें।

   एनजी सर्व

5. एक ब्राउज़र में, अपना एप्लिकेशन देखने के लिए URL बार में localhostURL टाइप करें। डिफ़ॉल्ट रूप से, यह आमतौर पर होता है http://localhost: 4200/.
6. आपकी वेबसाइट होम पेज पर लोड होगी।
7. आप नेविगेशन बार में अबाउट लिंक पर क्लिक करके अबाउट पेज पर जा सकते हैं।

टाइपस्क्रिप्ट फ़ाइल में नए पृष्ठ पर कैसे नेविगेट करें

अब तक, यह डेमो नेविगेशन प्रदान करने के लिए मानक HTML लिंक का उपयोग करता है। HTML फ़ाइल के बजाय टाइपस्क्रिप्ट फ़ाइल का उपयोग करके नेविगेट करने के लिए, आप उपयोग कर सकते हैं राउटर.नेविगेट ().

1. में src/app/app.component.html फ़ाइल, एंकर टैग हटा दें और उन्हें बटन टैग से बदलें। इन बटनों में एक क्लिक ईवेंट होगा जो क्लिकबटन () नामक फ़ंक्शन को ट्रिगर करता है। जब आप क्लिकबटन () फ़ंक्शन को कॉल करते हैं, तो URL मार्ग पथ को तर्क के रूप में जोड़ें।

   <बटन वर्ग ="संपर्क" (क्लिक करें)="क्लिकबटन('')">घर</button>
   <बटन वर्ग ="संपर्क" (क्लिक करें)="क्लिकबटन('/about')">के बारे में</button>
   

2. बटन में कुछ स्टाइल जोड़ें src/app/app.component.css फ़ाइल।

   बटन {
   पीछे का रंग: काला;
   गद्दी: 4पिक्सल 8पिक्सल;
   कर्सर: सूचक;
   }

3. के शीर्ष पर src/app/app.component.ts फ़ाइल, राउटर आयात करें।

   आयात {राउटर} से '@ कोणीय/राउटर'; 

4. AppComponent वर्ग के अंदर एक नया कंस्ट्रक्टर जोड़ें, और राउटर को मापदंडों के भीतर इंजेक्ट करें।

   निर्माता(निजी राउटर: राउटर) {
   }

5. कंस्ट्रक्टर के नीचे, क्लिकबटन () नामक एक नया फ़ंक्शन बनाएं, जो आपके द्वारा पास किए गए URL के आधार पर नए पृष्ठ पर नेविगेट करेगा।

   क्लिक बटन (पथ: स्ट्रिंग) {
   यह.राउटर.नेविगेट ([पथ]);
   } 

   ​​​​​​
6. कमांड प्रॉम्प्ट या टर्मिनल में एनजी सर्व कमांड को फिर से चलाएँ।

   एनजी सर्व

7. एक ब्राउज़र में अपनी वेबसाइट पर नेविगेट करें। href को अब दो बटनों से बदल दिया गया है।
8. पर क्लिक करें के बारे में बटन। यह अबाउट पेज पर जाएगा।

कोणीय अनुप्रयोग में एकाधिक पृष्ठ बनाना

आप रूटिंग का उपयोग करके कोणीय एप्लिकेशन के भीतर कई पृष्ठों के बीच रूट कर सकते हैं। यदि आपके पास प्रत्येक पृष्ठ के लिए अलग-अलग घटक हैं, तो आप रूटिंग मॉड्यूल के भीतर अपने मार्गों के लिए पथ कॉन्फ़िगर कर सकते हैं।

किसी HTML फ़ाइल के माध्यम से किसी अन्य पृष्ठ पर नेविगेट करने के लिए, उस पृष्ठ के रूटिंग पथ के रूप में href विशेषता वाले एंकर टैग का उपयोग करें। टाइपस्क्रिप्ट फ़ाइल के माध्यम से किसी अन्य पृष्ठ पर नेविगेट करने के लिए, आप राउटर.नेविगेट () विधि का उपयोग कर सकते हैं।

यदि आप एक कोणीय अनुप्रयोग बना रहे हैं, तो आप कोणीय निर्देशों का उपयोग कर सकते हैं। ये आपको किसी घटक की HTML फ़ाइल के भीतर गतिशील if-statement, for-loops, या अन्य तार्किक संचालन का उपयोग करने की अनुमति देते हैं।