web-dev-qa-db-ja.com

組み合わせプレイ！ Angular.jsを含むFramework 2.xx

私は、2つの一見強力なフレームワークのこの結婚が問題になっています。 1で実行できることのほとんどは2で実行できるようです。2つを最大限に活用するにはどうすればよいですか。思考のパターンはありますか？ CRUDアプリケーションの基本的な例を見てみましょう-プレイ中のコントローラーにマップするルートmysite/listnamesを書くことができます！これにより、コードを含むテンプレートがレンダリングされます-

@(names:List[String])
@main("Welcome") {

@for( name <- names ){ 
    <p> Hello, @name </p>
}

Mainは典型的なブートストラップテンプレートであることに注意してください。しかし、今、これが生成する出力は、Angular =これらの名前をフィルタリングするための入力ボックスを追加したい場合、またはそれらを使用して何もしたくない場合は、役に立たないようです。典型的な進行方法は？基本的なことは

1）Playでテンプレートをレンダリングした後に到着するデータをangularに渡し、後でクライアント側で使用できるようにする方法。

2）数学的なオブジェクト指向のバックエンド+サーバー、およびフロントエンドでのかなり集中的なUIを含む大規模なアプリに対して、これら2つのフレームワークを一緒に使用することはまったくお勧めですか？

angularjsplayframeworkplayframework-2.0
27
new_web_programmer

この2つのフレームワークを組み合わせる方法はたくさんあります。すべては、それぞれをどの程度関与させたいかに依存します。たとえば、Play 2アプリケーションは一方の側（サーバー側）からのみJSON要求/応答を提供し、AngularJSはクライアント側から他のすべてのものを作成します。基本的なCRUDアプリの例を考えてみます。

  1. Play 2コントローラ：

    def getNames = Action {

  val names = List("Bob","Mike","John")
  Ok(Json.toJson(names)).as(JSON)

}

  2. そのためのPlayルート：

    GET /getNames controllers.Application.getNames

  3. angularJsコントローラー：

    app.controller('NamesCtrl', function($scope) {
    // get names using AngularJS AJAX API  
    $http.get('/getNames').success(function(data){
        $scope.names = data;
    });
});

  4. 私たちのHTML：

    <!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">  </script>
</head>
<body>
    <div>
        <ul>
            <li ng-repeat=" name in names">{{name}}</li>
        </ul>
    </div>
</body>
</html>

このようにして、懸念を完全に分離します。クライアント側では、サーバー側の実装方法は関係ありません。必要なのは、応答として有効なJSONだけです。これは良い習慣だと考えられています。

ただし、もちろん、ほとんどのHTMLをPlay 2からレンダリングし、AngularJSを使用して、必要に応じて特定の特定のことを行うことができます。すべては、アプリにどのような概念を選択するかによります。

...テンプレートをPlayでレンダリングした後に到着するデータをangularに渡してクライアントサイドで後で使用する方法は？

私はそれが良い考えだとは思いません、しかしあなたはきっと次のようにngInitディレクティブを使用してそれを行うことができます：

@(message:String)
@main("Welcome") {
<div ng-init="angular_message = @message">
<h1>Hello, {{angular_message}} !</h1>
</div>

}

angular_messageテンプレートの@message値で初期化されたscopeにPlay 2が含まれます。

数学的なオブジェクト指向のバックエンド+サーバー、およびフロントエンドでのかなり集中的なUIを含む大規模なアプリのために、これら2つのフレームワークを一緒に使用することはまったくお勧めですか？

私の見解では、はい、それは2つの優れたフレームワークであり、完全に協調して機能します。

45
arussinov