Scala.js bindings for Angular. The goal is to provide an API/ experience very similar to the TypeScript API of Angular.
IMPORTANT: angulate2 currently only supports Scala 2.11.x
A basic Quickstart Example that may serve as template is available, as well as set of extended examples.
Add the following lines to your project/plugins.sbt:
addSbtPlugin("de.surfice" % "sbt-angulate2" % "0.1.0-RC1")and this to your build.sbt:
enablePlugins(Angulate2Plugin)
ngBootstrap := Some("AppModule") //qualified name (including packages) of Scala class to bootstrapThe current version of angulate2 is built for Angular 4 and Scala.js 0.6.18.
import angulate2.std._
import angulate2.platformBrowser.BrowserModule
@NgModule(
imports = @@[BrowserModule],
declarations = @@[AppComponent],
bootstrap = @@[AppComponent]
)
class AppModule {}
@Component(
selector = "my-app",
template = "<h1>{{greeting}}</h1>
}
class AppComponent {
val greeting = "Hello Angular!"
}With the above configuration, a separate JS file PROJECT-sjsx.js is written to target/scala-2.11/ every time you run fastOptJS or fullOptJS. This file contains the class decorators generated from Angular2 annotations (@Component, ...) and represents the entry module of your Angular application. The annotations file loads the Scala.js package and all Angular libraries via require, so you need to load the annotations file with a module loader.
One way to achieve this is to use (System.js)[https://github.com/systemjs/systemjs]. The angulate2 sbt plugin provides some tasks to simplify the creation of the System.js configuration, and for running (lite-server)[https://github.com/johnpapa/lite-server]. Although you can build your angulate2 project without Node.js, some of these tasks require a Node.js installation, so make sure npm and node are in your PATH before you proceed.
Create src/main/resources/index-fastopt.html with the following content:
<html>
<head>
<title>Angulate2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="styles.css"> -->
<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs-fastopt.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>Most of the settings required for System.js config file are pre-configured by the angulate2 sbt plugin; however, you need to add the following System.js module mappings to your build.sbt:
systemJSMappings in fastOptJS ++= Seq(
"@angular/core" -> "npm:@angular/core/bundles/core.umd.js",
"@angular/common" -> "npm:@angular/common/bundles/common.umd.js",
"@angular/compiler" -> "npm:@angular/compiler/bundles/compiler.umd.js",
"@angular/platform-browser" -> "npm:@angular/platform-browser/bundles/platform-browser.umd.js",
"@angular/platform-browser-dynamic" -> "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
"@angular/http" -> "npm:@angular/http/bundles/http.umd.js",
"@angular/router" -> "npm:@angular/router/bundles/router.umd.js",
"@angular/forms" -> "npm:@angular/forms/bundles/forms.umd.js",
"@angular/upgrade" -> "npm:@angular/upgrade/bundles/upgrade.umd.js",
"rxjs" -> "npm:rxjs"
)then run sbt fastOptJS::systemJS. This creates the System.js configuration at target/scala-2.11/systemjs-fastopt.config.js.
Next run sbt fastOptJS::liteServerWriteConfigFile. This will install all required npm dependencies (which may take some time), copy your index-fastopt.html to target/scala-2.11/, and create bs-config-fastopt.json (the lite-server configuration).
Run sbt fastOptJS; this will build the Scala.js application file (angulate2-quickstart-fastopt.js) and the corresponding decorator file (angulate2-quickstart-sjsx.js). To run you project, start
$ node_modules/lite-server/bin/lite-server --config=target/scala-2.11/bs-config-fastopt.jsonfrom your shell, and point your browser to http://localhost:3000/index-fastopt.html.
TBD
This code is open source software licensed under the MIT License.