整合Angular2到現有JSF項目

我尋找到了我們公司的JSF門戶的新前端框架，並正在考慮Angular2。我想逐步將頁面上的特定組件從JSF遷移到Angular2/REST。我不想用Angular2路由，至少目前還沒有，我不想角完全接管頁：某些組件將仍然需要JSF可預見的未來。整合Angular2到現有JSF項目

理想情況下，我會用我的Angular根組件包裝我的JSF模板正文的內容，並將JSF呈現的HTML投影到根組件中，以便JSF的工作方式與之前一樣，並且模板中的任何Angular組件被拿起並且都可以交流。例如：

<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>

隨着Angular 1，我會使用transclusion來完成這項工作。不過，據我所知，Angular 2 content projection does not work on the root component，因爲呈現的HTML不被視爲一個角度編譯視圖。

我也考慮過使用根組件的templateURL動態獲得JSF呈現的頁面，但是這是很難實現，並且不與衆多POST的是JSF確實打得很好。

我認爲完成這項工作的唯一方法是爲每個Angular組件創建一個根組件，以替換一些JSF，並在每個頁面上引導所有使用的組件。這裏的缺點是我需要很多樣板代碼來引導我構建的每個Angular組件，並且它們沒有共享根組件，因此它們之間的通信受到限制。此外，我需要通過配置屬性各角度成分，但由於這些aren't picked up automatically either我需要自定義代碼添加到每個組件來接他們：

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

後來，當我終於與更換整個前端Angular，我必須再次重構每個組件，以便使用@Input而不是手動從屬性中檢索信息。

有誰知道一個更好的方式來做到這一點？或者JSF和Angular2混合不好？

來源

2016-02-04 Romke van der Meulen

*「或者JSF和Angular2不能很好地混合？」*如果這是真的，那麼http://angularfaces.com永遠不會存在。 – BalusC

AFAIK angularfaces使用AngularJS（又名Angular 1），它支持跨平臺，極大地簡化了過程。 –

如果Angular 1適合您的需求，爲什麼使用2？ – JMK

如果無法將整頁作爲重寫單位，則必須分段分頁，並一次將其移入一個段。

僅佔用頁面的一部分，創建一個JSF組件，並通過僅重用HTML和CSS使其成爲完全引導的角度2應用程序。

如果您需要將此集成到JSF生命週期而不是調用REST Web服務，則需要將angular 2生成的數據注入JSF表單的隱藏字段中。以JSON格式放置數據並使用Jackson將其反序列化到服務器上。

與使用角度2和其他控制器一次重寫應用一頁相比，它可能都不值得。

您可以將服務器配置爲重定向某些頁面以提供靜態文件，這些靜態文件是Angular 2頁面，而其他頁面則保留在JSF下。

來源

2016-02-11 16:12:55

在根級別爲您的應用程序構建一個包裝組件，之後您可以慢慢開始在代碼中小打小鬧，將其轉換爲可以放在其他HTML的組件旁邊的組件。

是的，你必須經歷@inputs的重構，但你不需要同時做所有事情，一次啓動一個組件，只需通過添加一個簡單的包裝來啓用Angular 2組件以便於圍繞編譯的HTML問題工作的組件構建。

對於您的團隊，我的建議是從一個單獨的項目乾淨而小型化開始，每次將一項功能遷移到新項目。您將擁有更好的開發人員體驗和範圍確定，而不是在地方重寫時發生混亂。

來源

2016-02-04 19:07:21

我們已經明確決定不要從頭開始爲這個項目，所以這不是一個選項。我不確定你的意思是在根級別的包裝組件。你的意思就像我的第一個例子中的''？因爲那不起作用，這是整個問題。 –

整合Angular2到現有JSF項目

回答

相關問題