From 4c3bc5f3b03132ef96e74b99ecf65c9bf944d3a6 Mon Sep 17 00:00:00 2001 From: jokade Date: Mon, 28 Nov 2016 20:29:33 +0100 Subject: [PATCH] Update README.md --- README.md | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5af6681..9ffb2c1 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ resolvers += Resolver.sonatypeRepo("snapshots") addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.13") -addSbtPlugin("de.surfice" % "sbt-angulate2" % "0.1-SNAPSHOT") +addSbtPlugin("de.surfice" % "sbt-angulate2" % "0.0.1-SNAPSHOT") ``` and this to your `build.sbt`: ```scala @@ -39,6 +39,84 @@ ngBootstrap := Some("NAME_OF_THE_MODULE_TO_BOOTSTRAP") ``` The current version of angulate2 is built for Angular-2.2.0 and Scala.js 0.6.13+. +### 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 Angular2 application. + +If you use System.js to load your application, your `systemjs.config.js` must contain a `map` entry for `scalaModule` which points to the actual JS file generated by Scala.js, e.g.: +```javascript +/** + * Basic System.js configuration for angulate2. + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + paths: { + // paths serve as alias + 'npm:': 'node_modules/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the target/scala-2.11 folder + app: 'target/scala-2.11', + // angular bundles + '@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', + // other libraries + 'rxjs': 'npm:rxjs', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + // the main script to be loaded from target/scala-2.11 + main: './PROJECT-sjsx.js', + map: { + // the name of the Scala.js module to be loaded + scalaModule: './PROJECT-fastopt.js' + }, + format: 'cjs', + defaultExtension: 'js' + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +``` +This configuration assumes that the Angular dependecies have been installed with `npm` in the root folder of your app. +Then you only need to import the `app` module from within your `index.html` to bootstrap your Angular application (using the NgModule specified by the `ngBootstrap` property in your `build.sbt`): +```html + + + Angulate2 App + + + + + + + + + + + + + + + + Loading... + + +``` License -------