0

Play Framework 2.5 で作成したアプリケーションを、AngularJs を使用した単一ページ アプリケーションに変更しようとしています。

ここに私がしていたことの概要があります：

  • Scala テンプレートの @for を使用して、投稿のリストを表示する
  • 各投稿は、含まれているテンプレートを使用してレンダリングされました

スニペット:

@for(post <- posts) {
  @fragments.post(post)
}

これまでのところ、Angular で行ったことは次のとおりです。

  • $http を使用して、Scala の JavaScript ルーティングを使用して DB からデータを取得します
  • @for の代わりに ng-repeat を使用して、リストを反復処理します
  • 各投稿は現在、{{post}} を使用してプレーンな json としてレンダリングされています

スニペット:

<ul>
  <li ng-repeat="post in posts">
    <div> {{post}} </div>
  </li>
</ul>

そして今、いくつかのテンプレートで各投稿を表示するのに問題があります。ここに試みがあります:

  • どういうわけか、最初に使用していた Scala テンプレートに post を JSON として渡します。テンプレートのパラメータ タイプを Post (scala オブジェクト) から Json に変更してみました。当然、以下のコードは「not found: value post」を引き起こしました

例えば：

<li ng-repeat="post in posts">
  @fragments.post( {{post}} )
</li>
  • Scala テンプレートの代わりに Angular ディレクティブ テンプレートを使用します。以下の angularjs コードでは、インライン テンプレートを使用するとうまくいきました。また、templateUrl オプションを使用して、テンプレートを他のファイルに外部化することもできます。

例えば：

<ul>
  <li ng-repeat="post in posts">
    <div mydirective></div>
  </li>
</ul>

そしてjs：

mainApp.directive("mydirective", function() {
    return {
        //template: "<h1>Made by a directive: {{post.title}} !</h1>"
        templateUrl: "/assets/path_to_template"
    };
});

後者は現在機能していますが、どちらのアプローチが優れているかさえわかりません。フォーム全体を Scala テンプレートに渡して、UI フォームをコントローラー フォームにバインドできることが本当に気に入っています。この AngularJs の Play フレームワークへの統合は非常に紛らわしく、Play-angular-seed はそれを明確にするものではありませんでした。

上記を達成するための最良の方法は何ですか？

ありがとう

4

1 に答える 1