अनुवाद के लिए पाठ चिह्नित करना
अनुवाद योग्य पाठ चिह्नित करने के लिए i18n विशेषताएँ उपयोग करें
अनुवाद के लिए पाठ चिह्नित करना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Internationalization क्या हल करता है
Internationalization (i18n) का अर्थ है अपने ऐप को इस तरह तैयार करना कि code बदले बिना उसके text का दूसरी भाषाओं में अनुवाद किया जा सके। Angular में templates के अनुवाद योग्य text को i18n attribute से चिह्नित करने पर आधारित built-in i18n system होता है।
i18n attribute
जिस element के text का अनुवाद करना हो, उसमें i18n attribute जोड़ें। Angular इन्हें build time पर एकत्र करता है और locale के अनुसार content बदल देता है।
<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>Attributes का अनुवाद
किसी HTML attribute (जैसे title या placeholder) का अनुवाद करने के लिए उसके आगे i18n- लगाएँ।
<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />अर्थ और विवरण
आप i18n="meaning|description" syntax से translators को संदर्भ दे सकते हैं। meaning उन समान वाक्यांशों को एक समूह में रखता है जिनका एक ही अनुवाद होना चाहिए; description उनके उपयोग को समझाता है।
<button i18n="cta|The main call to action on the home page">Get started</button>Custom IDs
Text में बदलाव होने पर भी अनुवाद बनाए रखने के लिए @@ के बाद एक स्थिर custom ID जोड़ें। इसके बिना source text बदलने पर नई ID बनती है और मौजूदा अनुवाद खो जाता है।
<h1 i18n="@@homeTitle">Welcome to our store</h1>अनुवादित text में interpolations
अनुवादित text के भीतर bindings placeholders बन जाते हैं। Translators को एक नामित token दिखाई देता है, जिसे वे अपनी भाषा के अनुसार दूसरी जगह रख सकते हैं।
<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>$localize से components में text चिह्नित करना
TypeScript में मौजूद strings (templates में नहीं) को $localize से tag करें। यह string को extraction के लिए चिह्नित करता है, ठीक वैसे ही जैसे i18n attribute templates के लिए करता है।
const greeting = $localize('Welcome back'); // tagged-template form, marked for extractionStrings को केवल concatenate क्यों न करें
Text को hardcode और concatenate करना ('You have ' + n + ' items') अनुवाद बिगाड़ देता है: भाषाओं में शब्दों का क्रम अलग होता है और plural rules भी अलग होती हैं। पूरे वाक्यांशों को i18n से चिह्नित करने पर translators के लिए grammar सही रखना संभव होता है।
Nested markup का अनुवाद
जब अनुवाद योग्य text में child elements होते हैं, तो Angular उन्हें placeholders के रूप में सुरक्षित रखता है, ताकि translators गलती से markup हटा न दें।
<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>Source text को साफ़ रखना
Text को सबसे छोटी उचित इकाई पर चिह्नित करें, आम तौर पर पूरे वाक्य या label पर। एक ही वाक्य को कई i18n blocks में बाँटने से बचें, क्योंकि हर टुकड़ा अलग और अधिक कठिनाई से अनुवाद योग्य string बन जाता है।
Build time पर क्या होता है
i18n attribute से runtime cost नहीं बढ़ती: Angular हर locale के लिए compilation के दौरान चिह्नित text बदल देता है और अलग optimized bundle बनाता है। अगले lessons में हम इन strings को extract और translate करेंगे।
त्वरित जाँच
Placeholder attribute का अनुवाद कैसे करते हैं?
पुनरावलोकन
Template text को i18n attribute से और attributes को i18n-attr से चिह्नित करें। संदर्भ के लिए meaning|description और स्थिर IDs के लिए @@customId जोड़ें। Bindings placeholders बन जाती हैं और TypeScript strings में $localize का उपयोग होता है। चिह्नित करने पर runtime cost शून्य रहती है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “अनुवाद के लिए पाठ चिह्नित करना” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “अनुवाद के लिए पाठ चिह्नित करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“अनुवाद के लिए पाठ चिह्नित करना” में मैं क्या सीखूँगा?
अनुवाद योग्य पाठ चिह्नित करने के लिए i18n विशेषताएँ उपयोग करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“अनुवाद के लिए पाठ चिह्नित करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- अनुवाद के लिए पाठ चिह्नित करना
- संदेश निकालना और अनुवाद करना
- बहुवचन और Select (ICU)
- स्थानीयकृत बंडल बनाना