Play Framework 2.1.0 & AngularJS Integration

Question

1) I would like to use AngularJS with Play Framework 2.1.0, with Play serving JSON content as a RESTful server back-end, it appears since the move from version 1.x to 2.x it is not possible to server static HTML content from say the Public folder using the approach below:

Routes.conf:

GET     /                           staticFile:/public/index.html

This results in Controller method call expected exception being raised.

The one way I have found that works in Play 2.1.0 is writing an Action method in a Controller like the below:

public static Result index() {
    return ok(Play.application().getFile("public/index.html"));
}

Is this the best approach or is there a more elegant and functional solution to this?

2) Are there any potential downsides or "gotchas" in such an approach to using a client side JavaScript framework for the view instead of the Scala based template engine?

Any pointers would be greatly appreciated.

Answer 1

One approach to this when using Angular routes is to serve your index page using Play and to serve the partials as static resources from the public directory. The routes file would have the following content:

GET         /                               controllers.Application.index
GET         /assets/*file                   controllers.Assets.at(path="/public", file)

With the Play controller looking like:

  def index = Action {
     Ok(views.html.index())
  }

This allows you to use Plays templating to do your resource imports (It also works nicely with WebJars). For example in your index.scala.html:

 <script src="@routes.Assets.at("javascripts/app.js")" type="text/javascript"></script>
 <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("angular.min.js"))'></script>

Then you can put all of your partials in the public directory and serve them as static files, these can be referenced from your app.js like so:

      when('/partial-1', {templateUrl: '/assets/partials/partial-1.html',   controller: CtrlPartial1}).

Answer 2

When files are in the public folder you can simply access them using /assets/* URLs. You could also do things like that:

GET   /view/*file      controllers.Assets.at(path="/public/angular", file)

Morover, I'd say that even if it is static you could want to generate some data dynamically in the future. So what you could do is simple to create the HTML file as a classical template, let's say: ang/index.scala.html. Then your route and controller will look like:

route:

GET   /    controllers.Application.angView()

controller:

public static Result index() {
  return ok(views.html.ang.index(/*some data here?*/));
}

I like using client side views for client side generated stuffs, and server-side views to prepare the fields, injecting all relevant data that should be used during the whole application life.