https://github.com/jokade/angulate2
Scala.js bindings for Angular
https://github.com/jokade/angulate2
angular-2 scala-js scalajs
Last synced: 4 months ago
JSON representation
Scala.js bindings for Angular
- Host: GitHub
- URL: https://github.com/jokade/angulate2
- Owner: jokade
- License: mit
- Created: 2015-05-11T14:00:48.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-10-29T09:22:32.000Z (over 7 years ago)
- Last Synced: 2025-02-01T01:24:42.934Z (5 months ago)
- Topics: angular-2, scala-js, scalajs
- Language: Scala
- Homepage:
- Size: 218 KB
- Stars: 87
- Watchers: 15
- Forks: 15
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
angulate2
===========
[](https://gitter.im/angulate2/Lobby)
[](https://www.scala-js.org)
[Scala.js](http://www.scala-js.org/) bindings for [Angular](http://www.angular.io). The goal is to provide an API/ experience very similar to the [TypeScript API](https://angular.io/docs/ts/latest/guide/cheatsheet.html) of Angular.
**IMPORTANT: angulate2 currently only supports Scala 2.11.x**
A basic [Quickstart Example](https://github.com/jokade/angulate2-quickstart) that may serve as template is available, as well as set of **[extended examples](https://github.com/jokade/angulate2-examples)**.
**[Release Notes](https://github.com/jokade/angulate2/wiki/Release-Notes)**
Getting Started
---------------
### SBT settings
Add the following lines to your `project/plugins.sbt`:
```scala
addSbtPlugin("de.surfice" % "sbt-angulate2" % "0.1.0-RC1")
```
and this to your `build.sbt`:
```scala
enablePlugins(Angulate2Plugin)
ngBootstrap := Some("AppModule") //qualified name (including packages) of Scala class to bootstrap
```
The current version of angulate2 is built for Angular 4 and Scala.js 0.6.18.
### Create application module and component
```scala
import angulate2.std._
import angulate2.platformBrowser.BrowserModule
@NgModule(
imports = @@[BrowserModule],
declarations = @@[AppComponent],
bootstrap = @@[AppComponent]
)
class AppModule {}
@Component(
selector = "my-app",
template = "
{{greeting}}
}
class AppComponent {
val greeting = "Hello Angular!"
}
```
### Build and run with System.js
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.
#### Add the HTML index
Create `src/main/resources/index-fastopt.html` with the following content:
```html
Angulate2 QuickStart
System.import('app').catch(function(err){ console.error(err); });
Loading...
```
#### Create the System.js configuration
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`:
```scala
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`.
#### Create lite-server configuration
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).
#### Compile and run project
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
```bash
$ node_modules/lite-server/bin/lite-server --config=target/scala-2.11/bs-config-fastopt.json
```
from your shell, and point your browser to `http://localhost:3000/index-fastopt.html`.
### Bundle the application with webpack
TBD
License
-------
This code is open source software licensed under the [MIT License](http://opensource.org/licenses/MIT).