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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

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

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

}

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

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

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