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

अपना पहला Angular ऐप बनाएं: डाटा को स्टोर और एक्सेस करना

by
Read Time:8 minsLanguages:
This post is part of a series called Creating Your First Angular App.
Creating Your First Angular App: Basics
Creating Your First Angular App: Components, Part 1

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

सीरीज के पहले ट्यूटोरियल में, हमने सीखा कि Angular ऐप बनाने के लिए शुरुआत कैसे करें। उस ट्यूटोरियल को सफलतापूर्वक पूरा करने के बाद, अब आपको ‘Fun Facts About Countries’ टाइटल के साथ आपके पास पहली काम करती हुई Angular ऐप होनी चाहिए। स्क्रीन पर रेंडर किए जा सकने वाले किसी भी कॉम्पोनेंट को बनाने से पहले, हम कुछ क्लासेज बनाएंगे और कुछ फंक्शंस को डिफाइन करेंगे जो उन कॉम्पोनेंट्स को उपयोगी बनाते हैं।

इस ट्यूटोरियल में, हमारा ध्यान एक Country क्लास बनाने पर होगा जिसमें विभिन्न प्रॉपर्टीज होंगी, जिनकी वैल्यू हम यूजर को दिखाना चाहते हैं। फिर हम country-data.ts नाम की एक और फाइल बनाएंगे। इस फाइल में हमारे ऐप की सभी कंट्रीज के बारे में जानकारी होगी। हमारी तीसरी फाइल का नाम country.service.ts होगा। नाम शायद आपको कुछ फैंसी लगे, पर फाइल में सिर्फ CountryService क्लास होगी उन सभी आवश्यक फंक्शनैलिटी के साथ जिससे हम country-data.ts फाइल के द्वारा प्रदान की गई इंफॉर्मेशन को रिट्रीव और sort कर सकते हैं।

एक Country क्लास बनाना

अपने Angular ऐप के src/app फोल्डर के अंदर, country.ts नाम की एक फाइल बनाएं। इसके अंदर निम्न कोड जोड़ें।

ऊपर दिए गए TypeScript कोड Country क्लास को छः अलग-अलग प्रॉपर्टीज के साथ कोड करती है ताकि वे अलग अलग कंट्रीज की इंफॉर्मेशन को स्टोर कर सके। कंट्री का नाम, उसकी राजधानी, और उसके करेंसी एक स्ट्रिंग के रूप में स्टोर की जाती है। हालांकि, इसका एरिया, जनसंख्या, और GDP एक नंबर के रूप में स्टोर किए जाते हैं। हम Country क्लास को कई जगहों पर इंपोर्ट करेंगे, इसलिए मैंने क्लास की डेफिनेशन से पहले export कीवर्ड जोड़ दिया है।

कंट्रीज का एक ऐरे बनाना

अगले कदम में country-data.ts फाइल को बनाना शामिल है जिसमें Country ऑब्जेक्ट के ऐरे के रूप में सभी कंट्रीज की जानकारी को स्टोर किया जाएगा। हम Country क्लास को इस फाइल में इंपोर्ट करेंगे और फिर COUNTRIES नाम की एक const को एक्सपोर्ट करेंगे जो कंट्री ऑब्जेक्ट के ऐरे को स्टोर करता है।

यहां country-data.ts के लिए कोड है। जैसे कि country.ts, आपको यह फाइल src/app फोल्डर के अंदर बनानी होगी।

इस फाइल में पहली लाइन उसी डायरेक्टरी में स्थित country.ts फाइल्स से Country क्लास को इंपोर्ट करती है। यदि आप इस लाइन को अपनी फाइल से हटा देते हैं, TypeScript आपको नीचे दिया गया एरर देगी:

बिना इंपोर्ट स्टेटमेंट के, TypeScript को पता नहीं होगा कि Country टाइप के ऐरे का क्या मतलब है। इसलिए यह सुनिश्चित करें कि आपने सही क्लास को इंपोर्ट किया है और country.ts की लोकेशन को सही ढंग से स्पेसिफाई किया है।

Country क्लास को इंपोर्ट करने के बाद, हम आगे बढ़ते हैं और Country ऑब्जेक्ट्स का एक ऐरे बनाते हैं। हम अन्य फाइलों में उपयोग के लिए कंट्रीज के इस ऐरे को इंपोर्ट करेंगे, इसलिए हम इस array के लिए export कीवर्ड को भी जोड़ेंगे। इस समय, ऐरे में पांच अलग अलग Country ऑब्जेक्ट्स है। इन पाच ऑब्जेक्ट्स में से प्रत्येक key-value के जोड़े को प्रदान करता है जो किसी विशेष ऑब्जेक्ट या कंट्री के लिए प्रॉपर्टी का नाम और उसकी वैल्यू को लिस्ट करता है।

यदि आप ऐरे में एक अतिरिक्त प्रॉपर्टी जोड़ने की कोशिश करते हैं जिसे Country क्लास के अंदर डिक्लेअर नहीं किया गया है तो आपको निम्नलिखित एरर मिलेगा:

इस मामले में, मैं प्रेसिडेंट के नाम को president नामक प्रॉपर्टी में एक string के रूप में स्टोर करने की कोशिश कर रहा था। क्योंकि ऐसी कोई प्रॉपर्टी डिक्लेअर नहीं की गई थी, इसलिए हमें एक एरर मिला। कभी-कभी, आप केवल विशेष ऑब्जेक्ट्स के लिए प्रॉपर्टी स्पेसिफाई करना चाह सकते हैं और दूसरों के लिए नहीं। ऐसे मामलों में, आप क्लास डेफिनेशन के अंदर ऑप्शनल प्रॉपर्टी को मार्क कर सकते हैं। मैंने एक ट्यूटोरियल में इसके बारे में और अधिक विस्तार पूर्वक चर्चा की है जो TypeScript इंटरफ़ेस को कवर करता है।

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

एक CountryService क्लास बनाना

हमारी Country क्लास और COUNTRIES array बनाने के बाद, हम अब कंट्री डाटा को प्रोसेस करने के लिए कुछ फंक्शन लिख सकते हैं। हमें अपनी सर्विस फाइल के अंदर Country क्लास और COUNTRIES array दोनों को इंपोर्ट करना होगा। डाटा तक एक्सेस के लिए फाइल को COUNTRIES ऐरे इंपोर्ट करना होगा। इसी प्रकार, फाइल को Country क्लास इंपोर्ट करनी होगी अगर वह COUNTRIES ऐरे के अंदर वाले डाटा को समझना चाहती है।

हम दूसरी डिपेंडेंसीज को भी इंपोर्ट करेंगे जैसे Angular कोर से Injectable ताकि हमारी CountryService क्लास इंजेक्टर के लिए उपलब्ध रह सके जो इसे दूसरे कॉम्पोनेंट्स में इंजेक्ट करें।

एक बार जब आपका ऐप आकार में बढ़ता है, तो विभिन्न मॉड्यूल को एक दूसरे के साथ कम्युनिकेट करने की आवश्यकता होगी। मान लीजिए कि ठीक से काम करने के लिए ModuleA को ModuleB की आवश्यकता होती है। ऐसे मामलों में, ModuleB को ModuleA की डिपेंडेंसी कहेंगे।

बस उस मॉड्यूल को इंपोर्ट करना जो हमें किसी अन्य फाइल में चाहिए होता है। हालांकि, कभी-कभी हमें यह तय करने की आवश्यकता होती है कि क्या हमें ModuleB क्लास का एक सिंगल इंस्टेंस बनाना चाहिए जो कि पूरे ऐप द्वारा उपयोग किया जायदा या यदि हमें हर बार मॉड्यूल का उपयोग करने के लिए एक नया इंस्टेंस बनाना चाहिए। हमारे मामले में, हम पूरे ऐप में हमारे CountryService क्लास के एक ही इंस्टेंस को इंजेक्ट करेंगे।

यहां country.service.ts के लिए कोड दिए गए हैं।

एक @injectable डेकोरेटर का उपयोग सर्विस क्लास की पहचान करने के लिए किया जाता है जिसे इंजेक्शन डिपेंडेंसी की आवश्यकता हो सकती है। हाल, सर्विस क्लासेज में @injectable जोड़ना एक आवश्यक कोडिंग स्टाइल है, इसलिए हम इसे वैसे भी करते हैं।

उसके बाद, हम क्लास के लिए अलग-अलग मेथड लिखते हैं जो COUNTRIES ऐरे लेते हैं और या तो इसे सीधे रिटन करते हैं या कुछ कुछ क्राइटेरिया का उपयोग करके इसे सॉर्ट करते हैं और फिर ऐरे के एक हिस्से को रीटर्न करते हैं।

getCountries() मेथड से सभी Country ऑब्जेक्ट्स को रिटर्न करने की उम्मीद की जाती है, और इसलिए यह इसके लिए कोई भी मॉडिफिकेशन के बिना पूरे COUNTRIES ऐरे को रिटर्न करता है।

getPopulatedCountries() COUNTRIES ऐरे को लेता है और इसे अलग-अलग देशों के जनसंख्या के आधार पर घटते क्रम में सॉर्ट करता है। फिर हम ऐरे से पहले 3 देशों (indices 0, 1, और 2 के साथ) को रिटर्न करने के लिए Array.slice() मेथड का उपयोग करता है। getLargestCountries() और getGDPCountries() मेथड्स भी इसी प्रकार से काम करते हैं।

getCountry() मेथड अपने अरगुमेंट के रूप में एक नाम को लेता है और उस कंट्री ऑब्जेक्ट को रिटर्न करता है जिसके name प्रॉपर्टी में वही वैल्यू हो की अरगुमेंट में दी गई है।

app.module.ts में CountryService को इंक्लूड करना

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

किसी भी सर्विस को रजिस्टर करने के दो सामान्य तरीके हैं: @Component प्रोवाइडर का उपयोग करना या @NgModule प्रोवाइडर का उपयोग करना। जब आप किसी विशेष कॉम्पोनेंट और उसके सभी नेस्टेड कॉम्पोनेंट्स के लिए किसी सर्विस की एक्सेस को डिस्ट्रिक्ट करना चाहते हैं तो @Component प्रोवाइडर का उपयोग करना बेहतर है। जब आप सर्विस में कई कॉम्पोनेंट्स चाहते हैं तो @NgModule प्रोवाइडर का उपयोग करना अधिक बेहतर होगा।

हमारे मामले में, हम अपने ऐप के कई कॉम्पोनेंट्स के साथ CountryService का उपयोग करेंगे। इसका मतलब है कि हमें इसे प्रत्येक कॉम्पोनेंट के @Component प्रोवाइडर के साथ अलग से रजिस्टर करने के बजाय, इसे @NgModule प्रोवाइडर के साथ एक बार रजिस्टर करना चाहिए।

इस समय आपकी app.module.ts फाइल को इस तरह दिखना चाहिए:

app.module.ts फाइल में एक इंपोर्ट स्टेटमेंट जोड़ें और @NgModule प्रोवाइडर्स ऐरे में सर्विस को जोड़ें। इन परिवर्तनों को करने के बाद, आपकी app.module.ts फाइल को कुछ इस तरह दिखना चाहिए:

CountryService क्लास अब उन सभी कॉम्पोनेंट्स के लिए उपलब्ध होगी जो हम अपने आप के लिए बनाते हैं।

अंतिम विचार

country.ts, country-data.ts और country.service.ts नाम की तीन फाइलें सफलतापूर्वक बनाने से इस सीरीज का दूसरा ट्यूटोरियल समाप्त होता है।

country.ts फाइल का name, currency, population, area, आदि जैसे विभिन्न प्रॉपर्टीज के साथ एक Country क्लास बनाने के लिए उपयोग किया जाता है। country-data.ts फाइल का उपयोग ऑन कंट्री ऑब्जेक्ट्स के एक ऐरे को स्टोर करने के लिए किया जाता है, जिनमें विभिन्न कंट्रीज के बारे में जानकारी होती है। country.service.ts फाइल में COUNTRIES array सेकेंडरी डाटा तक पहुंचने के लिए विभिन्न मेथड्स के साथ एक सर्विस क्लास होती है। सर्विस क्लास के अंदर उन सभी मेथड को अलग अलग रखने के लिए हमें सेंट्रल लोकेशन से अलग अलग ऐप कॉम्पोनेंट्स के अंदर उन्हें एक्सेस करने की अनुमति मिलती है।

अंतिम भाग में, हमने अपनी सर्विस को विभिन्न कॉम्पोनेंट्स के अंदर उपयोग के लिए उपलब्ध कराने के लिए @NgModule प्रोवाइडर के साथ रजिस्टर किया।

अगला ट्यूटोरियल आपको दिखाएगा की कंट्री के विवरण और कंट्रीज की लिस्ट को डिस्प्ले करने के लिए आपके ऐप में तीन अलग-अलग कंपोनेंट्स को कैसे बनाया जाए।

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.