सादर करीत आहे अँगुलर सीएलआय

या पोस्टमध्ये, आम्ही अँगुलर सीएलआय बद्दल जाणून घेऊ आणि नवीन अंगुलर प्रकल्प सुरू करण्यासाठी त्याचा कसा वापर करावा ते पाहू.

अँगुलर सीएलआय म्हणजे काय?

अँगुलर सीएलआय हे अंगुल्य प्रकल्प सुरू करण्यासाठी आणि कार्य करण्यासाठी अधिकृत साधन आहे. हे आपल्यास जटिल कॉन्फिगरेशनच्या त्रासातून वाचवते आणि टाइपस्क्रिप्ट, वेबपॅक इत्यादी साधने तयार करते.

अँगुलर सीएलआय स्थापित केल्यानंतर, आपल्याला एखादा प्रकल्प तयार करण्यासाठी एक कमांड चालविण्याची आवश्यकता आहे आणि दुसरे आपल्या अनुप्रयोगासह प्ले करण्यासाठी स्थानिक विकास सर्व्हरचा वापर करुन त्याची सेवा देण्यासाठी.

आजकालच्या बहुतेक आधुनिक फ्रंटएंड साधनांप्रमाणेच, एन्युलर सीएलआय नोड.जेजच्या शीर्षस्थानी तयार केलेले आहे.

नोड.जेएस एक सर्व्हर तंत्रज्ञान आहे जे आपल्याला सर्व्हरवर जावास्क्रिप्ट चालविण्यास आणि सर्व्हर-साइड वेब अनुप्रयोग तयार करण्यास अनुमती देते. तथापि, अँगुलर हे एक फ्रंट एंड तंत्रज्ञान आहे, म्हणूनच आपल्याला आपल्या विकास मशीनवर नोड.जे स्थापित करणे आवश्यक आहे, ते केवळ सीएलआय चालविण्यासाठी आहे.

एकदा आपण उत्पादनासाठी आपला अ‍ॅप तयार केल्यावर आपल्याला नोड.जेची आवश्यकता नाही कारण अंतिम बंडल फक्त स्थिर एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट असतात जे कोणत्याही सर्व्हरद्वारे किंवा सीडीएनद्वारे दिले जाऊ शकतात.

असे म्हटले जात आहे की, जर आपण एंग्युलरसह पूर्ण-स्टॅक वेब अनुप्रयोग तयार करीत असाल तर आपल्याला पुढच्या टोकासाठी आणि मागील टोकासाठी जावास्क्रिप्ट वापरू इच्छित असल्यास आपल्याला मागील बाजूचा भाग तयार करण्यासाठी नोड.जे आवश्यक असू शकतात.

एमईएएन स्टॅक पहा - ही एक आर्किटेक्चर आहे ज्यात मोंगोडीबी, एक्सप्रेस (एक वेब सर्व्हर आणि नोड.जेजच्या वरच्या मजल्यावरील आरईएसटी एपीआय फ्रेमवर्क) आणि अँगुलरचा समावेश आहे. आपण प्रारंभ करण्यासाठी चरण बाय चरण प्रशिक्षण इच्छित असल्यास आपण हा लेख वाचू शकता.

या प्रकरणात, नोड.जेचा वापर आपल्या अ‍ॅपचा मागील भाग तयार करण्यासाठी केला जातो आणि आपल्याला पीएचपी, रुबी किंवा पायथन सारख्या कोणत्याही सर्व्हर-साइड तंत्रज्ञानासह पुनर्स्थित केले जाऊ शकते. परंतु एंग्युलर त्याच्या सीएलआय टूलशिवाय आणि एनपीएम पासून पॅकेजेस स्थापित करण्यासाठी नोड.जेवर अवलंबून नाही.

एनपीएम म्हणजे नोड पॅकेज मॅनेजर. हे नोड पॅकेजेस होस्ट करण्यासाठी एक रेजिस्ट्री आहे. अलिकडच्या वर्षांत याचा उपयोग फ्रंट एंड पॅकेजेस आणि अ‍ँग्युलर, रिएक्ट, व्ह्यू.जेज आणि बूटस्ट्रॅप सारख्या लायब्ररी प्रकाशित करण्यासाठी देखील केला जातो.

टीप: आपण आमचे अँगुलर पुस्तक डाउनलोड करू शकता: अँगुलरसह आपले प्रथम वेब अ‍ॅप्स विनामूल्य तयार करा.

अँगुलर सीएलआय स्थापित करत आहे

प्रथम, आपल्याकडे आपल्या विकास मशीनवर नोड आणि एनपीएम स्थापित करणे आवश्यक आहे. असे करण्याचे बरेच मार्ग आहेत, जसे कीः

  • आपल्या सिस्टममध्ये नोडच्या एकाधिक आवृत्त्या स्थापित करण्यासाठी आणि कार्य करण्यासाठी एनव्हीएम (नोड व्हर्जन मॅनेजर) वापरणे
  • आपल्या ऑपरेटिंग सिस्टमचे अधिकृत पॅकेज व्यवस्थापक वापरुन
  • अधिकृत वेबसाइटवरून स्थापित करत आहे.

चला हे सोपे ठेवू आणि अधिकृत वेबसाइट वापरू. फक्त डाउनलोड पृष्ठास भेट द्या आणि विंडोजसाठी बायनरीज मिळवा, नंतर सेटअप विझार्डचा अनुसरण करा.

कमांड प्रॉमप्टवर पुढील आदेश चालवून नोड तुमच्या सिस्टमवर नोड स्थापित असल्याची खात्री करुन घेऊ शकता जे नोडची स्थापित आवृत्ती दर्शवेल:

ode नोड -v

पुढे, अँगुलर सीएलआय स्थापित करण्यासाठी पुढील आज्ञा चालवा:

ang n दुपारी इन्स्टॉल @ एंगुलर / क्लाइंट

या लेखनाच्या वेळी, अँगुलर 8.3 स्थापित केले जाईल.

आपल्याला अँगुलर 9 स्थापित करायचे असल्यास पुढील टॅग खालीलप्रमाणे जोडा:

next n pm पुढील @ कोनीय / सीएल @ स्थापित करा

कमांड यशस्वीरित्या समाप्त झाल्यानंतर, आपण एंग्युलर सीएलआय स्थापित केले पाहिजे.

अँगुलर सीएलआय साठी एक द्रुत मार्गदर्शक

अँगुलर सीएलआय स्थापित केल्यानंतर, आपण बर्‍याच कमांडस चालवू शकता. चला स्थापित केलेल्या सीएलआयची आवृत्ती तपासून प्रारंभ करूया:

. ng आवृत्ती

आपल्याला चालविण्याची दुसरी कमांड म्हणजे संपूर्ण वापर मदत मिळवण्यासाठी मदत आदेशः

. ng मदत

सीएलआय पुढील आज्ञा पुरवते:

जोडा: आपल्या प्रकल्पात बाह्य लायब्ररीसाठी समर्थन जोडते.

बिल्ड (बी): दिलेल्या आउटपुट पाथवर डिस्ट / नावाच्या आउटपुट निर्देशिकेत एक अँगुलर अॅप कंपाईल करते. वर्कस्पेस निर्देशिकेतूनच अंमलात आणले जाणे आवश्यक आहे.

कॉन्फिगरेशन: टोकदार संरचना मूल्ये पुनर्प्राप्त किंवा सेट करते.

दस्तऐवज (डी): ब्राउझरमध्ये अधिकृत अँगुलर दस्तऐवजीकरण (एंगुलर.आयओ) उघडते आणि दिलेल्या कीवर्डसाठी शोध घेते.

e2e (e): एंगल्युलर अ‍ॅप बनविते आणि सर्व्ह करते, त्यानंतर प्रोटेक्टर वापरून एंड-टू-एंड टेस्ट चालवते.

व्युत्पन्न (छ): योजनाबद्ध आधारे फायली व्युत्पन्न आणि / किंवा सुधारित करते.

मदत: उपलब्ध कमांड आणि त्यांच्या छोट्या वर्णनांची यादी करा.

लिंट (एल): दिलेल्या प्रोजेक्ट फोल्डरमध्ये अँगुलर अ‍ॅप कोडवर उपसा साधने चालविते.

new (n): एक नवीन कार्यक्षेत्र आणि प्रारंभिक कोणीय अॅप तयार करते.

चालवा: आपल्या प्रकल्पात परिभाषित सानुकूल लक्ष्य चालविते.

सर्व्ह (सर्व्हर): फायली बदलांवर पुनर्बांधणी करून, आपला अ‍ॅप तयार आणि सर्व्ह करतो.

चाचणी (टी): प्रकल्पात युनिट चाचण्या चालवतात.

अद्यतनः आपला अनुप्रयोग आणि त्याची अवलंबन अद्ययावत करते. Https://update.angular.io/ पहा

आवृत्ती (व्ही): आउटपुट आउट अँगुलर सीएलआय आवृत्ती.

xi18n: स्त्रोत कोडमधून i18n संदेश काढते.

प्रकल्प तयार करीत आहे

आपल्या कमांड-लाइन इंटरफेसमध्ये खालील कमांड चालवून आपण आपला अँगुलर प्रोजेक्ट द्रुतपणे निर्माण करण्यासाठी एंगल्युलर सीएलआय वापरू शकता:

fr ng नवीन फ्रंटएंड

टीप: फ्रंटएंड हे प्रकल्पाचे नाव आहे. आपण अर्थातच आपल्या प्रकल्पासाठी कोणतेही वैध नाव निवडू शकता. आम्ही पूर्ण-स्टॅक अनुप्रयोग तयार केल्यामुळे मी फ्रंट-एंड अनुप्रयोगासाठी नाव म्हणून फ्रंटएंड वापरत आहे.

आधी सांगितल्याप्रमाणे, सीएलआय आपल्याला विचारेल की आपण अँगुलर राउटिंग जोडू इच्छिता? आणि आपण y (होय) किंवा n (नाही) प्रविष्ट करुन उत्तर देऊ शकता, जे डीफॉल्ट पर्याय आहे. हे आपल्याला वापरू इच्छित स्टाईलशीट स्वरूप (जसे की सीएसएस) बद्दल देखील विचारेल. आपले पर्याय निवडा आणि सुरू ठेवण्यासाठी एंटर दाबा.

त्यानंतर, आपण आपला प्रकल्प निर्देशिका रचना आणि कॉन्फिगरेशन आणि कोड फायलींचा एक समूह तयार करुन तयार कराल. हे बहुधा टाइपस्क्रिप्ट आणि जेएसओएन स्वरूपनात असेल. चला प्रत्येक फाईलची भूमिका पाहूया:

  • / e2e /: मध्ये वेबसाइटच्या अंत-टू-एंड (वापरकर्त्याचे वर्तन अनुकरण करणे) चाचण्या असतात
  • / नोड_मॉड्यूल्स /: सर्व तृतीय पक्ष लायब्ररी एनपीएम स्थापना वापरून या फोल्डरमध्ये स्थापित केल्या आहेत
  • / src /: मध्ये अनुप्रयोगाचा स्त्रोत कोड आहे. बहुतेक काम येथे केले जाईल
  • / अ‍ॅप /: मध्ये मॉड्यूल आणि घटक आहेत
  • / मालमत्ता /: मध्ये प्रतिमा, चिन्ह आणि शैली यासारख्या स्थिर मालमत्ता आहेत
  • / वातावरण /: मध्ये वातावरण (उत्पादन आणि विकास) विशिष्ट कॉन्फिगरेशन फाइल्स आहेत
  • ब्राउझर यादी: सीएसएस समर्थनासाठी ऑटोप्रिफिक्सरद्वारे आवश्यक
  • फेविकॉन.आयसीओ: फॅव्हिकॉन
  • अनुक्रमणिका. html: मुख्य HTML फाइल
  • karma.conf.js: कर्मासाठी कॉन्फिगरेशन फाइल (एक चाचणी साधन)
  • main.ts: जिथून Mपमोड्यूल बूटस्ट्रॅप केले आहे तेथून मुख्य प्रारंभ होणारी फाईल
  • पॉलीफिल.ट्स: अँगुलरला आवश्यक असलेले पॉलिफिल्स
  • styles.css: प्रकल्पासाठी ग्लोबल स्टाईलशीट फाइल
  • test.ts: ही कर्मासाठी कॉन्फिगरेशन फाइल आहे
  • tsconfig. *. json: टाइपस्क्रिप्टसाठी कॉन्फिगरेशन फाइल्स
  • एंग्युलर.जेसन: सीएलआय साठी कॉन्फिगरेशन समाविष्ट करते
  • package.json: प्रकल्पाची मूलभूत माहिती (नाव, वर्णन आणि अवलंबन)
  • README.md: एक मार्कडाउन फाइल ज्यात प्रकल्पाचे वर्णन आहे
  • tsconfig.json: टाइपस्क्रिप्टसाठी कॉन्फिगरेशन फाइल
  • tslint.json: TSlint (स्थिर विश्लेषण साधन) साठी कॉन्फिगरेशन फाइल

आपल्या प्रकल्पात सेवा देत आहे

अँगुलर सीएलआय आपल्या स्थानिक मशीनवर फ्रंट-एंड अ‍ॅप्स विकसित करण्यासाठी संपूर्ण टूल-चेन प्रदान करते. अशाच प्रकारे, आपल्या प्रोजेक्टसाठी आपल्याला स्थानिक सर्व्हर स्थापित करण्याची आवश्यकता नाही - आपण फक्त आपल्या टर्मिनलमधून एनजी सर्व्हर कमांडचा वापर आपल्या प्रोजेक्टला सर्व्ह करण्यासाठी करू शकता.

प्रथम, आपल्या प्रोजेक्टच्या फोल्डरमध्ये नेव्हिगेट करा आणि पुढील आज्ञा चालवा:

$ सीडी फ्रंटएंड $ ng सर्व्ह

आपल्या समोरच्या अ‍ॅप्लिकेशनसह प्ले करण्यासाठी आपण आता http: // लोकल होस्ट: 4200 / पत्त्यावर नेव्हिगेट करू शकता. आपण कोणतीही स्त्रोत फाइल बदलल्यास पृष्ठ स्वयंचलितपणे थेट-रीलोड होईल.

कोणीय कलाकृती तयार करीत आहे

अँगुलर सीएलआय एक एनजी जनरेट कमांड प्रदान करते जे विकसकांना मॉड्यूल, घटक, निर्देश, पाईप्स आणि सेवा यासारख्या मूलभूत कोनीय कलाकृती तयार करण्यात मदत करते.

my ng घटक माझा-घटक व्युत्पन्न करा

माझे घटक हे त्या घटकाचे नाव आहे. अँगुलर सीएलआय स्वयंचलितपणे src / app.module.ts फाईलमधील घटक, निर्देश आणि पाईप्सचा संदर्भ जोडेल.

आपण आपला घटक, निर्देशात्मक किंवा पाईप दुसर्‍या मॉड्यूलमध्ये (मुख्य अनुप्रयोग मॉड्यूल, app.module.ts व्यतिरिक्त) जोडू इच्छित असल्यास आपण मॉड्यूलचे नाव आणि स्लॅशसह घटकाचे नाव उपसर्ग देऊ शकता:

my एनजी जी घटक माझे-मॉड्यूल / माझे-घटक

माझे-मॉड्यूल विद्यमान मॉड्यूलचे नाव आहे.

निष्कर्ष

या पोस्टमध्ये आम्ही आमच्या डेव्हलपमेंट मशीनवर अँगुलर सीएलआय कसे स्थापित करायचे ते पाहिले आहे आणि आम्ही त्याचा वापर नवीन स्क्रोलिंगपासून नवीन अँगुलर प्रकल्प सुरू करण्यासाठी केला आहे.

आम्ही विविध आदेश देखील पाहिले आहेत ज्या आपण आपल्या प्रकल्पाच्या संपूर्ण विकासासाठी मॉड्यूल, घटक आणि सेवा यासारख्या अँगुलर कलाकृती तयार करण्यासाठी वापरू शकता.

आपण लेखकाकडे त्याच्या वैयक्तिक वेबसाइट, ट्विटर, लिंक्डइन आणि गिथबद्वारे पोहोचू किंवा अनुसरण करू शकता.