सामग्री
- 01. आवृत्ती तपासणी चालवा
- 02. अँगुलर स्थापित करा
- 03. प्रोजेक्ट सांगाडा तयार करा
- 04. हार्नेस डिफरेंशियल लोडिंग
- 05. ... आणि निकाल पहा
- 06. वेब वर्कर स्पॉन
- 07. कोड एक्सप्लोर करा
- 08. मचान सेट अप करा
- 09. बांधकामकर्त्याअभावी चिंता करू नका
- 10. लहान कंपाईल रन कार्यान्वित करा
- ११ ... आणि आउटपुट शोधा
- १२. कामावर जा
- 13. आयव्ही एक्सप्लोर करा
- 14. सुधारित एनजी प्रक्रियेचा प्रयत्न करा
- 15. सुधारित स्थलांतराचा आनंद घ्या
- 16. कार्यक्षेत्र नियंत्रण एक्सप्लोर करा
- 17. प्रक्रियेस गती द्या
- 18. चालणे मृत टाळा
- 19. बदल लॉग पहा
अँगुलर 8 ही गूगलच्या अँगुलरची नवीनतम आवृत्ती आहे - आजूबाजूच्या सर्वोत्तम जावास्क्रिप्ट फ्रेमवर्कपैकी एक. या लेखात, आम्ही अँगुलर 8 विषयी काय विशेष आहे ते पाहू आणि प्रारंभ कसे करावे हे दर्शवित आहोत. प्रथम, आत्तापर्यंत चौकटीत काय घडले याबद्दल थोडक्यात माहिती.
अँगुलरच्या परिचयामुळे वेब विकासात एक नमुना बदलला: बर्‍याच लायब्ररी तुलनेने मर्यादित वास्तुशास्त्रीय प्रभावांसह विकसकांना समर्थन पुरविण्यापर्यंत मर्यादीत असताना, अँगुलरचा विकसक कार्यसंघ अन्य दिशेने गेला. त्यांचे उत्पादन आपल्याला विशिष्ट आर्किटेक्चर वापरण्यास भाग पाडते, ज्यात अवघड ते व्यावसायिकरित्या अर्थहीन असतात. खरं तर, बहुतेक एंगल्युलर कोड ब्राउझरला कधीही हिट होण्यापूर्वी तुलनेने जटिल ट्रान्सप्लेशन टूलचेनवरुन जातो.
अँगुलरच्या अफाट यशामुळे, Google Inc च्या आत आणि बाहेरील दोन्ही बाजूंनी, विकास स्थिर आणि स्थिर झाला आहे. याचा अर्थ असा की ब्रेकिंग कोड बदल काही कमी आहेत, तर अर्ध-वार्षिक अपग्रेड्स वेब ब्राउझिंग लँडस्केपमधील बदलांसाठी फ्रेमवर्क अनुकूलित करण्यावर केंद्रित आहेत.
अँगुलर 8 च्या बाबतीत, उदाहरणार्थ, एक नवीन जावास्क्रिप्ट कंपाईलर उपयोजित आहे (तरीही प्रयोगात्मक असले तरीही). जुन्या ब्राउझरच्या खर्चावर व्युत्पन्न सुसंगतता कोड लक्षणीय लहान आणि वेगवान होण्यास अनुकूलित करते. याउप्पर, अँगुलरची प्रक्रिया क्षमता वाढविण्यासाठी वेब वर्कर समर्थन एकत्रित केले आहे. थोडक्यात, बर्‍याच गोष्टी पाहायला मिळतील - म्हणून आता आपण त्यात डुंबू.
आपण त्याऐवजी कोडशिवाय साइट डिझाइन करत असल्यास, यापैकी एक सुलभ वेबसाइट बिल्डर वापरुन पहा. आणि गोष्टी आणखी नितळ बनवण्यासाठी आपली वेब होस्टिंग सेवा योग्य मिळवा.
01. आवृत्ती तपासणी चालवा
एंगल्युलर टूलचेन नोडजेएस वातावरणात राहते. या लेखनानुसार, नोड.जेएस १०. or किंवा त्याहून अधिक आवश्यक आहे - जर आपणास स्वतःस जुन्या आवृत्तीवर आढळले तर नोड.जेएस वेबसाइटला भेट द्या आणि अपग्रेड मिळवा. खाली दिलेला कोड या मशीनवरील आवृत्तीची स्थिती दर्शवितो.
ताम्हान @ ताम्हान 18: ~ ode नोड -v व्ही 12.4.0 ताम्हान @ ताम्हान 18: $ pm एनपीएम -v 6.9.0
02. अँगुलर स्थापित करा
अँगुलरचे टूलचेन नावाच्या कमांड लाइन युटिलिटीमध्ये असते एनजी. हे सुप्रसिद्ध एनपीएम मार्गे स्थापित केले जाऊ शकते.
ताम्हान @ तंहान १:: do $ सुद एनपीएम इन्स्टॉल -जी @ एंगुलर / क्लायट ताम्हान @ ताम्हान १:: $ $ एनजी आवृत्ती
खाली दिलेल्या प्रतिमेत दर्शविलेल्या प्रश्नाचे उत्तर देण्यास काळजी घ्या.
साधनातून आवृत्तीची माहिती मिळवणे खूप अवघड आहे - केवळ वाक्यरचना अद्वितीय नाही तर आउटपुट देखील वर्बोज आहे (खाली प्रतिमा पहा).
03. प्रोजेक्ट सांगाडा तयार करा
एनजी आमच्यासाठी अँगुलर मचान तयार करते. पुढील चरणांमध्ये, आम्हाला मार्ग जोडायचे आहे, आणि सीएसएस ट्रान्सप्लीशनसाठी Sass वापरायचे आहे. काही कारणास्तव तैनाती अयशस्वी झाल्यास, कार्यरत निर्देशिका रिक्त करा आणि रीस्टार्ट करा एनजी सुपरयूझर हक्कांसह.
ताम्हान @ ताम्हान 18: ~ k एमकेडीर एंगुलरस्पेस ताम्हान @ ताम्हान 18: $ d सीडी अँगुलरस्पेस / ताम्हान @ ताम्हान 18: ~ / एंगुलरस्पेस $ एनजी नवीन वर्कटेस्ट
04. हार्नेस डिफरेंशियल लोडिंग
अँगुलरची नवीन आवृत्ती कमी प्रभावासाठी बॅकवर्ड कॉम्पॅटिबिलिटी कोडला अनुकूल करते - एक फाइल म्हणतात ब्राउझर यादी कोणत्या ब्राउझरचे समर्थन करायचे ते ठरवू देते. उघडा ब्राउझर यादी आणि शब्द काढून टाका नाही आयई 9 ते आयई 11 समोर.
. . . > ०.%% शेवटची २ आवृत्त्या फायरफॉक्स ईएसआर मेलेली नाहीत आय ० -11 -११ # आयई -11 -११ समर्थनासाठी, ’नाही’ काढा.
05. ... आणि निकाल पहा
प्रोजेक्टच्या संकलनाची ऑर्डर द्या, वितरण फोल्डरमध्ये बदला आणि अनावश्यक नकाशा फाइल्स शुद्ध करा.
ताम्हान @ ताम्हान 18: ~ / एंगुलरस्पेस / वर्कर्टेस्ट $ सूडो एनजी बिल्ड ताम्हान @ ताम्हान 18: ~ / एंगुलरस्पेस / वर्कर्टेस्ट / डिस्ट / वर्कर्टेस्ट $ एलएस
परिणाम पाहण्यासाठी झाडाची मागणी करा - एनजी विविध कोड फायलींच्या एकाधिक आवृत्त्या तयार करतात (खाली प्रतिमा पहा).
06. वेब वर्कर स्पॉन
वेब कामगार जावास्क्रिप्टला मूळ अनुप्रयोगांच्या शेवटच्या सीमेवर प्रवेश करू देतात: कार्यांची मोठ्या प्रमाणात समांतर प्रक्रिया. अँगुलर 8 सह, वेबकर्त्यास अगदी आरामात तयार केले जाऊ शकते एनजी कमांड लाइन युटिलिटी
ताम्हान @ ताम्हान 18: ang / एंगुलरस्पेस / वर्कर्टेस्ट $ सूद एनजी वेब-वर्कर मायकर्कर तयार करा ) अद्ययावत कोणीय.जसन (3640 बाइट)
07. कोड एक्सप्लोर करा
एनजीचे आउटपुट प्रथम दृष्टीक्षेपात भयानक दिसत आहे. फाईल उघडत आहे src / app / myworker.worker.ts निवडीच्या कोड एडिटरमध्ये आपल्याला कोड चांगल्या प्रकारे माहित असावा हे कोड प्रकट करते वेबवर्कर तपशील तत्वतः, कामगार संदेश प्राप्त करतो आणि आवश्यकतेनुसार त्यांची प्रक्रिया करतो.
/// संदर्भ lib = "वेबवर्कर" /> Eवेन्टलिस्टनर (’संदेश’, ({डेटा}) => {कॉन्ट्रॅक्ट प्रतिसाद = `कामगार प्रतिसाद $ {डेटा}`; पोस्टमेसेज (प्रतिसाद);});
08. मचान सेट अप करा
टोकदार अनुप्रयोगांमध्ये घटक असतात. आमच्या वेब वर्करला काढून टाकणे चांगले काम आत केले जाते अ‍ॅपकंपोनेंट, जे ऐकण्यासाठी समाविष्ट करण्यासाठी विस्तारित केले आहे OnInit कार्यक्रम. आत्ता, ते फक्त स्थिती माहिती उत्सर्जित करेल.
आयात करा @ घटक, ऑनइनिट} कडून ’@ अँगुलर / कोर’; @ कंपोनेंट ({..}) एक्सपोर्ट क्लास Onप कॉम्पोनेन्ट ऑनलिनिट कार्यान्वित करते {शीर्षक = ’वर्कर्टेस्ट’; ngOnInit () {console.log ("अ‍ॅपकंपोनेंट: ऑनइनिट ()"); }}
09. बांधकामकर्त्याअभावी चिंता करू नका
अनुभवी टाइपस्क्रिप्ट विकसक स्वत: ला विचारतात की आमचा कोड प्रोग्रामिंग भाषेद्वारे प्रदान केलेला कन्स्ट्रक्टर का वापरत नाही. त्यामागचे कारण ते आहे एनजीओनिट जेव्हा एक आरंभिक घटना घडते तेव्हा गोळीबार होणारी एक लाइफसायकल घटना आहे - याला वर्ग विनंतीशी परस्पर जोडण्याची आवश्यकता नाही.
10. लहान कंपाईल रन कार्यान्वित करा
या वेळी, कार्यक्रम चालविण्यासाठी सज्ज आहे. आम्ही हे आतच्या सर्व्हरवरून कार्यान्वित करू एनजीसर्व्हर कमांडद्वारे विनंती केली जाऊ शकते. या दृष्टिकोनाचा एक सुबक पैलू हा आहे की प्रोग्राम बदलांचा शोध घेत आणि फ्लायवरील प्रोजेक्टची पुन्हा कंपील करतो.
tamhan @ TAMHAN18: ang / अंगुलरस्पेस / वर्कर्टेस्ट $ sudo ng सर्व्ह
खाली दिलेल्या प्रतिमेत कृती करताना हे पहाण्यासाठी आकृती पहा.
११ ... आणि आउटपुट शोधा
एनजी सर्व्ह त्याच्या स्थानिक वेब सर्व्हरचा पत्ता ठेवतो, जो सहसा असतो HTTP: // स्थानिक होस्ट: 4200 /. वेबपृष्ठ उघडा आणि स्थिती आउटपुट पहाण्यासाठी विकसक साधने उघडा. ते लक्षात ठेवा कन्सोल.लॉग ब्राउझर कन्सोलवर डेटा आउटपुट करतो आणि नोडजेएस घटना कन्सोलला स्पर्श केला नाही.
१२. कामावर जा
या वेळी आम्ही कामगारांचा एक उदाहरण तयार करतो आणि त्यास संदेश प्रदान करतो. त्यानंतर त्याचे परिणाम ब्राउझर कन्सोलमध्ये दर्शविले जातात.
if (typof Worker! == ’अपरिभाषित’) {// एक नवीन कॉन्स्ट कामगार तयार करा = नवीन कामगार (’./ मायवर्कर. वर्कर’, {प्रकार: ’मॉड्यूल’}); कामगार.onmessage = ({डेटा}) => {कन्सोल.लॉग (’पृष्ठाला संदेश मिळाला: $ {डेटा }’); }; कामगार.पोस्टमेसेज (’हॅलो’); ; else {console.log ("कामगार समर्थन नाही"); }
13. आयव्ही एक्सप्लोर करा
अँगुलरच्या भविष्यातील आवृत्त्या अधिक प्रगत कंपाईलर वापरतील, जे अगदी लहान दृश्यांपर्यंत जाईल. उत्पादन अद्याप पूर्ण झाले नाही, तर आयव्ही-सक्षम कंकालद्वारे तयार केला जाऊ शकतो एनजी नवीन आयव्ही-प्रकल्प - सक्षम-आयव्ही. वैकल्पिकरित्या, स्निपेटमध्ये दर्शविल्यानुसार कंपाईलर सेटिंग्ज बदला.
"कोणीय कंपाइलर ऑप्शन": enable "सक्षम आयव्ही": सत्य}
चेतावणी देणारा शब्द: आयव्हीमुळे आकारात आश्चर्यकारक कपात होते, परंतु ते विनामूल्य नाही. उत्पादन अद्याप स्थिर आहे, म्हणून उत्पादक वातावरणात ते वापरण्याची शिफारस केलेली नाही.
14. सुधारित एनजी प्रक्रियेचा प्रयत्न करा
टोकदार एनजी कमांड लाइन टूल चाईल्ड स्क्रिप्ट्स काही काळासाठी अंतर्गत वापरतात. अँगुलर 8 अप्स पूर्वी आपण आता आपला अनुप्रयोग एकत्रित आणि संकलित केल्यामुळे आपली स्वतःची कार्ये चालविण्यासाठी या सुविधेचा वापर करू शकता.
"आर्किटेक्ट": {"बिल्ड": build "बिल्डर": "@ कोणीय-देवकीट / बिल्ड-अँगुलर: ब्राउझर",
चे एक व्यवस्थित अनुप्रयोग एनजी स्क्रिप्टमध्ये मेघ सेवांवर थेट अनुप्रयोग अपलोड करणे समाविष्ट आहे. गिट रिपॉझिटरी एक उपयुक्त स्क्रिप्ट प्रदान करते जी आपले कार्य फायरबेस खात्यावर अपलोड करते.
15. सुधारित स्थलांतराचा आनंद घ्या
एंग्युलर १.x पासून दूर स्थलांतर करणार्‍या विकसकांना, ज्यांना एंग्युलरजेएस देखील म्हटले जाते, यांना नेव्हिगेटरला ‘एकत्रित’ अनुप्रयोगांमध्ये योग्यरित्या काम करण्यास भाग पाडण्यात अडचणी आल्या आहेत. नवीन युनिफाइड लोकेशन सर्व्हिसचे उद्दीष्ट आहे की ही प्रक्रिया अधिक सुगम करावी.
16. कार्यक्षेत्र नियंत्रण एक्सप्लोर करा
कार्यक्षेत्र रचना गतिकरित्या बदलण्याच्या क्षमतेमुळे मोठ्या प्रकल्पांना फायदा होतो. हे एंग्युलर 8.0 मध्ये सादर केलेल्या नवीन कार्यक्षेत्र एपीआय द्वारे केले आहे - या चरणातील स्निपेट वर्तनाचा एक द्रुत विहंगावलोकन प्रदान करते.
async फंक्शन प्रात्यक्षिक करते () {const यजमान = वर्कस्पेस. createWorkspaceHost (नवीन नोडजेस्सिन्कहॉस्ट ()); कॉन्ट वर्कस्पेस = वर्कस्पेसच्या प्रतीक्षेत. वाचनवोर्कस्पेस (’पथ / ते / कार्यक्षेत्र / निर्देशिका /’, होस्ट); प्रकल्प प्रकल्प = कार्यक्षेत्र.प्रोजेक्ट. (’माय-अ‍ॅप’) मिळवा; कॉन्ट बिल्डटार्ट = प्रोजेक्ट.टारजेट्स. get (’build’); buildTarget.options.optimization = true; वर्कस्पेस.राइट वर्क्सस्पेस (वर्कस्पेस, होस्ट) ची प्रतीक्षा करा; }
17. प्रक्रियेस गती द्या
मोठे जावास्क्रिप्ट कोड बेस तयार करणे कंटाळवाणे होते. अँगुलरजेएसच्या भविष्यातील आवृत्त्या प्रक्रियेस गती देण्यासाठी Google ची बेझेल बिल्ड सिस्टम वापरतील - दुर्दैवाने, लिहिण्याच्या वेळी ते प्राइमटाइमसाठी तयार नव्हते.
18. चालणे मृत टाळा
जरी कोड कोड खंडित होऊ नये यासाठी Google अत्यंत काळजी घेत असला तरीही, काही वैशिष्ट्ये यापुढे आवश्यक नसल्यामुळे त्यांना काढून टाकणे आवश्यक आहे. टाळावे या वैशिष्ट्यांविषयी अधिक जाणून घेण्यासाठी ही घसारा यादी पहा.
19. बदल लॉग पहा
नेहमीप्रमाणे, एक लेख संपूर्ण रिलीझवर न्याय कधीही करू शकत नाही. सुदैवाने, हा बदल लॉग सर्व बदलांची सविस्तर यादी प्रदान करतो - जर आपणास विशेषकरून प्रिय असलेल्या एखाद्या वैशिष्ट्याची नाडी तपासण्यासारखे वाटत असेल तर.
आपल्या साइटवर अपलोड करण्यासाठी बर्‍याच फायली सज्ज आहेत? सर्वात विश्वसनीय मेघ संचयनात त्यांचा बॅक अप घ्या.
हा लेख मूलतः सर्जनशील वेब डिझाईन मासिकात प्रकाशित झाला होता वेब डिझायनर.
