एंगुलर सीएलआई के साथ एंगुलर प्रोजेक्ट को कैसे सेटअप और चलाना है?
**एंगुलर ** एक फ्रंट-एंड फ्रेमवर्क है जिसका उपयोग वेब एप्लिकेशन बनाने के लिए किया जाता है। यह एक वर्ग के लिए तर्क और विधियों को बनाने के लिए डिफ़ॉल्ट रूप से टाइपस्क्रिप्ट का उपयोग करता है लेकिन ब्राउज़र टाइपस्क्रिप्ट नहीं जानता है। यहाँ वेबपैक चित्र में आता है, इन टाइपस्क्रिप्ट फ़ाइलों को संकलित करने के लिए वेबपैक का उपयोग किया जाता है जावास्क्रिप्ट . इसके अलावा, आपके कंप्यूटर में एक कोणीय प्रोजेक्ट चलाने के लिए आपको बहुत सारी कॉन्फ़िगरेशन फ़ाइलें चाहिए होंगी।
**एंगुलर सीएलआई **एक ऐसा टूल है जो कुछ आसान कमांड में आपके लिए इन सभी चीजों को करता है। इस सारी प्रक्रिया को करने के लिए एंगुलर सीएलआई वेबपैक का उपयोग करता है।
**नोट: ** कृपया सुनिश्चित करें कि आपने नोड स्थापित किया है और समुद्र तल के ऊपर आपके सिस्टम में। आप निम्न आदेश का उपयोग करके अपने नोड संस्करण और npm संस्करण की जांच कर सकते हैं:
node --version npm --version 
प्रतिक्रिया देशी छवि स्लाइडर
कोणीय CLI का उपयोग करके अपना पहला एप्लिकेशन बनाने के चरण:
- चरण -1: कोणीय क्लि स्थापित करें
npm install - g @angular/cl 
- Step-2: इस कमांड से नया प्रोजेक्ट बनाएं
रूटिंग विकल्प और CSS या SCSS के लिए हाँ चुनें।
ज्यूपिटर नोटबुक मार्कडाउन उदाहरण
ng new myNewApp 
- चरण -3: अपनी परियोजना निर्देशिका पर जाएँ
cd myNewApp 
- चरण -4: सर्वर चलाएँ और अपने आवेदन को क्रिया में देखें
ng serve -o --poll=2000 
निर्देशिका संरचना का परिचय:
- ई2ई इसमें स्वचालित परीक्षण उद्देश्य से संबंधित कोड होता है। उदाहरण के लिए, यदि किसी निश्चित पृष्ठ पर आप REST API को कॉल कर रहे हैं तो रिटर्न स्थिति कोड क्या होना चाहिए, यह स्वीकार्य है या नहीं आदि।
- नोड_मॉड्यूल यह सभी देव निर्भरताओं (केवल विकास के समय में उपयोग किया जाता है) और निर्भरता (विकास के साथ-साथ उत्पादन समय में आवश्यक) को बचाता है, किसी भी नई निर्भरता को प्रोजेक्ट में जोड़े जाने पर यह स्वचालित रूप से इस फ़ोल्डर में सहेजा जाता है।
- एसआरसी इस निर्देशिका में परियोजना से संबंधित हमारे सभी कार्य शामिल हैं यानी घटक बनाना, सेवाएं बनाना, संबंधित पृष्ठ पर सीएसएस जोड़ना आदि।
- पैकेज.जेसन यह फ़ाइल प्रोजेक्ट में जोड़े गए और उपयोग किए गए पुस्तकालयों के बारे में जानकारी उनके निर्दिष्ट संस्करण के साथ संग्रहीत करती है। जब भी प्रोजेक्ट में कोई नया पुस्तकालय जोड़ा जाता है तो उसका नाम और संस्करण package.json में निर्भरता में जोड़ा जाता है।
सेंट्रल पार्क एपिसोड 5
अन्य फ़ाइलें: एक शुरुआत के रूप में आपको इस समय इन फ़ाइलों की आवश्यकता नहीं है, इसके बारे में चिंता न करें। इन सभी का उपयोग संपादक विन्यास और संकलन समय पर आवश्यक जानकारी के लिए किया जाता है। कोणीय सीएलआई में निर्मित वेबपैक आपके लिए सभी का प्रबंधन करता है।
स्रोत फ़ोल्डर के अंदर:
- index.html यह एप्लिकेशन के लिए प्रवेश बिंदु है, ** ऐप-रूट ** टैग इस एकल पृष्ठ एप्लिकेशन पर एप्लिकेशन का प्रवेश बिंदु है, इस पृष्ठ पर कोणीय सामग्री को डीओएम से जोड़ देगा या हटा देगा या नई सामग्री जोड़ देगा डोम। आधार href=/ रूटिंग उद्देश्यों के लिए महत्वपूर्ण है।
- स्टाइल.एससीएसएस यह फ़ाइल वैश्विक स्टाइलशीट है जिसे आप सीएसएस कक्षाओं या चयनकर्ताओं को जोड़ सकते हैं जो कई घटकों के लिए सामान्य हैं, उदाहरण के लिए, आप कस्टम फोंट आयात कर सकते हैं, बूटस्ट्रैप.सीएसएस आयात कर सकते हैं, आदि।
- संपत्तियां इसमें आपके प्रोजेक्ट के लिए जेएस इमेज, फोंट, आइकन और कई अन्य फाइलें शामिल हैं।
ऐप फ़ोल्डर के अंदर:
- ऐप.मॉड्यूल.ts एक कोणीय परियोजना कई अन्य मॉड्यूलों का सम्मिश्रण है ताकि एक एप्लिकेशन बनाने के लिए आपको पदानुक्रम में अपने एप्लिकेशन के लिए एक रूट मॉड्यूल बनाना होगा। यह app.module.ts फाइल वह है। यदि आप रूट स्तर पर अधिक मॉड्यूल जोड़ना चाहते हैं, तो आप जोड़ सकते हैं।
घोषणाओं यह अपने घटकों को संग्रहीत करने के लिए सरणी का संदर्भ है। ऐप कंपोनेंट डिफ़ॉल्ट कंपोनेंट है जो प्रोजेक्ट बनाते समय जेनरेट होता है। परियोजना में उपलब्ध कराने के लिए आपको अपने सभी घटक के संदर्भ को इस सरणी में जोड़ना होगा। आयात यदि आप किसी भी मॉड्यूल को जोड़ना चाहते हैं चाहे कोणीय हो या आपको इसे पूरे प्रोजेक्ट में उपलब्ध कराने के लिए आयात सरणी में जोड़ना होगा। प्रदाताओं यदि आप अपने आवेदन के लिए कोई सेवा तैयार करेंगे तो आप इसे इस प्रदाता सरणी के माध्यम से अपने प्रोजेक्ट में इंजेक्ट करेंगे। एक मॉड्यूल में इंजेक्ट की गई सेवा इसके लिए उपलब्ध है और प्रोजेक्ट पदानुक्रम में इसका चाइल्ड मॉड्यूल है। बूटस्ट्रैप इसमें बनाए गए डिफ़ॉल्ट घटक का संदर्भ है, अर्थात, AppComponent* **app.component.html **पृष्ठ में परिवर्तन करने के लिए इस फ़ाइल को संपादित करें। आप इस फ़ाइल को HTML फ़ाइल के रूप में संपादित कर सकते हैं। सीधे div या बॉडी टैग के अंदर उपयोग किए गए किसी अन्य टैग के साथ काम करें, ये घटक हैं और जोड़ते नहीं हैं एचटीएमएल हेड बॉडी टैग।
- app.component.spec.ts ये स्वचालित रूप से जेनरेट की गई फ़ाइलें हैं जिनमें स्रोत घटक के लिए यूनिट परीक्षण होते हैं।
- app.component.ts आप .ts फ़ाइल में HTML संरचना की प्रोसेसिंग कर सकते हैं। प्रसंस्करण में डेटाबेस से जुड़ना, अन्य घटकों के साथ बातचीत करना, रूटिंग, सेवाएं आदि जैसी गतिविधियां शामिल होंगी।
- app.component.scss यहां आप अपने कंपोनेंट के लिए CSS जोड़ सकते हैं। आप एससीएसएस लिख सकते हैं जिसे आगे एक ट्रांसपिलर द्वारा सीएसएस में संकलित किया गया है।
प्रोजेक्ट पर काम करते समय आपको और अधिक कमांड की आवश्यकता होगी:
ng generate component component_name ng generate service service_name ng generate directive directive_name #कोणीय #वेब-विकास
क्या xdc एक अच्छा निवेश है