कोणीय 8 ट्यूटोरियल - निर्देशिका संरचना को समझना और सीआरयूडी ऐप बनाना

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

ऑपरेटिंग सिस्टम का चयन करें प्रक्षेपण का एक कार्यक्रम चुनें (वैकल्पिक रूप से)

अपनी समस्या का वर्णन करें

कोणीय 8 ट्यूटोरियल - निर्देशिका संरचना को समझना और सीआरयूडी ऐप बनाना

मूल रूप से ललित अग्रवाल द्वारा प्रकाशित https://overflowjs.com

कोणीय अनुप्रयोग बनाने से पहले, हमें कोणीय परियोजना की निर्देशिका संरचना को समझना चाहिए।

निर्देशिका संरचना

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

निर्देशिका संरचना

आइए एक-एक करके देखें कि प्रत्येक फ़ाइल और फ़ोल्डर का उद्देश्य क्या है।

1. e2e (एंड-टू-एंड) - इस फ़ोल्डर में इसकी विशिष्ट कॉन्फ़िगरेशन फ़ाइलों के साथ संपूर्ण एप्लिकेशन के परीक्षण के लिए परीक्षण मामले हैं।

2. नोड_मॉड्यूल - कोणीय अनुप्रयोग में उपयोग किए जाने वाले सभी नोड-मॉड्यूल शामिल हैं।

3. एसआरसी - एप्लिकेशन का पूरा सोर्स कोड src फोल्डर में रहता है।

अनुप्रयोग - आवेदन का मूल घटक।
संपत्तियां - एप्लिकेशन में उपयोग की जाने वाली सभी छवियां या संसाधन शामिल हैं।
वातावरण - एप्लिकेशन के बिल्ड कॉन्फ़िगरेशन वातावरण शामिल हैं। हम कोई भी लक्ष्य वातावरण बना सकते हैं और उसका विन्यास यहाँ निर्दिष्ट कर सकते हैं।
index.html - यह मुख्य html पृष्ठ है जो किसी द्वारा आपकी वेबसाइट या एप्लिकेशन को खोलने पर प्रदान किया जाता है।
main.ts - यह कोणीय अनुप्रयोग का मुख्य प्रवेश बिंदु है जो AppModule को संकलित करता है और ब्राउज़र में निर्दिष्ट बूटस्ट्रैप घटक को प्रस्तुत करता है।
Styles.css - आवेदन में विश्व स्तर पर उपयोग की जाने वाली सभी शैलियों को शामिल करता है।

चार। .editorconfig - इस फाइल का उपयोग सुसंगत विन्यास को परिभाषित करने के लिए किया जाता है।

5. कोणीय.json - यह फाइल मुख्य रूप से सीएलआई के विन्यास को निर्दिष्ट करने के लिए उपयोग की जाती है। इसमें बिल्ड, सर्व, टेस्ट, लिंट, ई2ई कमांड का कॉन्फ़िगरेशन शामिल है जो @ कोणीय-क्ली द्वारा उपयोग किया जाता है।

6. karma.conf.js - यह कर्म के लिए कॉन्फ़िगरेशन निर्दिष्ट करता है, जिसका उपयोग कोणीय अनुप्रयोगों के परीक्षण के लिए किया जाता है।

7. पैकेज.जेसन - सभी परियोजना निर्भरताओं को निर्दिष्ट करता है।

8. tsconfig.json - प्रोजेक्ट में टाइपस्क्रिप्ट के कॉन्फ़िगरेशन को परिभाषित करता है।

9. tslint.json - प्रोजेक्ट के लिए TSLint कॉन्फ़िगरेशन को परिभाषित करता है। TSLint टाइपस्क्रिप्ट के लिए एक एक्स्टेंसिबल स्टैटिक एनालिसिस टूल है।

अब, हम उस एप्लिकेशन के समस्या विवरण को परिभाषित करते हैं जिसे हम विकसित करने जा रहे हैं।

समस्या का विवरण:

एक एंगुलर 8 एप्लिकेशन बनाएं जो किसी संगठन के कर्मचारियों का प्रबंधन करता है। उपयोगकर्ता निम्नलिखित कार्य कर सकता है:

1. सभी कर्मचारियों की सूची बनाएं

2. नया कर्मचारी जोड़ें

हटाए गए ट्वीट्स खोजें 2019

3. मौजूदा कर्मचारी को संशोधित करें

चार। मौजूदा कर्मचारी हटाएं

5. कर्मचारी खोज

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

चलो शुरू करते हैं

#आवश्यकताएं

1. Node.js

2. कोणीय-क्ली (कोई भी क्ली के बिना भी एप्लिकेशन बना सकता है, यह पूरी तरह से आपकी पसंद पर निर्भर करता है)

नोट: शुरू करने से पहले, यहाँ है संपर्क परियोजना के जीथब रेपो का।

# चरण 1: @ कोणीय-क्ली . का उपयोग करके कोणीय का बॉयलरप्लेट कोड बनाएं

निम्नलिखित कमांड का उपयोग करके 'कर्मचारी-प्रबंधन' नाम से नया प्रोजेक्ट बनाएं:

ng new employee-management

नए कोणीय-क्ली में, एक बार जब आप इस आदेश को चलाते हैं, तो यह पूछेगा कि क्या आप कोणीय रूटिंग जोड़ना चाहेंगे? यदि आप 'y' दबाते हैं, तो angular-cli आपके प्रोजेक्ट में मूल रूटिंग के लिए आवश्यक सभी डिफ़ॉल्ट कॉन्फ़िगरेशन फ़ाइलें जोड़ देगा। उसके बाद, यह पूछेगा कि आप किस स्टाइलशीट फॉर्मेट का उपयोग करना चाहेंगे? यह विकल्प आपको अपनी परियोजना में सीएसएस फाइलों के लिए एक प्रारूप का चयन करने की अनुमति देता है। इसलिए, अभी के लिए मैंने डिफ़ॉल्ट कोणीय रूटिंग का विकल्प नहीं चुना है और अपने स्टाइलशीट प्रारूप के रूप में 'सीएसएस' का चयन किया है।

एक बार जब आप कर लेंगे, तो आप उसी निर्देशिका में बनाई गई एक परियोजना देखेंगे जहां आदेश चलाया गया था।

शुरुआती के लिए जावास्क्रिप्ट कोड चुनौतियां

अब, विजुअल स्टूडियो कोड या अपनी पसंद के किसी अन्य संपादक में नव निर्मित प्रोजेक्ट खोलें।

#चरण 2: इकाई या मॉडल फ़ाइल बनाएं

'ऐप' फ़ोल्डर के अंदर एक नया फ़ोल्डर 'इकाई' बनाएं। इस फोल्डर में नई 'employee.ts' फाइल बनाएं।

यह ऑब्जेक्ट को इनिशियलाइज़ करने के लिए कंस्ट्रक्टर के साथ एक साधारण मॉडल क्लास है।

#चरण 3: कोणीय सेवा बनाएं

जैसा कि हम जानते हैं, कोणीय में सेवाएं हमें कई घटकों में डेटा और तर्क तक साझा पहुंच प्रदान करती हैं।

तो, निम्न आदेश का उपयोग करके 'employeeservice.service.ts' जोड़ें

ng generate service servicesemployeeservice

यह 'appservices' फ़ोल्डर के अंतर्गत 'employeeservice.service.ts' फ़ाइल जोड़ देगा। हम इस सेवा में सभी CRUD विधियों को निर्दिष्ट करेंगे।

नोट: सादगी के लिए, मैंने प्रबंधन के लिए कर्मचारियों की इन-मेमोरी सूची का उपयोग किया है सीआरयूडी संचालन .

साथ ही, हमें इस सेवा को app.module.ts के प्रोवाइडर्स एरे में रजिस्टर करने की आवश्यकता नहीं है क्योंकि हमने @Injectable() एट्रिब्यूट के 'providedIn' वेरिएबल में 'root' पास कर दिया है।

#चरण 4: कोणीय घटक बनाएं

अब हमें विभिन्न कोणीय घटकों का विश्लेषण करना चाहिए जिसमें हमारे आवेदन को विभाजित किया जा सकता है। निम्नलिखित घटक हैं जिन्हें बनाने की आवश्यकता है:

ऐप घटक - जड़ घटक पहले से ही @ कोणीय-क्ली . द्वारा जोड़ा गया है
कर्मचारी सूचीघटक - सभी कर्मचारियों को प्रदर्शित करता है
कर्मचारी विवरणघटक - एक कर्मचारी के सभी विवरण प्रदर्शित करता है
कर्मचारी घटक जोड़ें - कर्मचारी को कर्मचारी सूची में जोड़ें
कर्मचारी घटक संपादित करें - सूची से कर्मचारी संपादित करें

इन सभी घटकों को उत्पन्न करने के लिए, हम निम्नलिखित कमांड चलाएंगे।

ng generate component employeelist –skipTests=true ng generate component employeedetail –skipTests=true ng generate component addemployee –skipTests=true ng generate component editemplyee –skipTests=true

घटक की परीक्षण फ़ाइलें बनाने से बचने के लिए '-skipTests=true' पैरामीटर का उपयोग किया जाता है।

एक बार जब हम इन आदेशों को चलाते हैं, तो @angular-cli स्वचालित रूप से हमारे लिए app.module.ts में घटकों को पंजीकृत करता है।

मॉड्यूल रजिस्टर

आइए प्रत्येक घटक बनाएं

४.१. कर्मचारी विवरण घटक

सबसे पहले, हम कर्मचारी विवरण घटक बनाएंगे क्योंकि कर्मचारियों की सूची प्रदर्शित करने के लिए इस घटक का पुन: उपयोग किया जा सकता है। 'employeedetail.component.html' खोलें और निम्नलिखित कोड जोड़ें।

कर्मचारी विवरण घटक HTML

यह टेम्प्लेट फ़ाइल है जिसमें ब्राउज़र में कर्मचारी के गुणों को प्रदर्शित करने के लिए html होता है। यहां हमने टेम्पलेट के गुणों को बांधने के लिए इंटरपोलेशन का उपयोग किया है।

अब 'employeedetail.component.ts' फाइल और उसमें निम्न कोड खोलें।

कर्मचारी विवरण घटक

यह घटक मूल घटक से चर 'कर्मचारी' के लिए @Input() मान की अपेक्षा करता है। उसके बाद सभी संबद्ध गुणों को प्रारंभ किया जाएगा और ब्राउज़र पर प्रस्तुत किया जाएगा।

४.२. कर्मचारी सूची घटक

यह घटक कर्मचारियों की सूची प्रस्तुत करने के लिए कर्मचारी विवरण घटक का उपयोग करेगा। निम्नलिखित टेम्पलेट कोड को 'employeelist.component.html' फ़ाइल में जोड़ें।

कर्मचारी सूची HTML

हमने इस घटक में एक खोज बॉक्स और एक ऐड बटन जोड़ा है। साथ ही, @Input() वैरिएबल को चाइल्ड कंपोनेंट को पास किया जाता है और पैरेंट कंपोनेंट में इसके @Output() इवेंट को हैंडल किया जाता है।

अब, कर्मचारी सेवा से कर्मचारी सूची प्राप्त करने के लिए 'employeelist.component.ts' फ़ाइल खोलें और खोज बॉक्स का तर्क जोड़ें।

सेवा में खोज बॉक्स तर्क

4.3. कर्मचारी घटक जोड़ें

एक कर्मचारी के लिए आवश्यक विवरण प्राप्त करने के लिए 'Addemployee.component.html' खोलें और सरल फ़ील्ड जोड़ें।

कर्मचारी घटक जोड़ें HTML

इस टेम्पलेट में ऑपरेशन को सहेजने और रद्द करने के लिए दो बटन भी हैं। हम उनके तर्क को 'addemployee.component.ts' फ़ाइल में संभालेंगे।

कर्मचारी घटक सेवा जोड़ें

कोड अकादमी के लिए मुफ्त विकल्प

रद्द करें बटन दबाने पर, हम उपयोगकर्ता को हमारे होम पेज पर नेविगेट करेंगे जो कर्मचारियों की सूची प्रदर्शित करता है।

४.४. कर्मचारी घटक संपादित करें

यह 'addemployee.component.html' जैसा है। किसी कर्मचारी को जोड़ने के बजाय, यह घटक मौजूदा कर्मचारी के विवरण को संपादित करेगा। 'editemployee.component.html' खोलें और निम्नलिखित कोड:

कर्मचारी घटक HTML संपादित करें

यहां, हमने 'editemployee.component.ts' में वेरिएबल्स के लिए बाध्य करने के लिए [(ngModel)] उर्फ 'एक बॉक्स में केला' का उपयोग किया है।

कर्मचारी घटक सेवा संपादित करें

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

#चरण 5: घटकों के रूटिंग को कॉन्फ़िगर करना

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

कोणीय रूटिंग क्या है?

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

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

कोणीय 8 . में रूटिंग

ध्यान दें कि अंतिम मार्ग में पथ है:** जो दर्शाता है कि राउटर निर्दिष्ट घटक का चयन करेगा यदि अनुरोधित URL किसी भी परिभाषित मार्ग से मेल नहीं खाता है।

राउटर मॉड्यूल को @ कोणीय/राउटर से आयात करके इन मार्गों को app.module.ts में पंजीकृत करें।

पंजीकरण मार्ग

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

मार्ग टैग

# चरण 6: एप्लिकेशन चलाएँ

हम कोडिंग भाग के साथ कर रहे हैं। अब हमारे भयानक एप्लिकेशन को चलाने के लिए बस निम्न कमांड चलाएँ।

npm start

सफल संकलन के बाद, हम अपना आवेदन यहाँ देख सकते हैं http://localhost:4200/कर्मचारी

ऊपर और चल रहा कोणीय 8 सीआरयूडी

अब आप कर्मचारियों को सूची से जोड़कर, संपादित करके या हटाकर एप्लिकेशन के साथ खेल सकते हैं।

इसलिए, इस ट्यूटोरियल में, हमने एंगुलर 8 में सीआरयूडी फंक्शनलिटी को पूरा कर लिया है। आप हमारे . पर कोड पा सकते हैं जीथब भंडार . यदि एप्लिकेशन बनाते समय आपको कोई संदेह है, तो टिप्पणी करें।

पढ़ने के लिए धन्यवाद ❤

अगर आपको यह पोस्ट पसंद आया है, तो इसे अपने सभी प्रोग्रामिंग मित्रों के साथ साझा करें!

हमारा अनुसरण इस पर कीजिये फेसबुक | ट्विटर