Lesson 11: Template for Scala Play + Bootstrap + AngularJS

Here is a quick run-down of the role of these technologies:

Play for Scala: MVC framework – handles HTTP requests by invoking Scala code, typically providing a response with HTML templates or JSON.

Twitter Bootstrap: CSS and JavaScript to give a professional, responsive look and feel to webpages.

AngularJS: JavaScript library to give more power to webpages, allowing the server to do less.

Here I’ll create a re-usable template that references online copies of Bootstrap and Angular so you don’t need to download, unzip and import anything.

Step 1: Create a Skeleton Scala Play App

I outline that here: https://scalaplayschool.wordpress.com/2014/08/10/hello-world-using-scala-play/

I download activator (that runs the Play framework), unzip it, put it on my Path and use these commands:

$ cd
$ activator new lesson11
( at this point I choose option 4 – play-scala)
$ cd lesson11
$ activator eclipse
$ activator run

Step 2: Edit the Main Template

We need to replace the contents of app/views/main.scala.html – generated as a template for use in other views. Here is what we need it to contain:

@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
	<title>@title</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
</head>
 <body>
	<div style="padding:20px">
	@content
    </div>
</body>
</html>

Let’s update app/views/index.scala.html to use this template and test its capabilities:

@(message: String)

@main("Welcome to Play") {
<div ng-app>
  <h1>Welcome to Scala Play + Bootstrap + AngularJS</h1>
  <form role="form">
    <div class="form-group">
      <label for="sometext">Type in some text:</label>
      <input id="sometext" class="form-control" ng-model="sometext" autofocus>
    </div>
  </form>
  <div class="alert alert-success" ng-show="sometext">
    <strong>You typed:</strong> {{ sometext }}
  </div>
</div>
}

The main things to note are as follows:
• The ng-app attribute on the main div – this defines a block of the page for Angular to watch and manage.
• The role=”form” attribute on the form – will cause Bootstrap to style the form.
• The ng-model=”sometext” which binds the value of this input to an Angular field.
• The ng-show=”sometext” which means that Angular will show this element if sometext is non-empty and hide when empty.
{{ sometext }} – this will be replaced by Angular with the contents of the sometext field.

Let’s try it out by going to http://localhost:9000/

The font is a sans-serif font, courtesy of Bootstrap. The full-width textbox is styled by Bootstrap too.

Let’s type some text in and see what happens as the Angular sometext field is updated as we type:

Sadly the images don’t do it justice but the contents of the green div update as you type – I think it’s considered the standard Hello, World for AngularJS.

If we delete the contents of the textbox the green box will disappear as the ng-show condition is no longer met:

There we have it. As I said, this isn’t so much about great functionality in the example. Hopefully it’s an idea of how easily the generated template can be made to bring in Bootstrap (with jQuery) and AngularJS.