Update README.md

jokade · Nov 28, 2016 · 4c3bc5f · 4c3bc5f
1 parent d95c06f
commit 4c3bc5f
Showing 1 changed file with 79 additions and 1 deletion.
diff --git 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
+<html>
+  <head>
+    <title>Angulate2 App</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 System.js -->
+    <script src="systemjs.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>
+``` 
 
 License
 -------