Сочетание Play! Framework 2.xx с Angular.js

У меня возникла проблема в этом браке из двух, казалось бы, мощных рамок. Кажется, что большинство вещей, которые могут быть сделаны 1, могут быть сделаны 2. Как лучше всего использовать эти два? Есть ли какие-то образцы мышления? Возьмите базовый пример приложения CRUD - Я могу написать маршрут mysite/listnames, который сопоставляется с контроллером в игре! и этот шаблон представляет собой код с кодом:Сочетание Play! Framework 2.xx с Angular.js

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

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

Обратите внимание, что основной является типичным шаблоном начальной загрузки. Однако теперь результат, который он производит, кажется бесполезным для Angular, если я хочу добавить поле ввода для фильтрации этих имен, или я хочу вообще что-либо сделать с ними. Что такое обычный способ? Базовая вещь -

1) как передать данные, которые поступают после визуализации шаблона путем воспроизведения в угловое для последующего использования на стороне клиента.

2) Возможно ли вообще использовать эти два фреймворка для приложения с большим уровнем, включающего в себя ориентированный на математический объект бэкэнд + сервер, и довольно интенсивный интерфейс во внешнем интерфейсе?

источник

2014-01-25 new_web_programmer

Имейте в виду, что шаблоны с угловыми кэшами по умолчанию, тем самым обеспечивая динамическое воспроизведение контента, не имеют смысла. –

Существует много способов объединить эти две структуры. Все зависит от того, насколько вы хотите охватить каждого из них. Например, ваше приложение Play 2 может обслуживать только JSON-запрос/ответ с одной стороны (на стороне сервера), а AngularJS сделает все остальное с клиентской стороны. Учитывая ваш пример для базового приложения CRUD:

A Воспроизведение 2 контроллера:

def getNames = Action { 

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

}

Ваш Play корень для этого:

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 ответ. Это считается хорошей практикой.

Но, конечно, вы можете отобразить большую часть своего HTML-кода от Play 2 и использовать AngularJS для некоторых конкретных случаев, где это необходимо. Все зависит от того, какую концепцию вы выберете для своего приложения.

... как передать данные, которые поступают после визуализации шаблона Играть в угловой для последующего использования на стороне клиента?

Я не думаю, что это хорошая идея, но вы, конечно, можете сделать это с помощью ngInit директивы, как это:

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

}

и вы будете иметь angular_message в scope инициированного с @message значения от Play 2 шаблон.

ли целебным вообще использовать эти две рамки вместе для приложения большого уровня с участием математической объектно-ориентированный бэкенд + сервер, и довольно интенсивный интерфейс в веб-интерфейсе?

С моей точки зрения, да, это два отличных каркаса, и они отлично работают на концертах.

источник

2014-01-26 14:24:46 arussinov

Не могли бы вы объяснить, почему вы думаете, что использование 'ngInit' - не очень хорошая идея? Спасибо – ishaaq

Да, также интересно узнать о том, почему 'ngInit' менее предпочтительно – jetcom

Также см. Https://typesafe.com/activator/template/angular-seed-play (возможно, вы уже начали), но и для других, кто наткнуться на эту тему. –

Сочетание Play! Framework 2.xx с Angular.js

ответ

Смежные вопросы