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).<\/p>\n
http:\/\/www.smartjava.org\/examples\/scalajs\/html\/index-dev.html#\/home<\/a><\/p>\n This Angular \/ Scala.js app will show the following features:<\/p>\n You can find the complete sources for this application in GitHub (https:\/\/github.com\/josdirksen\/smartjava\/tree\/master\/scalajs<\/a>).<\/p>\n 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\/<\/a>) 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:<\/p>\n 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:<\/p>\n In this build.sbt you can see the following:<\/p>\n Lets look a bit at the last couple of lines of this build file:<\/p>\n By setting the persistLauncher to true, we tell Scala.js to create the JavaScript that will automatically launch our application and by setting skip in packageJSDependencies to false, we tell Scala.js to package all our external JavaScript files into one big library for easy inclusion in your HTML page.<\/p>\n 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:<\/p>\n Now to generate the JavaScript code, we first have to enable node.js so that creating the JavaScript goes a whole lot quicker. In the sbt console set the following:<\/p>\n Now you can compile the Scala to JavaScript by calling fastOptJS<\/p>\n Enough about SBT, lets look at the Scala code<\/p>\n The complete file can be found in Git (https:\/\/github.com\/josdirksen\/smartjava\/tree\/master\/scalajs<\/a>) so we won’t show that here. We’ll just look at the interesting parts. Before we look at the JavaScript though, lets look at the HTML templates:<\/p>\n This file is our main index file. As you can see, not that special. Just a single div where we have an ng-view. What is interesting are the three JavaScript files at the bottom of the page. These are generated by Scala.js and contain all our code:<\/p>\n 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:<\/p>\n 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:<\/p>\n 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<\/a>) provides us with directives that map to foundation (http:\/\/foundation.zurb.com\/<\/a>) widgets.<\/p>\n 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:<\/p>\n As you can see, this is very easy and pretty much the same as you’d do it in JavaScript. The main difference is that instead of providing string values in JavaScript we now just reference a specific controller to use for a path.This controller, which we registered earlier, looks like this:<\/p>\n 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.<\/p>\n 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:<\/p>\n And finally we have a directive which we use in tile.html.<\/p>\n When you compile this application to JavaScript using sbt and open the HTML pages you’ll get what we showed in the beginning. A very basic Angular.js application with custom filters, directives and two Angular extensions.<\/p>\n![\"Minimal_angular_js\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/Minimal_angular_js-1024x624.png\")
<\/a><\/p>\n\n
Lets get started<\/h3>\n
addSbtPlugin('org.scala-js' % 'sbt-scalajs' % '0.6.0')<\/pre>\n\r\nenablePlugins(ScalaJSPlugin)\r\n\r\nname := "scalajs"\r\n\r\nversion := "1.0"\r\n\r\nscalaVersion := "2.11.5"\r\n\r\nlibraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.8.0"\r\nlibraryDependencies += "com.greencatsoft" %%% "scalajs-angular" % "0.4-SNAPSHOT"\r\n\r\nresolvers +=\r\n "Sonatype OSS Snapshots" at "https:\/\/oss.sonatype.org\/content\/repositories\/snapshots"\r\n\r\njsDependencies += "org.webjars" % "angularjs" % "1.3.14" \/ "angular-route.js" dependsOn "angular.js"\r\njsDependencies += "org.webjars" % "angularjs" % "1.3.14" \/ "angular.js"\r\njsDependencies += "org.webjars" % "angular-foundation" % "0.3.0" \/ "mm-foundation.js"\r\njsDependencies += "org.webjars" % "angular-foundation" % "0.3.0" \/ "mm-foundation-tpls.js"\r\n\r\npersistLauncher in Compile := true\r\npersistLauncher in Test := false\r\n\r\nskip in packageJSDependencies := false <\/pre>\n
\n
\r\npersistLauncher in Compile := true\r\nskip in packageJSDependencies := false <\/pre>\n
jos@Joss-MacBook-Pro.local:~\/git\/scalajs$ sbt\r\n[info] Set current project to scalajs (in build file:\/Users\/jos\/git\/scalajs\/)<\/pre>\n
> set scalaJSStage in Global := FastOptStage\r\n[info] Defining *\/*:scalaJSStage\r\n[info] The new value will be used by compile:jsEnv, compile:scalaJSExecClasspath and 1 others.\r\n[info] Run `last` for details.\r\n[info] Reapplying settings...\r\n[info] Set current project to scalajs (in build file:\/Users\/jos\/git\/scalajs\/)\r\n><\/pre>\n
> fastOptJS\r\n[warn] The global sbt directory is now versioned and is located at \/Users\/jos\/.sbt\/0.13.\r\n[warn] You are seeing this warning because there is global configuration in \/Users\/jos\/.sbt but not in \/Users\/jos\/.sbt\/0.13.\r\n[warn] The global sbt directory may be changed via the sbt.global.base system property.\r\n[info] Fast optimizing \/Users\/jos\/git\/scalajs\/target\/scala-2.11\/scalajs-fastopt.js\r\n[success] Total time: 7 s, completed Mar 8, 2015 8:01:31 AM<\/pre>\n
Angular App in Scala<\/h3>\n
\r\n<!DOCTYPE html>\r\n<html ng-app="helloworld">\r\n<head>\r\n <meta charset="UTF-8">\r\n <title>Minimal angular.js<\/title>\r\n <link rel="stylesheet" href="css\/foundation.css" \/>\r\n <style>\r\n .tile {\r\n background: #ffeeee;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n<div class="row">\r\n <div class="large-12 columns">\r\n <h1>Sample angular.js \/ foundation \/ scala.js app<\/h1>\r\n <\/div>\r\n<\/div>\r\n \r\n<div ng-view><\/div>\r\n \r\n<!-- Include Scala.js compiled code -->\r\n<script type="text\/javascript" src="..\/..\/..\/target\/scala-2.11\/scalajs-fastopt.js"><\/script>\r\n<script type="text\/javascript" src="..\/..\/..\/target\/scala-2.11\/scalajs-jsdeps.js"><\/script>\r\n<script type="text\/javascript" src="..\/..\/..\/target\/scala-2.11\/scalajs-launcher.js"><\/script>\r\n \r\n<\/body>\r\n \r\n<\/html> <\/pre>\n\n
\r\n<!DOCTYPE html>\r\n<html ng-app="helloworld">\r\n<head>\r\n <meta charset="UTF-8">\r\n <title>Minimal angular.js<\/title>\r\n <link rel="stylesheet" href="css\/foundation.css" \/>\r\n <style>\r\n .tile {\r\n background: #ffeeee;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n<div class="row">\r\n <div class="large-12 columns">\r\n <h1>Sample angular.js \/ foundation \/ scala.js app<\/h1>\r\n <\/div>\r\n<\/div>\r\n \r\n<div ng-view><\/div>\r\n \r\n<!-- Include Scala.js compiled code -->\r\n<script type="text\/javascript" src="..\/..\/..\/target\/scala-2.11\/scalajs-fastopt.js"><\/script>\r\n<script type="text\/javascript" src="..\/..\/..\/target\/scala-2.11\/scalajs-jsdeps.js"><\/script>\r\n<script type="text\/javascript" src="..\/..\/..\/target\/scala-2.11\/scalajs-launcher.js"><\/script>\r\n \r\n<\/body>\r\n \r\n<\/html> <\/pre>\n\r\n<p simple-directive="some configuration"><\/p> <\/pre>\n
\r\nobject HelloWorld extends JSApp {\r\n \r\n def main(): Unit = {\r\n val module = Angular.module("helloworld",Seq("ngRoute","mm.foundation"))\r\n module.controller(HomeController)\r\n module.config(RoutingConfig)\r\n module.filter(ToUpperFilter)\r\n module.filter(IntDoublerFilter)\r\n module.directive(SimpleDirective)\r\n }\r\n} <\/pre>\n\r\nobject RoutingConfig extends Config {\r\n \r\n @inject\r\n var routeProvider: RouteProvider = _\r\n \r\n override def initialize() {\r\n routeProvider\r\n .when("\/home", Route(HomeController))\r\n }\r\n} <\/pre>\n\r\nobject HomeController extends PageController {\r\n \r\n import js.JSConverters._\r\n \r\n val templateUrl = "templates\/home.html"\r\n override type ScopeType = ControllerData\r\n \r\n @inject\r\n var service: Interval = _\r\n \r\n override def initialize(scope: ScopeType): Unit = {\r\n scope.title = "This is the title"\r\n scope.subTitle = "Make Me Big"\r\n \r\n scope.anotherScope = 1 to 12 toJSArray\r\n \r\n service.apply( () => scope.count = System.currentTimeMillis() % 10000, 100)\r\n }\r\n \r\n \/**\r\n * The specific scope data used in this controller\r\n *\/\r\n trait ControllerData extends Scope {\r\n var title: String = js.native\r\n var subTitle: String = js.native\r\n var count: Double = js.native\r\n \r\n var anotherScope: js.Array[Int] = js.native\r\n }\r\n} <\/pre>\n\r\n\/**\r\n * Simple filter: text to uppercase\r\n *\/\r\nobject ToUpperFilter extends Filter {\r\n override val name = "upper"\r\n override def filter(text: String): String = text.toUpperCase\r\n}\r\n \r\n\/**\r\n * Simple filter: double a value\r\n *\/\r\nobject IntDoublerFilter extends Filter {\r\n override val name = "double"\r\n override def filter(text: String): String = text.toInt*2 toString\r\n} <\/pre>\n\r\nobject SimpleDirective extends AttributeDirective {\r\n \r\n override val name = "simpleDirective"\r\n \r\n @JSExportAll\r\n case class Address(ip : String)\r\n \r\n override def link(scope: ScopeType, elems: Seq[Element], attrs: Attributes, controller: Controller*) = {\r\n val elem = elems.head.asInstanceOf[HTMLElement]\r\n elem.textContent = "Some content set from the directive"\r\n }\r\n} <\/pre>\n