AngularJSとPlay Frameworkモデルのバインディングとテンプレート

Question

誰かがPlay FrameworkとAngularJSの間でモデルをバインドする良い方法を見つけたのかどうか疑問に思っていました。たとえば、URLをヒットし、指定されたPersonオブジェクトのサーバー側のテンプレートを使用してPlay Frameworkによってページが生成されます。これで、AngularJSを使用して豊富なユーザーエクスペリエンスを実現し、クライアント側のJavaScript/AngularJSテンプレート内でそのPersonオブジェクトを使用したいとします。

これを行う1つの方法は、AngulraJSから別のAjax呼び出しを作成し、JSモデルに移入することです。これは、そのPersonオブジェクトのページを生成するための最初の呼び出しでは冗長に見えます。

person = @Html(FrontEnd.personToJSON(thisPersonObject)); 

しかし、その後、あなたは$scope内の人物オブジェクトを設定する必要があります。

もう一つの方法は、このような何かをすることです。さらに、これは、オブジェクト全体がJSON形式であり、htmlページの中に配置されるため、ハックのように見えます。

私は、このWebアプリケーションを、たとえばPlayがデータの取得と操作のためのクリーンなAPIを備えた単なるサービス層であるSPAデザインを使用して設計する方がよいことを知っています。これにより、MVCをクライアント側で厳密に行うことができます。

どのような考えですか？

Answer 1

あなたが提案したものは、AngularJSの実行可能なアプローチです。もう1つの解決策は、サーバー側でjavascriptコードを実行し、ブラウザに出力を送信することです（AirbnbのRendrと同様）。しかし、私がAngularJSについて知っているこのようなものは存在しません。スコープが処理される方法のために不可能かもしれません。

ブートストラップされたjavascriptオブジェクトのアプローチでは、単純なので、サーバーを2度訪れることはありません。

ので、

1. は、RESTのAPIを消費SPAクライアントとしてアプリケーションを構築します。
2. サーバー側のテンプレートを使用して、ブートストラップするデータを含む余分なjavascriptオブジェクトをレンダリングし、ページ（または別のjsファイル）に含めます。
3. フロントエンドで、このブートストラップされたjavascriptオブジェクトから$リソースモデルにデータを転送します。

AngularJSとRailsのこの類似の質問を参照してください。
How to bootstrap data as it it were fetched by a $resource service in Angular.js

SEOでは、AngularJS SEO guide [1]を使用してください。このガイドは、AngularJSのエンジニアがGoogle I/O [2]で述べたものです。私は、私はSmartyのを指定して、サーバーへの呼び出しを行うときに我々はsocket.ioとSmartyのテンプレートエンジンを使用して試してみました建物だWebアプリケーションの

[1] http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
[2] http://www.youtube.com/watch?feature=player_detailpage&v=HCR7i5F5L8c#t=2238

Answer 2

Angularは1ページのアプリケーションになるように設計されているため、すでにデータを持つページをブートストラップしないでください。代わりに、あなたのフレームワークに安らかなAPIを提供し、angular's resourcesまたは何らかの代替（例：restangular）を使用して、サーバーからデータを送受信してください。

要約：アプリケーション/サイトは、APIを使用してフレームワークとのみ通信する必要があります。

Answer 3

。私はサーバーにレンダリングさせたいと思うtplファイルを作成し、それからフロントエンドにhtmlを返します。私は、要求されたスマートテンプレートをループなどの処理に使用し、ハンドルバーとng-clickを置く必要があると知っています。そしてhtmlがフロントエンドに戻ったときに、関連するスコープにコンパイルして注入しますそれはDOMの中にあります。

私はこれは悪いアプローチだと思っていますが、上記の人のようにAngularはクライアント側の解決策であり、このようなことをしようとすると本当に水が濁っていると言いました。

パフォーマンスの問題を心配しているため、バックエンドに角度テンプレートをレンダリングする方法を理解することを迷惑にしている場合は、時計リスナーの量を減らすカスタムディレクティブを作成することをお勧めします。必要な場所に一度だけデータをバインドすることでページに追加されます。

Answer 4

最終再生（https://github.com/angyjoe/eventual）は、セレブリティオブジェクトをJSONとして取得します。このJSONのフィールドは、HTMLページのAngularJSモデルに伝達されます。したがって、Play Scalaテンプレートを使用せずに、クライアント側でAngularJSの豊富さで生き残ります。