Angular Phonecat with Play Framework

August 20, 2012 . coding . Comments
Tags: angular play-framework github tech

About this topic

Using Angular JS Framework inside Play Framework 2.0 Java

Topic buzz

What others are thinking. Add to the conversation and generate some chatter.

Read later

Save this article for a later read or point of reference. +Instapaper

After lot of debate and discussion - fellow geeks at my work have decided to use Angular JS as the standard for the Javascript MVC library. Ember.js came very close but Angular beat Ember.

I'm quite familiar with Play framework. Both 1.2.x versions as well as Play 2.0 Java version. I'm learning the basics of Angular JS. Angular folks have put up excellent documentation on their site with step-wise tutorials. I also like the structure of the tutorials - step wise - focussing on TDD and leveraging git diff at each step to show how the code evolves. A neat and powerful concept to educate new frameworks and code-base.

Angular JS Phonecat tutorial is a standalone app where the content is served from the json files. I have integrated this example app with Play Framework 2.0 to serve the json content from the Play Controller. Angular's services would call the RESTFul Play conrollers to consume the json response. This way there is true separation of concerns - the UI and Server layer can be developed independently and re-used.

Integration of Angular JS with Play Framework is also very straightforward. I've used the quick way and not sure whether this is the best way i.e. putting entire Angular app as part of Play's Asset folder.

Step 0

Clone the Angular phonecat example from git as desribed here .

Create a new Play 2.0 Java project

Step 1

Copy the entire example app - including app, config,logs,scripts,test directories to public directory of newly created Play application

Step 2

Write a service in Application Controller to serve the request.

Step 3

Add routes for the Play app in the conf/routes file

Step 4

Change the build.sbt to add a dependency. I'm using Apache's commons io to do the file reading

Step 5

Run the app and navigate to http://localhost:9000

The complete source code of this app is on Github. Clone/fork it - https://github.com/basav/momo

Comments Section

Feel free to comment on the post but keep it clean and on topic.