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

आपका पहला Angular ऐप बनाना: बेसिक बातें

by
Read Time:9 minsLanguages:
This post is part of a series called Creating Your First Angular App.
Create Your First Angular App: Storing and Accessing Data

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

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

इस सीरीज का उद्देश्य बहुत ही सरल ऐप बनाते समय Angular की बेसिक बातें कवर करना है जो विभिन्न देशों के बारे में जानकारी दिखाता है। Angular को TypeScript में लिखा जाता है, इससे यह समझ में आता है कि आप अपने खुद के कोड भी TypeScript में लिखते हैं।

यदि आपने पहले कभी TypeScript का उपयोग नहीं किया है तो चिंता करने की कोई आवश्यकता नहीं है। इसे सीधे शब्दों में कहे तो, TypeScript में बस अतिरिक्त फीचर्स के साथ जावास्क्रिप्ट को टाइप किया जाता है। मैंने Envato Tuts+ पर शुरुआत करने वालो के लिए TypeScript नाम की एक सीरीज भी लिखी है, जहां आप पहले TypeScript की बेसिक बातें सीख सकते हैं।

शुरुआत करना

यदि आप पहले से ही TypeScript से परिचित हैं, तो आप बस आगे बढ़ सकते हैं और अपना पहला Angular ऐप बनाना शुरू कर सकते हैं।

पहला कदम Node.js को इंस्टॉल करना होगा। आप अधिकारिक वेबसाइट पर जा सकते हैं और उपयुक्त वर्जन डाउनलोड कर सकते हैं। Node पैकेज मैनेजर Node.js के एक हिस्से के रूप में इंस्टॉल हो जाएगा।

अगला स्टेप नीचे दी गई कमांड को चला कर TypeScript को इंस्टॉल करना है। मेरा सुझाव है कि 2.1 से बड़े वर्जन वाले TypeScript को इंस्टॉल करें।

अंत में, आपको निम्नलिखित कमांड चला कर Angular CLI इंस्टॉल करना होगा। Angular CLI इंस्टॉल करने से आपका Angular ऐप बनाने का प्रोसेस आसान हो जाएगा।

अब, आप टर्मिनल के अंदर निम्नलिखित कमांड को चलाकर आउट-ऑफ़-द-बॉक्स एक नया Angular ऐप बना सकते हैं। कमांड चलाने से पहले, सुनिश्चित कर लें कि आप उस डायरेक्टरी में चले गए हैं जहां आप ऐप बनाना चाहते हैं।

प्रोजेक्ट के लिए सभी डिपेंडेंसीज इंस्टॉल करने में कुछ समय लगता है, इसलिए कृपया धैर्य रखें जब Angular CLI आपके ऐप को सेट करता है। इंस्टॉलेशन पूरा होने के बाद आपको करंट डायरेक्टरी में coutry-app नाम का एक फोल्डर दिखाई देगा। आप डायरेक्ट्री को country-app में बदल कर और फिर कंसोल में ng serve करके अपने ऐप को चला सकते हैं।

--open को जोड़ना ब्राउज़र में ऑटोमेटिक रूप से आपके ऐप को http://localhost:4200/ पर खोल देगा।

देश की जानकारी वाली ऐप का ओवरव्यू

देश की इंफॉर्मेशन वाली ऐप जो हम बना रहे हैं उसके तीन कॉम्पोनेंट होंगे। HomeComponent अलग अलग कैटिगरीज जैसे जनसंख्या, GDP, और क्षेत्र के अंतर्गत टॉप तीन देशों को दिखाएगा। आप इसके बारे में अधिक पढ़ने के लिए प्रत्येक देश के नाम पर क्लिक कर पाएंगे। देश के बारे में अतिरिक्त जानकारी को एक अन्य कॉम्पोनेंट का उपयोग करके सूचीबद्ध किया गया है जिसे हम CountryDetailComponent कहेंगे। हमारे ऐप में एक और कॉम्पोनेंट होगा, जिसका उपयोग हम सभी देशों की सूची प्रदर्शित करने के लिए किया जाएगा जिन्हे हमने अपने ऐप में स्टोर किया है।

क्योंकि यह आपका पहला Angular ऐप है, हमारा मुख्य उद्देश्य बिना किसी जटिल फंक्शनैलिटी को जोड़ें चीजों को आसान रखना होगा। एक बार जब आपके पास बेसिक की अच्छी समझ हो जाती है, तो अधिक जटिल ऐप बनाना एक चुनौतीपूर्ण काम नहीं लगेगा।

नीचे दी गई इमेज हमारे देश की इंफॉर्मेशन ऐप में होम पेज या HomeComponent की है। जैसा कि आप देख सकते हैं, प्रत्येक कैटेगरी के अंदर तीन देश हैं, और उन्हें घटते क्रम में रखा गया है। HomeComponent बनाते समय, आप सीखेंगे की विभिन्न देशों को टेंप्लेट के अंदर प्रदर्शित करने से पहले कैसे सॉर्ट किया जाए।

Country Information App OverviewCountry Information App OverviewCountry Information App Overview

निम्नलिखित इमेज हमारे ऐप के “all countries page” या AllCountriesComponent को दर्शाती है। इस कंपोनेंट का लेआउट काफी हद तक HomeComponent के समान ही है। अंतर केवल इतना है कि इस बार हम सभी देशों को उनकी राजधानियों के साथ सूचीबद्ध कर रहे हैं।

Fun Facts About CountriesFun Facts About CountriesFun Facts About Countries

अगर आप HomeComponent या AllCountriesComponent के अंदर प्रदान किए गए किसी भी देश के बॉक्स पर क्लिक करते हैं, तो आपको देश की डिटेल वाले पर या CountryDetailComponent पर ले जाया जाएगा। किसी देश के बारे में दी गई जानकारी एडिट करने योग्य नहीं है।

प्रत्येक देश की डिटेल्स के बाद एक बैक बटन है। यह बैक बटन आपको पिछले कॉम्पोनेंट या पेज पर वापस ले जाता है। यदि आप HomeComponent से CountryDetailComponent पर आए, तो आपको HomeComponent पर वापस ले जाएगा। यदि आप AllCountriesComponent से CountryDetailComponent पर पहुंचे, तो आपको AllCountriesComponent पर वापस ले जाएगा।

Rendering InformationRendering InformationRendering Information

अलग-अलग कॉम्पोनेंट्स का जिक्र करना, जिन्हे हम पेजेस के रूप में बना रहे हैं, तकनीकी रूप से सही नहीं है। हालांकि, मैं होमपेज या HomeComponent कोई भी टर्म का उपयोग कर रहा हूं क्योंकि बहुत सारे अपरिचित शब्दों जैसे रूटिंग, कॉम्पोनेंट्स और डेकोरेटर उन पाठकों के लिए भयभीत कर देने वाले हो सकते हैं जिन्होंने पहले कभी भी Angular ऐप नहीं बनाया है। इस सीरीज के लिए इन टर्म्स का उपयोग करना शब्द जाल में उलझने के बजाय आप को जल्दी सीखने में मदद कर सकता है।

Angular का बेसिक

इससे पहले कि हम अपना ऐप बनाना शुरू करें, आपको Angular के बुनियादी कंसेप्ट के साथ सहज होने की आवश्यकता होगी। यह सेक्शन कॉम्पोनेंट्स और टेंपलेट्स जैसे महत्वपूर्ण विषयों को संक्षेप में कवर करेगा।

कॉम्पोनेंट्स एक Angular एप्लीकेशन के निर्माण खंड होते हैं। वह आपको अपने ऐप के UI को नियंत्रित करने में सहयोग करते हैं। एक बेसिक कॉम्पोनेंट के 2 भाग होते हैं: एक डेकोरेटर और एक क्लास डेफिनेशन। आप क्लास के अंदर एक कॉम्पोनेंट के लिए एप्लीकेशन लॉजिक निर्दिष्ट कर सकते हैं।

कॉम्पोनेंट डेकोरेटर का उपयोग कॉम्पोनेंट की पहचान करने के लिए एक कस्टम सिलेक्टर जैसी जानकारी को निर्दिष्ट करने के लिए, HTML टेंप्लेट के पाथ के लिए, और कॉम्पोनेंट पर लागू होने वाले स्टाइल के नियम के लिए किया जाता है।

यहां एक बेसिक कॉम्पोनेंट डेकोरेटर है, जो CountryDetailComponent की तीन वैल्यूज सेट करता है:

हमारे द्वारा बनाए गए सभी कॉम्पोनेंट्स में एक कस्टम शैल होगा जो उसको निर्दिष्ट करता है जो ब्राउज़र के अंदर कॉम्पोनेंट को रेंडर करता है। इन कस्टम टैगो मे आप किसी भी नाम का प्रयोग कर सकते हैं। उदाहरण के लिए, हम सीरीज के तीसरे ट्यूटोरियल में एक countryDetailComponent बना रहे हैं, और हम ब्राउज़र में इस कंपोनेंट को रेंडर करने के लिए app-country-detail नामक अपने स्वयं के कस्टम टैग का उपयोग करेंगे।

आपके द्वारा बनाए गए किसी भी कॉम्पोनेंट में एक टेंप्लेट शामिल होगा जो एप्लीकेशन पेज पर दिए गए को नियंत्रित करता है। उदाहरण के लिए, countryDetailComponent में दो div टैग हैं जो कॉम्पोनेंट के मुख्य कंटेंट के चारों ओर एक आवरण के रूप में कार्य करता है। किसी देश के बारे में प्रत्येक जानकारी अपने स्वयं के p टैग के अंदर डाल दी गया है, और देश का नाम h2 टैग के अंदर डाल दिया गया है। इन सभी टैगो को एक साथ एक टेंप्लेट के रूप में स्टोर किया गया है जो है countryDetailComponent और फिर एक यूनिट के रूप में रेंडर किया गया है। कॉम्पोनेंट के इस टेंपलेट को HTML फाइल के रूप में सेव किया जा सकता है या template एट्रिब्यूट का उपयोग करके सीधे डेकोरेटर के अंदर निर्दिष्ट किया जा सकता है।

हमारे ऐप के अलग-अलग कॉम्पोनेंट्स को स्क्रीन पर डिस्प्ले करने के लिए डाटा को रिट्रीव करना होगा। हम एक सर्विस क्लास का निर्माण करेंगे जिसमे इस डाटा को रिट्रीव करने में मदद करने के लिए फंक्शन होंगे और इसे एक या दूसरे तरीके से सॉर्ट या मॉडिफाई किया जा सकेगा। फिर हम यूजर को इस डाटा को डिस्प्ले करने के लिए अलग अलग कॉम्पोनेंट क्लासेज की फंक्शनैलिटी का उपयोग करेंगे।

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

अपने एप्लीकेशन के लिए कॉम्पोनेंट बनाते समय, आपको अलग-अलग मॉड्यूल से डिपेंडेंसीज को इंपोर्ट करना होगा। उदाहरण के लिए, हम जब भी अपना स्वयं का एक कॉम्पोनेंट बनाते हैं, तो @angular/core से Component को इंपोर्ट करेंगे। आप डिपेंडेंसीज इंपोर्ट करने के लिए उसी सिंटेक्स का उपयोग कर सकते हैं जो आपके द्वारा बनाया गया था। कर्ली ब्रैकेट्स के अंदर का हिस्सा उस डिपेंडेंसी को निर्दिष्ट करने के लिए उपयोग किया जाता है जिसे आप इंपोर्ट करना चाहते हैं, और from के बाद के हिस्से का उपयोग यह निर्देशित करने के लिए किया जाता है कि Angular डिपेंडेंसी को कहां पाई जा सकता है।

यहां country-app से एक कोड स्निपेट है जिसे हम बना रहे हैं। जैसा कि आप देख सकते हैं हम @angular/core से Component और OnInit को इंपोर्ट कर रहे हैं। इसी तरह, हम उन फाइलों से Country और CountryService को इंपोर्ट कर रहे हैं, जो हमने खुद बनाई थी।

एप्लीकेशन का शैल

आपके द्वारा ng new country-app कमांड चलाने के बाद, Angular CLI मैं आपके लिए फाइल और फोल्डरो का एक ग्रुप बनाया। इतनी सारी फाइलों को देखकर शुरुआत में डरावना लग सकता है, लेकिन आपको उन सभी फाइलों के साथ काम करने की आवश्यकता नहीं होती है। अपना देशों वाली ऐप बनाते समय, हम केवल src/app फोल्डर के अंदर मौजूद फाइलों को मॉडिफाई करने के साथ-साथ उसी डायरेक्टरी में नहीं फाइलों का निर्माण भी करेंगे। अभी, आपके पास src/app फोल्डर में पांच अलग-अलग फाइलें होनी चाहिए। यह फाइलें एक एप्लीकेशन शैल बनाती है जिसका उपयोग हमारे बाकी ऐप को एक साथ करने के लिए किया जाएगा।

app.component.ts फाइल में TypeScript में लिखे गए हमारे कॉम्पोनेंट के लॉजिक होते हैं। आप इस फाइल को खोल सकते हैं और AppComponent क्लास की title प्रॉपर्टी को ‘Fun Facts About Countries’ से अपडेट कर सकते हैं। app.component.ts फाइल में अब नीचे दिए गए कोड होने चाहिए।

app.component.html फाइल में हमारे AppComponent क्लास का टेंप्लेट है। app.component.html फाइल को खोलें और निम्न लाइन के साथ उसके अंदर बायलरप्लेट HTML कोड को बदलें:

कर्ली ब्रैकेट्स के अंदर title को लपेट कर, हम Angular को बता रहे हैं कि AppComponent क्लास की title प्रॉपर्टी की वैल्यू को h1 के अंदर रखें।

हम इस फाइल को नए कॉम्पोनेंट्स को रेंडर करने के लिए सीरीज के अंतिम ट्यूटोरियल में अपडेट करेंगे जो हम बना रहे हैं।

इस फाइल में किए गए परिवर्तन ऑटोमेटिक रूट से http://localhost:4200/ पर ब्राउज़र में दिखाई देंगे। बस यह सुनिश्चित कर लें कि कंसोल अभी भी खुला हुआ है और आप पहले ही ट्यूटोरियल की शुरुआत से ng serve कमांड टाइप कर चुके हैं।

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

अंतिम विचार

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

इसका सारांश देखने के लिए, आपको एक Angular ऐप बनाने से पहले TypeScript की बेसिक बातें जानना आवश्यक है। अगले स्टेप में, आप को Node.js, TypeScript और Angular CLI इंस्टॉल करना होगा। उसके बाद, आप बस इस ट्यूटोरियल के शुरुआत करें वाले सेक्शन से कमांड्स का एक गुच्छा चला सकते हैं, और आपका पहला Angular ऐप पूरी तरह से चल पड़ेगा।

हमारी देश वाली ऐप केवल टाइटल दिखाने के अलावा और भी बहुत कुछ करेगी। अगले ट्यूटोरियल में, आप कुछ क्लासेज और सर्विसेज बनाएंगे जिनका उपयोग अलग-अलग देशों के डाटा को स्टोर और रिट्रीव करने के लिए किया जाएगा। यह क्लासेज और सर्विसेज तीसरे और चौथे ट्यूटोरियल में उपयोगी होगी, जहां हम अपने ऐप के अलग-अलग कंपोनेंट्स का निर्माण करेंगे।

जब हम इस ट्यूटोरियल सीरीज के माध्यम से काम कर रहे हैं तो Envato Market पर यह देखना ना भूलें की सामान्य रूप से Angular और जावास्क्रिप्ट दोनों के उपयोग और अध्ययन के लिए वहां क्या-क्या उपलब्ध है।

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.