Combining Play! Framework 2.xx with Angular.js

Question 1

Combining Play! Framework 2.xx with Angular.js

angularjs playframework playframework-2.0

new_web_programmer · Jan 25, 2014 · Viewed 16k times · Source

Answer

Answer

There are many ways you can combine this two frameworks. All depends on how much you want to envolve each of them. For example your Play 2 application may only serve JSON request/respons from the one side(server side) and AngularJS would make all the other stuff from the client side. Considering your example for basic CRUD app :

A Play 2 controller:

def getNames = Action {

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

}

Your Play root for it:

GET /getNames controllers.Application.getNames

an AngularJs controller:

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

Our 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>

This way you completely separate the concerns, for your client side, it doesn't matter how the server side is implemented, only thing you need is valid JSON as a response. It's considered to be a good practice.

But of course you can render most of your HTML from Play 2 and use AngularJS for some specific stuff where needed. All depends what conception you choose for your app.

...how to pass on data that arrives after rendering the template by Play to angular for later use at clientside?

I don't think that it's a good idea, but you surely may do it using ngInit directive like this:

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

}

and you will have angular_message in the scope initialised with @message value from Play 2 template.

Is it adviseable at all to use these two frameworks together for a large-level app involving a mathematical object oriented backend + server, and a fairly intensive UI at frontend?

From my point of view, yes, it's two great frameworks and they perfectly work in concert.

Question 2

I am having trouble is this marriage of 2 seemingly powerful frameworks. It seems most things that can be done by 1 can be done by 2.How to best utilize the two? Are there any patterns of thinking? Take a basic example of a CRUD application -- I can write a route mysite/listnames which maps to a controller in play! and this renders a template with the code --

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

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

Note that main is a typical bootstrapping template. However now the output this produces seems to be of no use to Angular if say i want to add a input box for filtering these names, or i want to do anything with them at all. What is a typical way of proceeding? The base thing seems to be-

1) how to pass on data that arrives after rendering the template by Play to angular for later use at clientside.

2) Is it adviseable at all to use these two frameworks together for a large-level app involving a mathematical object oriented backend + server, and a fairly intensive UI at frontend?

Combining Play! Framework 2.xx with Angular.js

Answer

Related questions