Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Seed Application for Playframework 2, RequireJS, WebJars, and AngularJS
JavaScript Scala CSS
branch: master

README.md

Example application for Play+AngularJS+RequireJS.

Intro

This template application shows how to organize your application with Playframework 2, WebJars, RequireJS and AngularJS.

It shows an alternative way of organizing modules than the official Angular-Play-Seed.

For a full explanation, read the following blog post: http://www.mariussoutier.com/blog/2013/08/25/requirejs-optimization-play-webjars/

The updates made for Play 2.2 and newer WebJars are explained here: http://www.mariussoutier.com/blog/2014/03/25/requirejs-optimization-play-2-2-webjars-cdns/

The changes for Play 2.3 and sbt-web will be discussed soon!

Code Organization

The JavaScript modules are organized as follows:

|- app
|-- assets
|--- javascripts    <- contains all the JavaScript/CoffeeScript modules
|---- app.js        <- app module, wires everything together
|---- main.js       <- tells RequireJS how to load modules and bootstraps the app
|---- common/       <- a module, in this case
|----- main.js      <- main file of the module, loads all sub-files in this folder
|----- filters.js   <- common's filters
|----- directives/  <- common's directives
|----- services/    <- common's services
|---- ...

Trying It Out

Dev Mode

  • Load dependencies via sbt update
  • Run via sbt ~run
  • Go to localhost:9000

This uses the normal JavaScript files and loads libraries from the downloaded WebJars.

Prod Mode

Running:

  • Run sbt start -Dconfig.resource=prod.conf

Deployment:

  • Produce executable via sbt clean dist
  • Extract unzip target/universal/play-angular-require-seed-2.x.x.zip
  • Run play-angular-require-seed-2.x.x/bin/play-angular-require-seed -Dhttp.port=9000 -Dconfig.resource=prod.conf

This uses the uglified JavaScript files, versioned and compressed assets, and loads WebJars resources from the jsDelivr CDN.

Activator

This application is also published as a Typesafe Activator template:

http://typesafe.com/activator/template/play-angular-require-seed

To use it from Activator, type

$ activator new <project-name>

Activator will now ask you to choose a template:

Browse the list of templates: http://typesafe.com/activator/templates
Choose from these featured templates or enter a template name:
  1) minimal-java
  2) minimal-scala
  3) play-java
  4) play-scala
> 

Enter play-angular-require-seed (you can use tab completion).

> play-angular-require-seed
OK, application "<project-name>" is being created using the "play-angular-require-seed" template.

Your new app is now ready for development. Switch to its directory and run activator or sbt.

$ cd <project-name>
$ activator ~run
Something went wrong with that request. Please try again.