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

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

एंगुलर का उपयोग करके, आप अपने ऐप के पेज, डायलॉग या अन्य सेक्शन को कंपोनेंट्स में अलग कर सकते हैं। एक कोणीय अनुप्रयोग में घटक मुख्य रूप से HTML, CSS और टाइपस्क्रिप्ट फ़ाइलों से बने होते हैं।

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

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

आईफोन से मैक पर फोटो कैसे अपलोड करें

दिन का मेकअप वीडियो

एंगुलर में टेम्प्लेट और टेम्प्लेट यूआरएल क्या है?

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

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

एक नए घटक में, आप या तो 'टेम्पलेट' या 'टेम्पलेटयूआरएल' विशेषताएँ सेट कर सकते हैं, इस पर निर्भर करते हुए कि आप अपना HTML कहाँ लिखते हैं।

बनाओ नया कोणीय ऐप .
अपने आवेदन के टर्मिनल में, चलाएँ उत्पन्न घटक का एक नया घटक बनाने के लिए आदेश। नए घटक को 'अबाउट-पेज' पर कॉल करें।
```
ng generate component about-page
```
में app.component.html, अपने नए घटक के लिए मौजूदा कोड को टैग से बदलें:
```
<app-about-page></app-about-page>
```
खोलें के बारे में-पृष्ठ.घटक.ts फ़ाइल। यदि आपके पास बहुत अधिक HTML कोड नहीं है, तो आप इसे सीधे टाइपस्क्रिप्ट फ़ाइल के अंदर लिखने के लिए टेम्पलेट विशेषता का उपयोग कर सकते हैं। @Component डेकोरेटर को निम्न से बदलें:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```
यदि आप एक बहु-पंक्ति वाले टेम्पलेट को शामिल करना चाहते हैं, तो आप इसके बजाय बैक-टिक उद्धरण चिह्नों का उपयोग कर सकते हैं:
```
@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})
```
टर्मिनल में, टाइप करें सेवा का अपने कोड को संकलित करने और इसे वेब ब्राउज़र में चलाने के लिए। अपना ऐप http://localhost:4200/. Your HTML code from the TypeScript file will render on the page पर खोलें।
में के बारे में-पृष्ठ.घटक.ts , इसके बजाय 'टेम्पलेट' को 'टेम्पलेटयूआरएल' से बदलें। घटक की बाहरी HTML फ़ाइल का लिंक शामिल करें। आप 'टेम्पलेट यूआरएल' का उपयोग कर सकते हैं यदि आपके पास अधिक जटिल HTML कोड है जिसके लिए अपनी फ़ाइल की आवश्यकता है।
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```
इसमें कुछ HTML कोड जोड़ें के बारे में-page.component.html फ़ाइल:
```
<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>
```
अपने ब्राउज़र पर वापस जाएं या फिर से चलाएं सेवा का अपने कोड को फिर से संकलित करने के लिए। अपना ऐप http://localhost:4200/. The browser now renders the HTML from the पर खोलें के बारे में-page.component.html फ़ाइल।

एंगुलर में स्टाइल और स्टाइल यूआरएल क्या हैं?

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

इंटेल एचडी ग्राफिक्स समर्पित वीडियो मेमोरी बढ़ाएं

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

इमेज डिलीवर क्यों नहीं कहती

अपने पहले बनाए गए कोणीय एप्लिकेशन में, खोलें के बारे में-पृष्ठ.घटक.ts फ़ाइल। घटक में 'शैलियाँ' विशेषता जोड़ें। 'शैलियों' के अंदर, पेज के लिए अपनी सीएसएस स्टाइल जोड़ें:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
टर्मिनल में, टाइप करें सेवा का अपने कोड को संकलित करने और इसे वेब ब्राउज़र में चलाने के लिए। अपना ऐप http://localhost:4200/ to view the styling specified in the TypeScript file पर खोलें।
यदि आपके पास बहुत अधिक CSS है, तो टाइपस्क्रिप्ट फ़ाइल को बाहरी CSS फ़ाइल से लिंक करने के लिए 'styles' के बजाय 'styleUrls' का उपयोग करें। में के बारे में-पृष्ठ.घटक.ts , @Component डेकोरेटर को निम्न से बदलें:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
इसमें कुछ CSS स्टाइल जोड़ें के बारे में-पृष्ठ.घटक.सीएसएस :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
अपने ब्राउज़र पर वापस जाएं या फिर से चलाएं सेवा का अपने कोड को फिर से संकलित करने के लिए। अपना ऐप http://localhost:4200/ to view the styles used from the external CSS file पर खोलें।

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

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

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