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

Angular का उपयोग कर ग्रोसरी की लिस्ट मैनेजर बनाना, भाग 2: आइटम्स का प्रबंधन

by
Difficulty:IntermediateLength:ShortLanguages:

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

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

इस भाग में, आप पूर्ण किए गए आइटम को चिह्नित करने, मौजूदा आइटम को एडिट करने और जोड़े गए आइटम को निकालने के लिए फीचर्स को लागू करेंगे।

शुरू करें

ट्यूटोरियल के पहले भाग से सोर्स कोड क्लोनिंग करके शुरू करते हैं। अपने टर्मिनल से, सोर्स कोड क्लोन करने के लिए निम्नलिखित कोड लिखें:

सोर्स कोड को क्लोन कर लेने के बाद, प्रोजेक्ट फ़ोल्डर पर नेविगेट करें और आवश्यक डेपेंडेन्सीस इंस्टॉल करें।

डेपेंडेन्सीस इनस्टॉल करने के बाद, आप सर्वर शुरू करने में सक्षम होंगे। प्रोजेक्ट फ़ोल्डर से, निम्न कमांड्स को टाइप करें:

अपने ब्राउज़र को http://localhost:4200 पर इंगित करें और आपकी एप्लिकेशन चलनी चाहिए।

ग्रोसरी की वस्तुओं को अपडेट करना

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

ग्रिड के अंदर एडिट बटन को शामिल करने के लिए app.grocery.html कोड को संशोधित करें।

उपरोक्त बदलावों को सेव करें और सर्वर को पुनरारंभ करें। पृष्ठ लोड करें और कुछ आइटम दर्ज करें और आपके पास प्रत्येक आइटम के लिए edit बटन होगा।

Grocery List Manager - Edit Button

जब यूजर edit बटन पर क्लिक करता है, तो आपको आइटम को एडिट करने के लिए एक क्लिक मेथड जोड़ने की आवश्यकता है। आइटम को एडिट करने के लिए क्लिक ईवेंट पर जोड़ने के लिए app.grocery.html को संशोधित करें।

task को onEdit मेथड में पास करें जैसा की ऊपर कोड में एडिट किये जाने वाले आइटम को पहचानने के लिए दिखाया गया है।

GroceryComponent क्लास के अंदर दिखाया गया task स्कोप वैरिएबल को प्रारंभ करें:

OnClick विधि में, आप यह देखने के लिए id की जांच करेंगे कि क्या यह एक मौजूदा आइटम है या एक नया आइटम है। दिखाए गए अनुसार onClick विधि को संशोधित करें:

जैसा कि आपने देखा है, आपने प्रत्येक कार्य के लिए id के रूप में एक यूनिक टाइम स्टाम्प असाइन किया है। अब हम मौजूदा वस्तु को एडिट करने के लिए onEdit विधि को परिभाषित करते हैं। OnEdit विधि के अंदर, task वेरिएबल में दिए गए item को असाइन करें।

परिवर्तन सेव करें और सर्वर को पुनरारंभ करें। ग्रोसरी की लिस्ट में एक नया आइटम दर्ज करें और संबंधित एडिट बटन पर क्लिक करें। आप OK बटन पर क्लिक करके प्रविष्टि को एडिट और अपडेट कर पाएंगे।

Grocery List Manager - Edit and Update

ग्रोसरी का आइटम हटाना

मौजूदा आइटम्स को हटाने के लिए चलो एक डिलीट आइकन जोड़ते हैं। दिखाए गए अनुसार HTML कोड को संशोधित करने के लिए app.grocery.html फ़ाइल को अपडेट करें:

यहां बताया गया है कि कैसे पूरी तरह से app.grocery.html फ़ाइल दिखती है:

ग्रोसरी की वस्तु को हटाने के लिए remove आइकन पर on click ईवेंट जोड़ें।

परिवर्तन सेव करें और सर्वर को पुनरारंभ करें। ग्रोसरी मैनेजर ऐप में नए आइटम जोड़ने का प्रयास करें और आपके पास delete और edit आइकन के साथ सूचीबद्ध आइटम होंगे।

Grocery List Manager App - Delete View

हटाए जाने की कार्यक्षमता को कार्यान्वित करने के लिए, आपको app.grocery.ts फ़ाइल में onDelete विधि को जोड़ना होगा जैसा कि दिखाया गया है:

यूजर डिलीट आइकन पर क्लिक करने के बाद, आपको आइटम id को ग्रोसरी की वस्तु लिस्ट के साथ जांचना होगा और tasks लिस्ट से प्रविष्टि को निकालना होगा। onDelete विधि कैसे दिखती है यहाँ दिया गया है:

जैसा कि उपरोक्त कोड में देखा गया है, आपने tasks लिस्ट को इटरेट किया है और इसे क्लिक किए गए आइटम id के साथ चेक किया है। अगर यह tasks लिस्ट में आइटम से मेल खाती है, तो इसे splice विधि का उपयोग करके हटा दिया जाता है।

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

समाप्त होने वाली ग्रोसरी की वस्तु को चिह्नित करना

लिस्ट में जोड़े गए आइटम को स्ट्राइक करने के लिए चलो कार्यक्षमता जोड़ते हैं। एक बार यूजर को ग्रोसरी की लिस्ट मैनेजर में कार्य के साथ कर लिया जाता है, तो पूरा कार्य पूरा करना संभव है। नए और पूर्ण किए गए कार्यों को ट्रैक करने के लिए, कार्य जानकारी में एक नया वेरिएबल strike जोड़ें।

दिखाए गए अनुसार नए strike वैरिएबल को शामिल करने के लिए onClick विधि को संशोधित करें:

src/style.css फ़ाइल में strike नामक एक नयी class जोड़ें, जो आइटम को स्ट्राइक करेगी।

items वेरिएबल में strike वैरिएबल को टॉगल करने के लिए आइटम पर क्लिक ईवेंट शामिल करें। आप strike वेरिएबल के बूलियन मान के आधार पर आइटम को strike class लागू करें। डिफ़ॉल्ट रूप से, यह false होगा। strike वेरिएबल वैल्यू को टॉगल करने के लिए यहां onStrike विधि है:

जैसा कि उपरोक्त विधि में देखा गया है, आप आइटम की लिस्ट के माध्यम से इटरेट करते हैं। आइटम मिल जाने के बाद, आप स्ट्राइक वैल्यू को टॉगल करते हैं

strike वैरिएबल के आधार पर, आपको task नाम स्पेन में class strike लागू करने की आवश्यकता है। यह कुछ इस प्रकार का दिखेगा:

जैसा कि देखा गया है, आपने स्पेन एलिमेंट को क्लास strike लागू करने के लिए ngClass डायरेक्टिव का इस्तेमाल किया है यदि task.strike मान true है।

उपरोक्त बदलावों को सेव करें और सर्वर को पुनरारंभ करें। आइटम को लिस्ट में जोड़ें और जोड़े गए आइटम पर क्लिक करें। एक बार क्लिक करने पर, अपेक्षित रूप से आइटम को स्ट्रक किया जाएगा।

Grocery List Manager - Strike Out Completed Task

सब कुछ समेटते हुए

इस ट्यूटोरियल में, आपने देखा है कि Angular का उपयोग कर ग्रोसरी का मैनेजर ऐप में कार्य को पूरा करने, हटाने और चिह्नित करने का तरीका क्या है। मुझे आशा है कि आपको ट्यूटोरियल में मज़ा आया। मुझे नीचे दिए गए टिप्पणियों (comments) में अपने विचारों को बताएं।

जावास्क्रिप्ट वेब पर कार्य करने की वास्तविक भाषा में से एक बन गया है। यह अपने लर्निंग कर्व्स के बिना नहीं है, और आपको बिजी रखने के लिए बहुत सारे फ़्रेमवर्क्स और लाइब्रेरीज भी मौजूद हैं। यदि आप अपने काम में अध्ययन या उपयोग करने के लिए अतिरिक्त संसाधनों की तलाश कर रहे हैं, तो देखें कि हमारे पास Envato marketplace में क्या उपलब्ध है।

ओह, और यह मत भूलो कि इस ट्यूटोरियल से सोर्स कोड GitHub पर उपलब्ध है।

Advertisement
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.