So for this article I’ll show you the steps I went through to create a minimal Angular.js application using nothing but Scala (and some HTML templates of course).
This Angular / Scala.js app will show the following features:
- Controllers written in Scala
- Directives written in Scala
- Filters written in Scala
- Use the Angular.js route module for handling URL paths
- Use foundation for templating
You can find the complete sources for this application in GitHub (https://github.com/josdirksen/smartjava/tree/master/scalajs).
Lets get started
The first thing we need to do is make sure we have node.js installed. This isn’t really necessary but will speed up development considerably. So install node.js from here (https://nodejs.org/download/) before you continue. To work with Scala.js we have to install an sbt plugin. In the file plugins.sbt in the project directory add the following line:
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.0")
Note that I’ve tested this with sbt 0.13.7, so make sure you’ve got a current version of sbt installed. Next lets look at the build.sbt file we’ve used for this project:
In this build.sbt you can see the following:
- We enable the scalaJS Plugin
- We include a couple of Scala.js dependencies like we normally do for scala
- And finally we configure how the application will be packaged. More on that later
Lets look a bit at the last couple of lines of this build file:
Before we look at the Scala code and the HTML templates lets first look at a couple of useful SBT commands. Go to the directory where your project is and run sbt to open the sbt console:
jos@Joss-MacBook-Pro.local:~/git/scalajs$ sbt [info] Set current project to scalajs (in build file:/Users/jos/git/scalajs/)
> set scalaJSStage in Global := FastOptStage [info] Defining */*:scalaJSStage [info] The new value will be used by compile:jsEnv, compile:scalaJSExecClasspath and 1 others. [info] Run `last` for details. [info] Reapplying settings... [info] Set current project to scalajs (in build file:/Users/jos/git/scalajs/) >
> fastOptJS [warn] The global sbt directory is now versioned and is located at /Users/jos/.sbt/0.13. [warn] You are seeing this warning because there is global configuration in /Users/jos/.sbt but not in /Users/jos/.sbt/0.13. [warn] The global sbt directory may be changed via the sbt.global.base system property. [info] Fast optimizing /Users/jos/git/scalajs/target/scala-2.11/scalajs-fastopt.js [success] Total time: 7 s, completed Mar 8, 2015 8:01:31 AM
Enough about SBT, lets look at the Scala code
Angular App in Scala
- scalajs-fastopt.js: our compiled application.
- scalajs-jsdeps.js: all dependencies as a single file
- scalajs-launcher.js: code that will launch our application when the page is loaded
We have two additional HTML files, one that is shown as the main page in the ng-view we just saw, and one that is used as the tiles you saw in the beginning of this article:
So now that we’ve seen the HTML, it is time for the actual code. The first part we’ll look at is the starting point of any Angular application, the module configuration:
Here we define our Angular module (named helloworld) and add two dependencies: ngRoute and mm.foundation. ngRoute provides us with a way to easily configure URL mapping to templates and controllers, and mm.foundation (https://github.com/pineconellc/angular-foundation/tree/gh-pages) provides us with directives that map to foundation (http://foundation.zurb.com/) widgets. Next we link to the controllers, filters, directives, config objects we want to use in this app. Note that these are all statically typed, so you can’t forget or register angular components incorrectly. In this example we have five additional components, lets look at each one. First lets look at the RoutingConfig:
I won’t go into too much detail here, since the code is pretty self-explanatory. What you can see here is that we define the template that we want to show (when the url from the route is accessed), we setup some scope variables (all typed!) and start an interval using the injected Interval service.
If you’ve looked through the pages you can also see we use a number of filters. Defining a filter in Scala.js is really easy:
And finally we have a directive which we use in tile.html.