は、既存のJSFプロジェクト

Question

私たちの会社のJSFポータルのための新しいフロントエンドフレームワークに探していますし、Angular2を検討していますにAngular2を統合します。ページ上の特定のコンポーネントを徐々にJSFからAngular2/RESTに移行したいと考えています。 Angular2をルーティングに使用したいとは思っていませんが、Angularがページを完全に引き継ぐことは望ましくありません。一部のコンポーネントは、近い将来JSFにする必要があります。

理想的には、AngularルートコンポーネントでJSFテンプレートの内容をラップし、JSFがレンダリングしたHTMLをルートコンポーネントに投影して、JSFが以前と同じように動作するようにします。拾われ、すべて通信することができます。例：

<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では、私はこの作業を行うためにtransclusionを使用します。しかし、私が理解しているように、レンダリングされたHTMLはAngular-compiledビューと見なされないので、Angular 2 content projection does not work on the root componentです。

また、JSFレンダリング・ページを動的に取得するために、ルート・コンポーネントのtemplateURLを使用すると考えましたが、これは実装が難しく、JSFが実行する多数のPOSTでうまく動作しません。私はこの仕事をするために考えることができます

唯一の方法は、私が使用するすべてのコンポーネントをJSFのビットを置き換え、すべてのページブートストラップ上の各角度成分のルートコンポーネントを作ることです。ここでの欠点は、私が構築するすべてのAngularコンポーネントをブートストラップするための定型コードをたくさん必要とし、共通のルートコンポーネントを持たないため、それらの間の通信には限界があることです。さらに、私は属性を介して各角度成分を設定する必要がありますが、これらのaren't picked up automatically eitherように私はそれらをピックアップして、各コンポーネントにカスタムコードを追加する必要があります：私は最後にして全体のフロントエンドを交換する際に

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

を次に角度、私は@Inputを使用して属性から情報を手動で取り出す代わりに、それぞれのコンポーネントを再度リファクタリングする必要があります。

これを行うには誰かが良い方法を知っていますか？ JSFとAngular2はうまく混ざりませんか？

Answer 1

、あなたはセクションでページを分割し、1度に1つずつのセクションを移行する必要があります。

ただ、ページのセクションを取るJSFコンポーネントを作成し、HTMLやCSSのみを再利用することで、完全にブートストラップの角度2アプリを作ります。

あなたが代わりにREST Webサービスを呼び出すのJSFのライフサイクルにこれを統合する必要がある場合は、JSFフォームの隠しフィールドに角度2によって生成されたデータを挿入する必要があります。 JSON形式でデータを配置し、ジャクソンを使用してサーバー上で逆シリアル化します。

おそらく、角度2と残りのコントローラーを使って一度に1ページずつ書き直すのに比べて、それほど価値がない可能性があります。

Angular 2ページの静的ファイルを処理するように特定のページをリダイレクトするようにサーバーを構成できますが、残りはJSFの下に残ります。

Answer 2

ルートレベルでのアプリケーションのラッパーコンポーネントを作成し、その後、あなたはゆっくりと、あなたが側に沿って、あなたの他のHTMLを置くことができるコンポーネントにあなたの作品を変換するために、あなたのコードで離れてチッピングを開始することができます。

はい、@ inputのリファクタリングに進む必要がありますが、同時にすべてを行う必要はありません。一度に1つのコンポーネントを起動します。単純なラッパーを追加して、ルートでAngular 2 Componentを有効にしますコンパイルされたHTMLの問題を回避するコンポーネント構築を容易にします。

あなたのチームにとって私の助言は、独立したプロジェクトをきれいにして小さくして、一度に1つの機能を新しいプロジェクトに移行することです。あなたは、より良い開発者経験とスコープではなく、地味な書き換えが面倒です。あなたは全ページに書き換えのユニットを作ることができない場合