Angular में TemplateUrls और StyleUrls क्या हैं?

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं।

कोणीय का उपयोग करके, आप अपने ऐप के पृष्ठों, संवादों या अन्य अनुभागों को घटकों में अलग कर सकते हैं। एक कोणीय अनुप्रयोग में घटक मुख्य रूप से HTML, CSS और टाइपस्क्रिप्ट फ़ाइलों से बने होते हैं।

टाइपस्क्रिप्ट फ़ाइल में, आप यूआई के काम करने के लिए आवश्यक कोई भी तर्क जोड़ सकते हैं, जैसे सर्वर से डेटा पुनर्प्राप्त करना।

आप इसके टेम्पलेट और शैली विशेषताओं को निर्दिष्ट करके, टाइपस्क्रिप्ट का उपयोग करके घटक के HTML और CSS को भी प्रस्तुत कर सकते हैं। आप बाहरी HTML या CSS फ़ाइलों से लिंक करने के लिए TemplateUrl या StyleUrls का उपयोग कर सकते हैं।

Angular में Template और TemplateUrl क्या है?

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

• आप अपने HTML कोड को टाइपस्क्रिप्ट फ़ाइल में ही टेम्पलेट के अंदर लिख सकते हैं।
instagram viewer
• आप अपना HTML कोड एक बाहरी फ़ाइल में लिख सकते हैं, और टाइपस्क्रिप्ट फ़ाइल को इस HTML फ़ाइल से लिंक कर सकते हैं।

एक नए घटक में, आप या तो "टेम्प्लेट" या "टेम्प्लेटयूआरएल" एट्रिब्यूट सेट कर सकते हैं, जो इस बात पर निर्भर करता है कि आप अपना एचटीएमएल कहां लिखते हैं।

1. एक बनाने के नया कोणीय ऐप.
2. अपने एप्लिकेशन के टर्मिनल में, चलाएँ एनजी घटक उत्पन्न करता है एक नया घटक बनाने की आज्ञा। नए घटक को "अबाउट-पेज" कहें।

   एनजी घटक के बारे में पृष्ठ उत्पन्न करता है

3. में app.component.html, अपने नए घटक के लिए वर्तमान कोड को टैग से बदलें:

   <ऐप-अबाउट-पेज></app-about-page>

4. खोलें के बारे में-page.component.ts फ़ाइल। यदि आपके पास बहुत अधिक HTML कोड नहीं है, तो आप इसे सीधे टाइपस्क्रिप्ट फ़ाइल के अंदर लिखने के लिए टेम्पलेट विशेषता का उपयोग कर सकते हैं। @Component डेकोरेटर को निम्नलिखित से बदलें:

   @अवयव({
    चयनकर्ता: 'ऐप-अबाउट-पेज',
    साँचा: '<एच 2>पेज के बारे में</h2><बीआर><पी>यह HTML को टाइपस्क्रिप्ट फ़ाइल से प्रतिपादित कर रहा है!</पी>'
   })
   

5. यदि आप बहु-पंक्ति वाले टेम्पलेट को शामिल करना चाहते हैं, तो आप इसके बजाय बैक-टिक उद्धरण चिह्नों का उपयोग कर सकते हैं:

   @अवयव({
    चयनकर्ता: 'ऐप-अबाउट-पेज',
    टेम्पलेट: `<एच 2>पेज के बारे में</h2>
   <बीआर>
   <पी>यह HTML को टाइपस्क्रिप्ट फ़ाइल से प्रतिपादित कर रहा है!</पी>`
   })

6. टर्मिनल में टाइप करें एनजी सेवा अपने कोड को संकलित करने और इसे वेब ब्राउज़र में चलाने के लिए। पर अपना ऐप खोलें http://localhost: 4200/. टाइपस्क्रिप्ट फ़ाइल से आपका HTML कोड पेज पर प्रदर्शित होगा।
7. में के बारे में-page.component.ts, इसके बजाय "टेम्प्लेट" को "टेम्प्लेटयूआरएल" से बदलें। घटक की बाहरी HTML फ़ाइल का लिंक शामिल करें। यदि आपके पास अधिक जटिल HTML कोड है जिसके लिए स्वयं की फ़ाइल की आवश्यकता है, तो आप "templateUrl" का उपयोग कर सकते हैं।

   @अवयव({
    चयनकर्ता: 'ऐप-अबाउट-पेज',
    टेम्पलेट यूआरएल: './about-page.component.html'
   })

8. इसमें कुछ HTML कोड जोड़ें के बारे में-page.component.html फ़ाइल:

   <एच 2>पेज के बारे में</h2>
   <पी>यह HTML फ़ाइल से HTML का प्रतिपादन कर रहा है!</पी>

9. अपने ब्राउज़र पर वापस जाएं या फिर से चलाएं एनजी सेवा अपने कोड को दोबारा संकलित करने के लिए। पर अपना ऐप खोलें http://localhost: 4200/. ब्राउज़र अब से HTML को रेंडर करता है के बारे में-page.component.html फ़ाइल।

Angular में Styles और StyleUrls क्या हैं?

एचटीएमएल के समान, आप अपने सीएसएस को स्टोर करने के लिए चुने गए स्थान के आधार पर या तो "शैली" या "शैली यूआरएल" का उपयोग कर सकते हैं।

यदि आपके पास बहुत ही सरल CSS घोषणाएँ हैं, तो आप टाइपस्क्रिप्ट कोड में CSS शामिल कर सकते हैं। अन्यथा, आप टाइपस्क्रिप्ट फ़ाइल को बाहरी CSS से लिंक करने के लिए "styleUrls" का उपयोग कर सकते हैं जिसमें अधिक शैलियाँ हैं।

1. अपने पहले बनाए गए एंगुलर एप्लिकेशन में, खोलें के बारे में-page.component.ts फ़ाइल। घटक में "शैलियां" विशेषता जोड़ें। "शैलियों" के अंदर, पेज के लिए अपनी CSS स्टाइलिंग जोड़ें:

   @अवयव({
    चयनकर्ता: 'ऐप-अबाउट-पेज',
    टेम्पलेट यूआरएल: './about-page.component.html',
    शैलियाँ: ['h2 {रंग: लाल}','पी {रंग: हरा}']
   })

2. टर्मिनल में टाइप करें एनजी सेवा अपने कोड को संकलित करने और इसे वेब ब्राउज़र में चलाने के लिए। पर अपना ऐप खोलें http://localhost: टाइपस्क्रिप्ट फ़ाइल में निर्दिष्ट स्टाइल को देखने के लिए 4200/।
3. यदि आपके पास बहुत सी सीएसएस है, तो टाइपस्क्रिप्ट फ़ाइल को बाहरी सीएसएस फ़ाइल से लिंक करने के लिए "शैलियों" के बजाय "styleUrls" का उपयोग करें। में के बारे में-page.component.ts, @Component डेकोरेटर को निम्नलिखित से बदलें:

   @अवयव({
    चयनकर्ता: 'ऐप-अबाउट-पेज',
    टेम्पलेट यूआरएल: './about-page.component.html',
    शैलीयूआरएल: ['./about-page.component.css']
   })

4. इसमें कुछ CSS स्टाइलिंग जोड़ें के बारे में-page.component.css:

   एच2 {
    रंग नीला
   }
   पी {
    रंग: गहरा नारंगी
   }

5. अपने ब्राउज़र पर वापस जाएं या फिर से चलाएं एनजी सेवा अपने कोड को दोबारा संकलित करने के लिए। पर अपना ऐप खोलें http://localhost: 4200/ बाहरी सीएसएस फ़ाइल से उपयोग की जाने वाली शैलियों को देखने के लिए।

कोणीय में एक घटक के HTML का प्रतिपादन

अब आप विभिन्न तरीकों से जानते हैं कि आप अपने HTML और CSS सामग्री को एक कोणीय अनुप्रयोग में प्रस्तुत कर सकते हैं। आप अपने HTML और CSS की जटिलता के आधार पर यह निर्धारित कर सकते हैं कि आप किस दृष्टिकोण का उपयोग करना चाहते हैं।

यदि रुचि है, तो आप एक कोणीय घटक की HTML और टाइपस्क्रिप्ट फ़ाइलों के बीच डेटा पास करने का तरीका तलाश सकते हैं।