कोणीय 8 के अंदर क्या है?

विषय

• 01. एक संस्करण जाँच चलाएँ
• 02. कोणीय स्थापित करें
• 03. एक प्रोजेक्ट कंकाल बनाएं
• 04. हार्नेस डिफरेंशियल लोडिंग
• 05. ... और परिणाम देखें
• 06. एक वेब कार्यकर्ता पैदा करें
• 07. कोड का अन्वेषण करें
• 08. मचान स्थापित करें
• 09. कंस्ट्रक्टर की कमी के बारे में चिंता न करें
• 10. एक छोटा संकलन रन निष्पादित करें
• 11. ...और आउटपुट खोजें
• 12. काम पर लग जाओ
• 13. आइवी का अन्वेषण करें
• 14. संशोधित एनजी प्रसंस्करण का प्रयास करें
• 15. बेहतर प्रवास का आनंद लें
• 16. कार्यक्षेत्र नियंत्रण का अन्वेषण करें
• 17. प्रक्रिया में तेजी लाएं
• 18. वॉकिंग डेड से बचें
• 19. परिवर्तन लॉग देखें

एंगुलर 8 गूगल के एंगुलर का नवीनतम संस्करण है - जो कि सबसे अच्छे जावास्क्रिप्ट फ्रेमवर्क में से एक है। इस लेख में, हम एंगुलर 8 के बारे में विशेष बातों के माध्यम से चलेंगे, और आपको दिखाएंगे कि कैसे आरंभ किया जाए। सबसे पहले, रूपरेखा के साथ अब तक क्या हुआ है, इस पर एक संक्षिप्त नज़र डालें।

कोणीय के परिचय से वेब विकास में एक बदलाव आया: जबकि अधिकांश पुस्तकालयों ने अपेक्षाकृत सीमित वास्तुशिल्प प्रभाव वाले डेवलपर्स को समर्थन प्रदान करने के लिए खुद को सीमित कर दिया, एंगुलर की डेवलपर टीम दूसरी दिशा में चली गई। उनका उत्पाद आपको एक विशिष्ट वास्तुकला का उपयोग करने के लिए मजबूर करता है, जिसमें विचलन कठिन से लेकर व्यावसायिक रूप से व्यर्थ तक होता है। वास्तव में, अधिकांश कोणीय कोड ब्राउज़र को हिट करने से पहले अपेक्षाकृत जटिल ट्रांसपिलेशन टूलचेन के माध्यम से चलता है।

एंगुलर की अपार सफलता के कारण, Google Inc के अंदर और बाहर, विकास - कुल मिलाकर - स्थिर हो गया है। इसका मतलब यह है कि ब्रेकिंग कोड परिवर्तन कम हैं, जबकि अर्ध-वार्षिक उन्नयन वेब ब्राउज़िंग परिदृश्य में परिवर्तनों के लिए ढांचे को अनुकूलित करने पर केंद्रित हैं।

एंगुलर 8 के मामले में, उदाहरण के लिए, एक नया जावास्क्रिप्ट कंपाइलर तैनात किया गया है (यद्यपि अभी भी प्रयोगात्मक रूप से)। यह पुराने ब्राउज़रों की कीमत पर उत्पन्न संगतता कोड को काफी छोटा और तेज़ बनाने के लिए अनुकूलित करता है। इसके अलावा, वेब वर्कर सपोर्ट को एंगुलर की प्रोसेसिंग क्षमता बढ़ाने के लिए एकीकृत किया गया है। संक्षेप में, देखने के लिए बहुत कुछ है - तो आइए हम इसमें गोता लगाएँ।

यदि आप बिना कोड वाली साइट डिज़ाइन करना चाहते हैं, तो इन आसान वेबसाइट बिल्डरों में से किसी एक को आज़माएँ। और चीजों को और भी आसान बनाने के लिए, अपनी वेब होस्टिंग सेवा को ठीक से प्राप्त करें।

01. एक संस्करण जाँच चलाएँ

कोणीय का टूलचेन NodeJS वातावरण के अंदर रहता है। इस लेखन के समय, Node.js 10.9 या बेहतर की आवश्यकता है - यदि आप स्वयं को पुराने संस्करण में पाते हैं, तो Node.js वेबसाइट पर जाएँ और अपग्रेड प्राप्त करें। नीचे दिया गया कोड इस मशीन पर संस्करण की स्थिति दिखाता है।

तमहन@तम्हान18:~$ नोड-वी v12.4.0 तमहन@तम्हान18:~$ एनपीएम-वी 6.9.0

02. कोणीय स्थापित करें

कोणीय का टूलचैन एक कमांड लाइन उपयोगिता में रहता है जिसका नाम है एनजी. इसे प्रसिद्ध एनपीएम के माध्यम से स्थापित किया जा सकता है।

तमहन@तम्हान18:~$ sudo npm install -g @angular/cli tamhan@TAMHAN18:~$ एनजी संस्करण

नीचे दी गई छवि में दिखाए गए प्रश्न का उत्तर देने में सावधानी बरतें।

टूल से संस्करण की जानकारी प्राप्त करना काफी कठिन है - न केवल सिंटैक्स अद्वितीय है, बल्कि आउटपुट वर्बोज़ भी है (नीचे चित्र देखें)।

03. एक प्रोजेक्ट कंकाल बनाएं

एनजी हमारे लिए कोणीय मचान उत्पन्न करता है। निम्नलिखित चरणों में, हम रूटिंग जोड़ना चाहते हैं, और CSS ट्रांसपिलेशन के लिए Sass का उपयोग करना चाहते हैं। यदि किसी कारण से परिनियोजन विफल हो जाता है, तो कार्यशील निर्देशिका को खाली कर दें और पुनः आरंभ करें एनजी सुपरसुसर अधिकारों के साथ।

तमहन@तम्हान18:~$ mkdir angularspace tamhan@TAMHAN18:~$ cd angularspace/ tamhan@TAMHAN18:~/angularspace$ ng new worktest

04. हार्नेस डिफरेंशियल लोडिंग

एंगुलर का नया संस्करण कम प्रभाव के लिए पिछड़े संगतता कोड को अनुकूलित करता है - एक फ़ाइल जिसे कहा जाता है ब्राउज़र सूची आपको यह तय करने देता है कि कौन से ब्राउज़र समर्थित हैं। खुला हुआ ब्राउज़र सूची और शब्द हटा दें नहीं IE 9 से IE11 के सामने।

. . . > 0.5% पिछले 2 संस्करण फ़ायरफ़ॉक्स ईएसआर मृत नहीं आईई 9-11 # आईई 9-11 समर्थन के लिए, 'नहीं' हटा दें।

05. ... और परिणाम देखें

प्रोजेक्ट के संकलन का आदेश दें, वितरण फ़ोल्डर में बदलें और अनावश्यक मानचित्र फ़ाइलों को शुद्ध करें।

तमहन@तम्हान18:~/एंगुलरस्पेस/वर्करटेस्ट$ सुडो एनजी बिल्ड तमहन@तम्हान18:~/एंगुलरस्पेस/वर्करटेस्ट/जिला/वर्करटेस्ट$ एलएस

परिणाम देखने के लिए पेड़ का आह्वान करें - एनजी विभिन्न कोड फ़ाइलों के कई संस्करण बनाता है (नीचे चित्र देखें)।

06. एक वेब कार्यकर्ता पैदा करें

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

tamhan@TAMHAN18:~/angularspace/workertest$ sudo ng वेब-वर्कर myworker जनरेट करें tsconfig.worker.json (212 बाइट्स) क्रिएट src/app/myworker.worker.ts (157 बाइट्स) अपडेट tsconfig.app.json (236 बाइट्स) ) अद्यतन angular.json (3640 बाइट्स)

07. कोड का अन्वेषण करें

एनजीका आउटपुट पहली नज़र में डराने वाला लग सकता है। फ़ाइल खोलना src/app/myworker.worker.ts पसंद के एक कोड संपादक में कोड का पता चलता है जिसे आपको अच्छी तरह से पता होना चाहिए वेब वर्कर विशिष्टता। सिद्धांत रूप में, कार्यकर्ता संदेश प्राप्त करता है और आवश्यकतानुसार उन्हें संसाधित करता है।

/// संदर्भ lib = "वेबवर्कर" /> addEventListener ('संदेश', ({डेटा}) => { const प्रतिक्रिया = `कार्यकर्ता प्रतिक्रिया $ {डेटा}`; पोस्टमैसेज (प्रतिक्रिया);});

08. मचान स्थापित करें

कोणीय अनुप्रयोगों में घटक होते हैं। हमारे वेब वर्कर को फ़ायर करना इसके अंदर सबसे अच्छा किया जाता है ऐपकंपोनेंट, जिसे श्रोता को शामिल करने के लिए विस्तारित किया जाता है ऑनइनिट प्रतिस्पर्धा। अभी के लिए, यह केवल स्थिति की जानकारी का उत्सर्जन करेगा।

'@angular/core' से {घटक, ऑनइनिट} आयात करें; @ कॉम्पोनेंट ({।।।}) निर्यात वर्ग ऐपकंपोनेंट ऑनइनिट लागू करता है {शीर्षक = 'वर्करटेस्ट'; ngOnInit () { कंसोल.लॉग ("ऐपकंपोनेंट: ऑनइनिट ()"); } }

09. कंस्ट्रक्टर की कमी के बारे में चिंता न करें

अनुभवी टाइपस्क्रिप्ट डेवलपर्स खुद से पूछते हैं कि हमारा कोड प्रोग्रामिंग भाषा द्वारा प्रदान किए गए कंस्ट्रक्टर का उपयोग क्यों नहीं करता है। उसका कारण यह है कि एनजीऑनइनिट एक जीवनचक्र घटना है जो कि जब भी कोई आरंभीकरण घटना होती है तो सक्रिय हो जाती है - इसे कक्षा के आह्वान से सहसंबद्ध होने की आवश्यकता नहीं है।

10. एक छोटा संकलन रन निष्पादित करें

इस समय, कार्यक्रम चलने के लिए तैयार है। हम इसे के अंदर सर्वर से निष्पादित करेंगे एनजी, जिसे सर्व कमांड के माध्यम से लागू किया जा सकता है। इस दृष्टिकोण का एक साफ पहलू यह है कि कार्यक्रम परिवर्तनों का पता लगाता है और फ्लाई पर परियोजना को पुन: संकलित करता है।

तमहन@TAMHAN18:~/angularspace/workertest$ सुडो एनजी सर्व

नीचे दी गई छवि में इसे क्रिया में देखने के लिए आकृति पर एक नज़र डालें।

11. ...और आउटपुट खोजें

एनजी सर्व अपने स्थानीय वेब सर्वर का पता डालता है, जो आमतौर पर होता है http://लोकलहोस्ट:4200/. स्थिति आउटपुट देखने के लिए वेब पेज खोलें और डेवलपर टूल खोलें। ध्यान रखें कि कंसोल.लॉग ब्राउज़र कंसोल पर डेटा आउटपुट करता है और NodeJS इंस्टेंस के कंसोल को अछूता छोड़ देता है।

12. काम पर लग जाओ

इस समय, हम कार्यकर्ता का एक उदाहरण बनाते हैं और उसे एक संदेश प्रदान करते हैं। इसके परिणाम तब ब्राउज़र कंसोल में दिखाए जाते हैं।

अगर (टाइपऑफ़ वर्कर!== 'अपरिभाषित') {// एक नया कॉन्स्टेबल वर्कर बनाएं = नया वर्कर ('./myworker.worker', {टाइप: 'मॉड्यूल'}); कार्यकर्ता.ऑनमेसेज = ({डेटा}) => { कंसोल.लॉग ('पेज को संदेश मिला: $ {डेटा}'); }; कार्यकर्ता। पोस्टमैसेज ('हैलो'); } और { कंसोल.लॉग ("कोई कार्यकर्ता समर्थन नहीं"); }

13. आइवी का अन्वेषण करें

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

"angularCompilerOptions": { "enableIvy": true}

चेतावनी का एक शब्द: आइवी आश्चर्यजनक आकार में कमी की ओर जाता है, लेकिन यह मुफ़्त नहीं है। उत्पाद को अभी स्थिर करना है, इसलिए इसे उत्पादक वातावरण में उपयोग करने की अनुशंसा नहीं की जाती है।

14. संशोधित एनजी प्रसंस्करण का प्रयास करें

कोणीय का एनजी कमांड लाइन टूल ने कुछ समय के लिए आंतरिक रूप से चाइल्ड स्क्रिप्ट का उपयोग किया। एंगुलर 8 पहले से बेहतर है कि अब आप इस सुविधा का उपयोग अपने कार्यों को चलाने के लिए भी कर सकते हैं क्योंकि आपका एप्लिकेशन असेंबल और संकलित है।

"वास्तुकार": { "बिल्ड": { "बिल्डर": "@ कोणीय-देवकिट / बिल्ड-कोणीय: ब्राउज़र",

का एक साफ आवेदन एनजी स्क्रिप्ट में क्लाउड सेवाओं पर सीधे एप्लिकेशन अपलोड करना शामिल है। गिट रिपोजिटरी एक उपयोगी स्क्रिप्ट प्रदान करता है जो आपके काम को फायरबेस खाते में अपलोड करता है।

15. बेहतर प्रवास का आनंद लें

एंगुलर 1.x से दूर जाने वाले डेवलपर्स, जिन्हें एंगुलरजेएस भी कहा जाता है, के पास 'संयुक्त' अनुप्रयोगों में नेविगेटर को सही काम करने के मुद्दों का एक उचित हिस्सा है। नई एकीकृत स्थान सेवा का उद्देश्य इस प्रक्रिया को आसान बनाना है।

16. कार्यक्षेत्र नियंत्रण का अन्वेषण करें

कार्यक्षेत्र संरचना को गतिशील रूप से बदलने की क्षमता से बड़ी परियोजनाओं को लाभ होता है। यह एंगुलर 8.0 में पेश किए गए नए वर्कस्पेस एपीआई के माध्यम से किया जाता है - इस चरण के साथ आने वाला स्निपेट व्यवहार का त्वरित अवलोकन प्रदान करता है।

async फ़ंक्शन प्रदर्शित करता है () {कॉन्स्ट होस्ट = कार्यक्षेत्र। createWorkspaceHost (नया NodeJsSyncHost ()); कॉन्स्ट वर्कस्पेस = वर्कस्पेस की प्रतीक्षा करें। readWorkspace ('पथ/से/कार्यक्षेत्र/निर्देशिका/', होस्ट); कॉन्स्ट प्रोजेक्ट = वर्कस्पेस.प्रोजेक्ट्स। प्राप्त करें ('मेरा ऐप'); कॉन्स्ट बिल्डटार्गेट = प्रोजेक्ट.टारगेट्स। प्राप्त करें ('बिल्ड'); buildTarget.options.optimization = true; वर्कस्पेस का इंतजार करें। राइटवर्कस्पेस (वर्कस्पेस, होस्ट); }

17. प्रक्रिया में तेजी लाएं

बड़े जावास्क्रिप्ट कोड बेस बनाना थकाऊ हो जाता है। AngularJS के भविष्य के संस्करण प्रक्रिया को तेज करने के लिए Google के Bazel बिल्ड सिस्टम का उपयोग करेंगे - दुख की बात है कि लेखन के समय यह प्राइमटाइम के लिए तैयार नहीं था।

18. वॉकिंग डेड से बचें

भले ही Google अत्यधिक सावधानी बरतता है कि कोड को न तोड़े, कुछ सुविधाओं को केवल हटाने की आवश्यकता है क्योंकि अब उनकी आवश्यकता नहीं है। जिन विशेषताओं से बचना चाहिए, उनके बारे में अधिक जानने के लिए इस मूल्यह्रास सूची की जाँच करें।

19. परिवर्तन लॉग देखें

हमेशा की तरह, एक लेख कभी भी पूरी रिलीज़ के साथ न्याय नहीं कर सकता। सौभाग्य से, यह परिवर्तन लॉग सभी परिवर्तनों की एक विस्तृत सूची प्रदान करता है - बस अगर आपको कभी भी किसी विशेषता की नब्ज की जाँच करने का मन हो, विशेष रूप से आपको प्रिय।

आपकी साइट पर अपलोड करने के लिए बहुत सारी फ़ाइलें तैयार हैं? सबसे विश्वसनीय क्लाउड स्टोरेज में उनका बैकअप लें।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित हुआ था वेब डिजाइनर.