कोणीय और वेब घटक, a.k.a कोणीय तत्व

के बारे में

इस विषय में मैं उस शोध के परिणामों को साझा करना चाहता हूं जो मुझे कोणीय 5 और वेब घटकों के बारे में मिला है। हम देखेंगे कि हम कोणीय 5 में वेब घटकों को कैसे बना सकते हैं और उनका उपयोग कर सकते हैं और हमें किस प्रकार के लाभ मिल सकते हैं।

कोणीय तत्व

आधिकारिक तौर पर, कोणीय अभी तक वेब घटकों का समर्थन नहीं करता है, लेकिन कोणीय भंडार में एक शाखा है और जब मैंने देखा कि उसने इसके साथ खेलने का फैसला किया है और देखें कि यह कैसे काम करेगा। कोणीय टीम ने इस पैकेज को "@ कोणीय / तत्व" नाम दिया है। अनुसंधान के परिणाम वास्तव में प्रभावशाली थे, इतना कि मैंने एक विषय लिखने और इसे आपके साथ साझा करने का निर्णय लिया (मैं एक ब्लॉगर नहीं हूं और बहुत अधिक नहीं लिख रहा हूं, लेकिन यह शोध एक असाधारण था!)।

Web Components कैसे बनाये

मान लें कि हम कोणीय का उपयोग करके मानक वेब घटक बनाना चाहते हैं, यह बहुत आसान है :) मुझे यह दिखाने दें कि:

पहला कदम कोणीय क्ली का उपयोग करके नई परियोजना बनाना है:

`एनजी नए वेब-घटकों-नमूना`

अगला कदम मानक कोणीय घटक जोड़ना है और इसे button लाइक-बटन ’के नाम से जाना जाता है:

`एनजी घटक जैसे बटन '

इससे पहले यह एक सामान्य सामान था, जिसे हम हर दिन करते हैं, अब हमें किसी भी तरह से इस नए घटक को वेब घटक के रूप में पंजीकृत करने और निर्यात करने की आवश्यकता है, इसे प्राप्त करने के लिए हमें चार आसान चरणों को करने की आवश्यकता होगी:

  1. हमारे प्रोजेक्ट में कोणीय रिपॉजिटरी से @ कोणीय / एलिमेंट क्लास कॉपी करें, हमें इसे मैन्युअल रूप से करने की आवश्यकता है, क्योंकि यह पैकेज अभी जारी नहीं हुआ है
  2. @ वेबकंप्यूटर / कस्टम-तत्व स्थापित करें और इसे पॉलीफिल में आयात करें: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. app.module.ts को बदलें, हमारे सभी घटकों को प्रविष्टिकंप्यूटरों में जोड़ें जो हम वेब घटक बनना चाहते हैं, इसके अलावा हमें बूटस्ट्रैप कॉन्फ़िगरेशन को इस तरह बदलना होगा: https://github.com/playerx/angular-elements-sample/blob/ मास्टर / src / ऐप्स / app.module.ts
  4. इस तरह से main.ts बदलें: g https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts '

यही है, हमारे मानक कोणीय घटक वेब घटक बन गए।

आप यहां काम कर रहे उदाहरण देख सकते हैं:

https://angular-elements-sample.now.sh

(स्रोत कोड: https://github.com/playerx/angular-elements-sample)

तो यहाँ क्या हुआ:

  • निर्यात करने और एक ऐप-रूट घटक का उपयोग करने के बजाय, हम अब अपनी index.html फ़ाइल, या कहीं और कई वेब घटकों का उपयोग और उपयोग कर सकते हैं
  • हमारे मानक घटक केवल प्रविष्टिकम्पाउटर्स में पंजीकरण करके वेब घटक हो सकते हैं

जब मैंने पहली बार पाया कि मैंने इतना आसान सोचा था? हाँ, आसान मटर :) लेकिन यह शोध की एक शुरुआत है!

इससे पहले कि हम आगे बढ़ें, आइए देखें कि कौन सी फाइलें जनरेट होती हैं:

  • inline.bundle.js - यह लोडिंग मॉड्यूल के लिए छोटा वेबपैक स्क्रिप्ट है
  • seller.bundle.js - कोणीय पुस्तकालय और 3 पार्टी पुस्तकालय
  • polyfills.bundle.js - पॉलीफ़िल्स
  • main.bundle.js - हमारे घटक
  • style.bundle.css - उदाहरण के लिए वैश्विक शैलियाँ, सामग्री शैलियाँ

वेब घटक का उपयोग कैसे करें

हमने 'app-like-button' नामक वेब घटक बनाया है, अब इसे किसी अन्य बिल्कुल भिन्न प्रोजेक्ट में उपयोग करते हैं। आइए एक और कोणीय परियोजना बनाएँ और निम्नलिखित कदम उठाएँ:

  1. @ वेबकंप्यूटर / कस्टम-तत्व स्थापित करें और इसे पॉलीफिल में आयात करें: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. app.module.ts में कस्टम स्कीमा सक्षम करें: https://github.com/playerx/angular-webcompenders-usage-sample/blob/master/src/app/app.mappule.ts
  3. इस तरह हमारे नए वेब घटक का उपयोग शुरू करें:
      घटक यहां लोड किया जाएगा
  4. वेब घटक स्क्रिप्ट लोड करें - इस भाग को विवरण में चर्चा करने देता है

वेब घटक स्क्रिप्ट लोड करें

हमें अपनी पहली परियोजना से निम्नलिखित स्क्रिप्ट लोड करने की आवश्यकता है:

  • inline.bundle.js - यह वेब पुस्तकालयों के लिए "अलग-थलग गुंजाइश" बनाएगा जिसकी हमें वेब घटकों के लिए आवश्यकता है
  • seller.bundle.js - कोणीय पुस्तकालय और 3 पार्टी पुस्तकालय जो हम वेब घटकों के लिए उपयोग करते हैं
  • main.bundle.js - स्वयं घटक

हम polyfills.bundle.js और style.bundle.css को लोड नहीं करते हैं और उसके बारे में थोड़ा बाद में।

जैसे ही उन लिपियों को लोड किया जाएगा और हमारे HTML में इंजेक्ट किया जाएगा, ऐप-जैसे-बटन घटक जीवित हो जाएगा, here घटक यहां लोड किया जाएगा ’पाठ को घटक के साथ बदल दिया जाएगा। डेमो के लिए मैंने सरल स्क्रिप्ट लोडर बनाया है: https://github.com/playerx/angular-webcompenders-usage-sample/blob/master/src/app/app.component.ts

आप इस पर पूर्ण कार्य उदाहरण देख सकते हैं:

https://angular-webcomponents-usage-sample.now.sh/

(स्रोत कोड: https://github.com/playerx/angular-webcompenders-usage-sample)

अब आइए चर्चा करते हैं कि कोणीय और वेब घटकों के संयोजन से हमें क्या अतिरिक्त लाभ मिल सकते हैं

मार्ग

एक बात जो मुझे दिलचस्पी थी, वह है मेरे वेब घटक के अंदर शक्तिशाली कोणीय मार्ग का उपयोग करना। एक समस्या थी, मैं मानक रूटिंग का उपयोग नहीं करना चाहता था क्योंकि यह url को बदल देता है और मैं नहीं चाहता कि मेरा वेब घटक url को बदले, इस तरह से वैश्विक रूटिंग का प्रबंधन करना बहुत मुश्किल होगा।

मुझे एक ऐसी चीज़ की आवश्यकता है जो स्मृति में राउटिंग जानकारी को सहेजेगी और वह है MockLocationStrategy, यह परीक्षण के लिए है, लेकिन मेरी आवश्यकताओं के अनुरूप है। डेमो परियोजनाओं में आप रूटिंग के साथ वेब घटक देख सकते हैं - "ऐप-मॉड्यूल-शेल"।

मुझे लगता है कि अगर आपको वेब घटक को रूट करने के दौरान url बदलने की आवश्यकता है, तो आपको एक ईवेंट बनाना चाहिए, और मुख्य ऐप में url रूट को हैंडल करना होगा।

शैडो डोम

इस उदाहरण में मैंने देशी दृश्य एनकैप्सुलेशन नहीं बनाया है, कारण सरल है, सामग्री पुस्तकालय अभी इसका समर्थन नहीं करता है (https://github.com/angular/material2/issues/3386), लेकिन आप घटक बनाने के लिए स्वतंत्र हैं शैडो डोम के साथ, मैंने इसकी कोशिश की है और यह पूरी तरह से काम करता है

थीम

यहाँ मेरा पसंदीदा एक आता है, अगर आपको याद है कि हमने अपने नए ऐप में शैलियों को लोड नहीं किया है। कारण सरल है, हम वेब घटक के विषय नहीं चाहते हैं क्योंकि हमारे पास है। और हां, आप किसी विषय के साथ सामग्री डिज़ाइन के साथ वेब घटक बना सकते हैं, और किसी अन्य एप्लिकेशन में इसका उपयोग कर सकते हैं और आवेदन का विषय लागू किया जाएगा, इस उदाहरण को देखें:

वेब घटक बनाना - https://angular-elements-sample.now.sh

दूसरे ऐप में उनका उपयोग करना - https://angular-webcompenders-usage-sample.now.sh

"लोड मॉड्यूल" पर क्लिक करने के बाद ऐप-मॉड्यूल-शेल देखें।

ज्ञात पहलु

  • यदि आप उसी घटक में वेब घटक का उपयोग करेंगे, जहां वेब घटक घोषित किए जाते हैं, तो उन्हें दो बार प्रस्तुत किया जाएगा। कारण सरल है कोणीय घटक को प्रस्तुत करता है और वेब घटक के रूप में भी इसका प्रतिपादन किया जाता है। यह कोणीय टीम के लिए जाना जाता है और मुझे लगता है कि जल्द ही एक समाधान होगा। वर्कअराउंड के रूप में अभी के लिए मैं निम्नलिखित सुझाव दे सकता हूं:
     कहते हैं कि हमारे पास ग्राहक मॉड्यूल हैं और कुछ घटकों को अन्य मॉड्यूल के साथ साझा करना चाहते हैं, दो मॉड्यूल बनाने के लिए वर्कअराउंड होगा:
    1. ग्राहक-वेब-घटक - जो सभी वेब घटकों की मेजबानी करेगा
    2. ग्राहक-खोल - जो उनका उपयोग करेगा
    3. एक और मॉड्यूल - जो ग्राहक वेब घटकों का भी उपयोग करेगा

संक्षेप

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

आपको वीडियो को अंत में देखना चाहिए, यह मेरे शोध की पहली चमक थी।

यहाँ भी काम कर रहे उदाहरण हैं:

वेब घटक बनाना - https://github.com/playerx/angular-elements-sample

वेब घटकों का उपयोग करना - https://github.com/playerx/angular-webcompenders-usage-sample

पढ़ने के लिए धन्यवाद :)