Angular Phonecat with Play Framework
About this topic
Using Angular JS Framework inside Play Framework 2.0 Java
What others are thinking. Add to the conversation and generate some chatter.
Save this article for a later read or point of reference. +Instapaper
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.
Clone the Angular phonecat example from git as desribed here .
Create a new Play 2.0 Java project
Copy the entire example app - including app, config,logs,scripts,test directories to public directory of newly created Play application
Write a service in Application Controller to serve the request.
Add routes for the Play app in the conf/routes file
Change the build.sbt to add a dependency. I'm using Apache's commons io to do the file reading
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
Feel free to comment on the post but keep it clean and on topic.blog comments powered by Disqus