2016-02-04 7 views
6

में कोणीय 2 को एकीकृत करें मैं अपनी कंपनी के जेएसएफ पोर्टल के लिए एक नया फ्रंटएंड फ्रेमवर्क देख रहा हूं और कोणीय 2 पर विचार कर रहा हूं। मैं धीरे-धीरे पेज पर विशिष्ट घटकों को जेएसएफ से एंगुलर 2/आरईएसटी में माइग्रेट करना चाहता हूं। मैं रूटिंग के लिए एंगुलर 2 का उपयोग नहीं करना चाहता, कम से कम अभी तक नहीं, और मैं नहीं चाहता कि कोणीय पृष्ठ पर पूरी तरह से ले जाए: कुछ घटकों को अभी भी भविष्य के लिए जेएसएफ होना चाहिए।मौजूदा जेएसएफ परियोजना

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

<h:body> 
    <my-app> 
    <h:panelGroup styleClass="languageSwitcher"> 
     <h:form> 
     <h:selectOneMenu value="#{languageHandler.language}" onchange="submit()"> 
      <f:selectItem itemValue="en" itemLabel="English" /> 
      <f:selectItem itemValue="nl" itemLabel="Dutch" /> 
     </h:selectOneMenu> 
     </h:form> 
    </h:panelGroup> 

    <my-angular-component data-source="/rest/mydata"></my-angular-component> 
    </my-app> 
<h:body> 

कोणीय 1 के साथ, मैं इस काम को करने के लिए स्थानांतरण का उपयोग करता हूं। हालांकि, जैसा कि मैं इसे समझता हूं, Angular 2 content projection does not work on the root component, क्योंकि प्रस्तुत एचटीएमएल को कोणीय-संकलित दृश्य नहीं माना जाता है।

मैंने जेएसएफ प्रस्तुत पृष्ठ गतिशील रूप से प्राप्त करने के लिए रूट घटक के templateURL का उपयोग करने पर भी विचार किया, लेकिन यह लागू करना मुश्किल है और जेएसएफ द्वारा किए गए कई पोस्ट के साथ अच्छा नहीं खेलता है।

एकमात्र तरीका यह है कि मैं यह काम करने के लिए सोच सकता हूं कि प्रत्येक कोणीय घटक का मूल घटक बनाना है जो कि जेएसएफ का थोड़ा सा स्थान बदलता है, और प्रत्येक पृष्ठ बूटस्ट्रैप पर उपयोग किए जाने वाले सभी घटकों पर। यहां की कमी यह है कि मुझे अपने द्वारा बनाए गए प्रत्येक कोणीय घटक को बूटस्ट्रैप करने के लिए बहुत सारे बॉयलरप्लेट कोड की आवश्यकता है, और उनके पास साझा रूट घटक नहीं है इसलिए उनके बीच संचार सीमित है। इसके अलावा, मैं विशेषताओं के माध्यम से एक कोणीय घटक को कॉन्फ़िगर करना होगा, लेकिन इन aren't picked up automatically either के रूप में मैं उन्हें लेने के लिए प्रत्येक घटक के लिए कस्टम कोड जोड़ने की आवश्यकता होगी: जब मैं अंत में साथ पूरे दृश्यपटल की जगह फिर

class MyAngularComponent { 
    constructor(public elementRef: ElementRef) { 
    this.dataSourceUrl = this.elementRef.nativeElement.getAttribute("data-source"); 
    } 
} 

कोणीय, मुझे मैन्युअल रूप से गुणों से जानकारी पुनर्प्राप्त करने के चरण में @Input का उपयोग करने के लिए प्रत्येक घटक को पुन: सक्रिय करना होगा।

क्या कोई इसे करने का बेहतर तरीका जानता है? या जेएसएफ और Angular2 बस अच्छी तरह से मिश्रण नहीं करते हैं?

+0

* "या जेएसएफ और एंगुलर 2 बस अच्छी तरह से मिश्रण नहीं करते हैं?" * यदि यह सच था, तो http://angularfaces.com कभी अस्तित्व में नहीं होगा। – BalusC

+0

AFAIK angularfaces AngularJS (उर्फ कोणीय 1) का उपयोग करता है, जो प्रक्रिया को बहुत सरल बनाने के लिए ट्रांसक्यूलेशन का समर्थन करता है। –

+0

यदि कोणीय 1 आपकी आवश्यकताओं के अनुरूप होगा, तो आप 2 का उपयोग क्यों कर रहे हैं? – JMK

उत्तर

3

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

बस पृष्ठ का एक अनुभाग लें, एक जेएसएफ घटक बनाएं और इसे केवल HTML और CSS का पुन: उपयोग करके बूटस्ट्रैप किए गए कोणीय 2 ऐप बनाएं।

यदि आपको आरईएसटी वेब सेवाओं को कॉल करने के बजाय जेएसएफ लाइफसाइक्ल में एकीकृत करने की आवश्यकता है, तो आपको जेएसएफ फॉर्म के छिपे हुए क्षेत्र में कोणीय 2 द्वारा उत्पादित डेटा इंजेक्ट करने की आवश्यकता है। जेएसओएन प्रारूप में डेटा रखें और इसे जैक्सन का उपयोग कर सर्वर पर deserialize।

यह संभवतः एपुलर 2 और बाकी नियंत्रकों का उपयोग करके ऐप को एक पृष्ठ को फिर से लिखने की तुलना में इसके लायक नहीं है।

आप कुछ पृष्ठों को रीडायरेक्ट करने के लिए सर्वर को कॉन्फ़िगर कर सकते हैं जो स्थिर फाइलें हैं जो कोणीय 2 पृष्ठ हैं, जबकि शेष जेएसएफ के अंतर्गत रहते हैं।

0

रूट स्तर पर अपने आवेदन के लिए एक रैपर घटक बनाएं, उसके बाद आप धीरे-धीरे अपने कोड को अपने घटकों को उन घटकों में परिवर्तित करने के लिए शुरू कर सकते हैं जिन्हें आप अपने अन्य HTML के साथ रख सकते हैं।

हां, आपको @ इनपुट्स के रिफैक्टरिंग के माध्यम से जाना होगा, लेकिन आपको एक ही समय में सबकुछ करने की आवश्यकता नहीं है, एक समय में एक घटक शुरू करें, बस एक साधारण रैपर जोड़कर रूट पर कोणीय 2 घटक सक्षम करें घटक संकलन की सुविधा के लिए जो आपके संकलित HTML समस्या के आसपास काम करता है।

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

+0

हमने इस परियोजना के लिए स्क्रैच से शुरू करने के खिलाफ स्पष्ट रूप से निर्णय लिया है, इसलिए यह कोई विकल्प नहीं है। मुझे यकीन नहीं है कि रूट स्तर पर एक रैपर घटक द्वारा आपका क्या मतलब है। मेरा मतलब है कि मेरे पहले उदाहरण में ' '? क्योंकि यह काम नहीं करेगा, जो पूरी समस्या है। –

संबंधित मुद्दे