विंडोज पर एंगुलर के साथ इनस्टॉल और रनिंग कैसे करें
एंगुलर एक ओपन-सोर्स, फ्रंट-एंड वेब एप्लिकेशन डेवलपमेंट फ्रेमवर्क है, यह टाइपस्क्रिप्ट-आधारित है और इसका नेतृत्व Google में एंगुलर टीम और व्यक्तियों और निगमों के समुदाय द्वारा किया जाता है।
आवश्यक शर्तें
यह मार्गदर्शिका मानती है कि आप विंडोज 10 का उपयोग कर रहे हैं। शुरू करने से पहले, आपके पास इंस्टॉलेशन विशेषाधिकारों वाला एक उपयोगकर्ता खाता होना चाहिए और इस दस्तावेज़ में सभी उल्लिखित वेब साइटों तक अप्रतिबंधित पहुंच होनी चाहिए।
दर्शक:
इस दस्तावेज़ को कोई भी व्यक्ति संदर्भित कर सकता है जो विंडोज़ 10 पर नवीनतम नोडज स्थापित करना चाहता है
सिस्टम आवश्यकताएं
- विंडोज 10 ओएस
- 4 जीबी रैम
- १० जीबी फ्री स्पेस
स्थापना प्रक्रिया
कोणीय क्ली स्थापित करने के लिए हमें चाहिए नोडज और एनपीएम . आइए पहले समझते हैं कि ये क्या हैं और हमें इनकी आवश्यकता क्यों है।
Nodejs क्या है और आपको कोणीय विकास की आवश्यकता क्यों है?
Node.js एक ओपन-सोर्स, क्रॉस-प्लेटफ़ॉर्म जावास्क्रिप्ट रन-टाइम वातावरण है जो ब्राउज़र के बाहर जावास्क्रिप्ट कोड निष्पादित करता है। Node.js डेवलपर्स को नेटवर्क एप्लिकेशन, कमांड लाइन टूल्स, वेब एपीआई, वेब एप्लिकेशन जैसे विभिन्न प्रकार के एप्लिकेशन विकसित करने के लिए जावास्क्रिप्ट का उपयोग करने देता है। आपको देव टूलिंग (जैसे लाइव रीलोडिंग सुविधाओं के साथ स्थानीय वेब सर्वर) और देव अनुभव के लिए नोडज की आवश्यकता है, आपको उत्पादन में प्रतिक्रिया चलाने के लिए नोडज की आवश्यकता नहीं है।
एनपीएम क्या है और आपको कोणीय विकास की आवश्यकता क्यों है?
एनपीएम नोड पैकेज मैनेजर के लिए खड़ा है, यह जावास्क्रिप्ट अनुप्रयोगों के लिए एक निर्भरता प्रबंधन उपकरण है। यह उपकरण कोणीय विकास का समर्थन करने के लिए पुस्तकालयों और अन्य उपकरणों को स्थापित करने में मदद करेगा।
आइए नोडज पर नोडज इंस्टॉलेशन पोस्ट पूरा होने के साथ शुरू करें हम कोणीय क्ली स्थापित करेंगे और नई कोणीय परियोजना बनाएंगे
1. डाउनलोड नोडज
1.विजिट नोडज डाउनलोड पेज यहां
2. नोड इंस्टालर का नवीनतम संस्करण डाउनलोड करने के लिए विंडोज़ इंस्टालर पर क्लिक करें।
2. नोडज स्थापित करें
1. डाउनलोड किए गए नोड-vxx.xx.xx.msi (उदाहरण के लिए नोड-v10.15.0.msi) पर पिछले चरण में इंस्टॉलेशन शुरू करने के लिए क्लिक करें जो स्क्रीन के नीचे लाता है। फिर से लॉगिन करने के लिए अगला
2.बाय पिछले चरण में अगला क्लिक करने से आपको लाइसेंस स्वीकार करने के लिए कहा जाएगा, कृपया चेकबॉक्स पर क्लिक करके स्वीकार करें और क्लिक करें अगला
3.क्लिक करें अगला
4.क्लिक करें अगला
5.क्लिक करें **इंस्टॉल करें, **इसके लिए आवश्यक अधिकारों का अनुरोध किए जाने पर उन्नत अनुमतियों की आवश्यकता हो सकती है
6. समाप्त क्लिक करें
3. परीक्षण स्थापना
- कमांड प्रॉम्प्ट खोलें और नोड का परीक्षण करने के लिए कमांड के नीचे चलाएँ
node -v
आपको नीचे की तरह एक आउटपुट देखना चाहिए (नोट: आपका संस्करण आपकी स्थापना की तारीख के आधार पर भिन्न हो सकता है क्योंकि नोडज टीम एक आक्रामक रिलीज करती है लेकिन सुनिश्चित करें कि आपका नोड संस्करण> v10.0.0 है)
- कमांड प्रॉम्प्ट खोलें और npm का परीक्षण करने के लिए कमांड के नीचे चलाएँ
npm -v
आपको नीचे की तरह एक आउटपुट देखना चाहिए (नोट: आपका संस्करण आपकी स्थापना की तारीख के आधार पर भिन्न हो सकता है क्योंकि नोडज टीम एक आक्रामक रिलीज करती है लेकिन सुनिश्चित करें कि आपका npm संस्करण है >5 )
कोणीय क्लि स्थापित करें
उत्पादक कोणीय विकास वातावरण की स्थापना के लिए टाइपस्क्रिप्ट जैसे उपकरणों को कॉन्फ़िगर करने की आवश्यकता होगी, वेबपैक और अन्य कोणीय निर्भरताएं जो कोणीय दुनिया में नौसिखिया के लिए कॉन्फ़िगर करने के लिए जटिल हैं। ऐसे कई उपकरण हैं जो इस समस्या को कम करने में मदद करते हैं जिनमें से कोणीय क्ली सबसे आसान और बेहतरीन उपकरण है जिसमें उत्पादन ग्रेड कॉन्फ़िगरेशन पूर्व-निर्मित है। कोणीय क्ली कमांड की विस्तृत श्रृंखला के साथ आता है जो कोणीय विकास, परीक्षण और निर्माण प्रक्रिया को प्रबंधित करने में मदद करता है
हम npm का उपयोग करके कोणीय क्ली स्थापित करेंगे। टर्मिनल पर नीचे दिखाए गए इंस्टॉल कमांड को चलाएं
npm install -g @angular/cli
सफल इंस्टॉलेशन पर आपको ऊपर जैसा आउटपुट देखना चाहिए (ध्यान दें कि जब तक आप इस इंस्टाल कमांड को चलाते हैं, तब तक आपका कोणीय/क्ली संस्करण भिन्न हो सकता है)
टेस्ट @ कोणीय/क्ली
To test the @angular/cli run ng version command
बधाई हो, आपने @angular/cli . को सफलतापूर्वक स्थापित कर लिया है
पहला हैलो वर्ल्ड एप्लिकेशन चला रहा है
- एनजी न्यू कमांड का उपयोग करके कोणीय एप्लिकेशन बनाएं जैसा कि नीचे दिखाया गया है
यह कमांड हैलो-एंगुलर नाम का एक नया फोल्डर बनाता है और सभी फाइलें बनाता है और इस फोल्डर के भीतर आवश्यक लाइब्रेरी सेट करता है और बिना किसी अतिरिक्त कॉन्फ़िगरेशन के एंगुलर प्रोजेक्ट को निष्पादित करने के लिए तैयार करता है
2. एक बार प्रोजेक्ट बनने के बाद प्रोजेक्ट डायरेक्टरी में परिवर्तन करें और एनजी सर्व कमांड का उपयोग करके एप्लिकेशन चलाएं जैसा कि नीचे दिखाया गया है
सेवा का -या कमांड वेबपैक डेवलपमेंट सर्वर शुरू करता है जो बदले में सभी निर्माण प्रक्रिया करता है और एक ब्राउज़र विंडो खोलता है और डिफ़ॉल्ट रूप से चलने वाले एप्लिकेशन यूआरएल को लोड करता है।
सफल निष्पादन पर आपको ब्राउज़र में निम्न आउटपुट देखना चाहिए
जैसा कि चर्चा की गई है, कोणीय क्ली महान टूलिंग के साथ आता है, उत्पादक सुविधाओं में से एक वेबपैक हॉट रीलोडिंग है, जो लाइव पर परिवर्तन को प्रदर्शित करता है और डेवलपर को काम को फिर से तैनात करने और पुनः लोड करने के लिए बहुत समय बचाता है।
आइए इस महान सुविधा के अनुभव को देखने के लिए प्रोजेक्ट खोलें और कुछ बदलाव करें। हम बनाई गई फ़ाइलों और फ़ोल्डरों के महत्व को समझने के लिए परियोजना संरचना के माध्यम से जाएंगे
किसी भी JS संपादक में पिछले चरण में बनाए गए प्रोजेक्ट को खोलें, यहाँ आप देखते हैं कि प्रोजेक्ट vscode संपादक में खुला है। एक्सप्लोरर सेक्शन में बाईं ओर आप फाइल एक्सप्लोरर देखते हैं जो आपको कई फोल्डर और फाइल दिखाता है जो एनजी न्यू कमांड द्वारा बनाए गए थे। आइए उनके माध्यम से चलते हैं
**e2e: **इस फोल्डर में एंड टू एंड टेस्टिंग सोर्स और कॉन्फिगरेशन कोड है। यदि आप एंड टू एंड टेस्टिंग ऑटोमेशन कोड लिखना चाहते हैं, तो आप इस फ़ोल्डर में जाने का प्रयास करें
**नोड_मॉड्यूल: **यह फ़ोल्डर पैकेज मैनेजर (एनपीएम) द्वारा प्रबंधित किया जाता है और इसमें सभी प्रोजेक्ट लाइब्रेरी निर्भरताएं शामिल हैं। इस फ़ोल्डर की फ़ाइलों को संशोधित नहीं किया जाना चाहिए क्योंकि किए गए परिवर्तनों के सुरक्षित होने की गारंटी नहीं है क्योंकि किसी अन्य पुस्तकालय को अद्यतन/स्थापित करने से किए गए परिवर्तनों को अधिलेखित कर दिया जा सकता है।
**src: **यह वह फ़ोल्डर है जिसमें आपके सभी विकास प्रयास शामिल हैं। एक कोणीय डेवलपर के रूप में आपने इस फ़ोल्डर में मॉड्यूल, घटक, सेवाएं, निर्देश आदि बनाने में बहुत समय बिताया।
सूची का अजगर विचरण
अन्य फ़ाइलें जो src फ़ोल्डर के बाहर हैं और कोणीय क्ली, संपादक, टाइपस्क्रिप्ट, लाइनिंग और npm के लिए कॉन्फ़िगरेशन फ़ाइलें हैं
अब src फोल्डर में आते हैं। इस फोल्डर के अंदर और भी कई फोल्डर होते हैं जैसे
अनुप्रयोग - इस फोल्डर में आपका सारा सोर्स कोड होता है, और यही वह जगह है जहाँ आपके विकास के सारे प्रयास चलते हैं
संपत्तियां - छवियों आदि को पसंद करने के लिए स्थिर गधे शामिल हैं,
वातावरण - प्रति पर्यावरण कॉन्फ़िगरेशन फ़ाइल शामिल है जो देव / परीक्षण और उत्पाद वातावरण के लिए उपयोग की जाने वाली सेटिंग्स रखती है
अन्य फ़ाइलें कॉन्फ़िगरेशन फ़ाइलें और सेटिंग्स हैं।
सभी फाइलों में से main.ts शुरुआती फाइल है और इस फाइल से प्रोजेक्ट कोड का निष्पादन शुरू होता है।
आइए AppComponent में एक कोड परिवर्तन करें, app.component.html खोलें और नीचे दिए गए कोड में दिखाए अनुसार परिवर्तन करें
फ़ाइल को सहेजें और चर्चा के अनुसार परिनियोजित और लोड किए गए परिवर्तनों को देखने के लिए ब्राउज़र पर वापस जाएँ, यह कोणीय क्ली टूलिंग सेटअप की विशेषताओं में से एक है।
नए परिवर्तनों के साथ आपकी ब्राउज़र विंडो नीचे की तरह दिखनी चाहिए
बधाई!! आपने एक कोणीय प्रोजेक्ट सेटअप किया है
कोणीय क्लिक को अनइंस्टॉल करें
आप npm install के माध्यम से किसी भी लाइब्रेरी या टूल सेटअप को अनइंस्टॉल कर सकते हैं npm अनइंस्टॉल का उपयोग करके अनइंस्टॉल किया जा सकता है। पहले से स्थापित कोणीय क्ली को हटाने के लिए नीचे दिए गए चरण का पालन करें
- कमांड प्रॉम्प्ट पर रन
npm uninstall -g @angular/cli
नोडज अनइंस्टॉल करें
- रन खोलने के लिए windows + R दबाएं और appwiz.cpl टाइप करें और ओके दबाएं।
यह प्रोग्राम खोलेगा और नोड.जेएस के लुक को प्रदर्शित करेगा
- नोड.जेएस पर डबल क्लिक करें या राइट क्लिक करें और अनइंस्टॉल का चयन करें जो नीचे की तरह संकेत देगा और फिर हाँ चुनें
Nodejs की स्थापना रद्द करने की प्रक्रिया शुरू हो जाएगी और आपसे उपयोगकर्ता नियंत्रण के माध्यम से इसे अधिकृत करने के लिए कहेगी। हाँ चुनें, इसमें कुछ समय लगेगा और पूरा हो जाएगा
#कोणीय #वेब-विकास #नोड-जेएस
यह सभी देखें:
- कीव: मल्टीपल बैकएंड्स के लिए सपोर्ट के साथ सिंपल की-वैल्यू स्टोरेज
- यूएसबी पोर्ट काम नहीं कर रहे? इसे ठीक करने का तरीका यहां बताया गया है
- सुपरफार्म (सुपर) क्या है | सुपरफार्म टोकन क्या है | सुपर टोकन क्या है
- उदाहरण के साथ TensorFlow चर और प्लेसहोल्डर ट्यूटोरियल
- डेबियन 10 . पर npm के साथ Node.js कैसे स्थापित करें