結合玩！框架2.xx與Angular.js

我有麻煩的是這兩個看似強大的框架的婚姻。看來大部分可以通過1完成的事情可以通過2完成。如何最好地利用這兩者？有沒有什麼思維模式？以一個CRUD應用程序的基本示例 - 我可以編寫一個路由mysite/listnames映射到正在播放的控制器！並且這呈現具有代碼的模板 -結合玩！框架2.xx與Angular.js

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

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

請注意，main是典型的自引導模板。但是現在這個產生的輸出似乎對Angular來說沒有用，如果我說要添加一個輸入框來過濾這些名字，或者我想對它們做任何事情。什麼是典型的治療方式？基本的東西似乎是 -

1）如何傳遞在播放模板後通過播放數據到達客戶端以後使用的角度。

2）將這兩個框架一起用於包含面向數學對象的後端+服務器和前端相當密集的UI的大型應用程序是否可以建議？

來源

2014-01-25 new_web_programmer

請記住，默認情況下Angular緩存模板，因此服務於動態播放內容是沒有意義的。 –

有很多方法可以將這兩個框架結合起來。所有這一切取決於你想要參與其中的每一個。例如，您的Play 2應用程序可能僅從一側（服務器端）提供JSON請求/響應，而AngularJS將從客戶端提供所有其他內容。考慮到你的例子基本CRUD應用：

一個播放2控制器：

def getNames = Action { 

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

}

您的發揮它的根：

GET /getNames controllers.Application.getNames

的AngularJs控制器：

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

我們的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作爲一個迴應。這被認爲是一種很好的做法。

但是，當然你可以從Play 2渲染大部分HTML，並在需要的地方使用AngularJS。一切取決於你爲你的應用選擇的概念。

...如何將渲染模板後到達的數據通過發揮角度爲以後在客戶端使用？

我不認爲這是一個好主意，但你一定可以使用ngInit指令這個樣子做：

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

}

，你將不得不angular_message與@message值初始化的scope來自Play 2模板。

是否adviseable在所有使用這兩個框架一起涉及面向後端+ 服務器數學對象，並在前端相當密集的UI一個大級別的應用程序嗎？

從我的角度來看，是的，這是兩個很棒的框架，他們完美的協同工作。

來源

2014-01-26 14:24:46 arussinov

能否請您詳細說明爲什麼您認爲使用'ngInit'不是一個好主意？謝謝 – ishaaq

是的，也對你的想法感到好奇，爲什麼'ngInit'不太好用 – jetcom

另請參閱https://typesafe.com/activator/template/angular-seed-play（可能你已經開始了），但對於其他人絆倒在這個線程上。 –

結合玩！框架2.xx與Angular.js

回答

相關問題