angular 2 / angular 4 demo [ci skip]

Makefile

@@ -115,7 +115,7 @@ ctestserv: ## Start a test server on port 8000
 
 ## Demos
 
-DEMOS=angular browserify requirejs rollup systemjs webpack
+DEMOS=angular angular-new browserify requirejs rollup systemjs webpack
 DEMOTGTS=$(patsubst %,demo-%,$(DEMOS))
 .PHONY: demos
 demos: $(DEMOTGTS)
@@ -125,6 +125,11 @@ demo-angular: ## Run angular demo build
 	#make -C demos/angular
 	@echo "start a local server and go to demos/angular/angular.html"
 
+.PHONY: demo-angular-new
+demo-angular-new: ## Run angular 2 demo build
+	make -C demos/angular2
+	@echo "go to demos/angular/angular.html and run 'ng serve'"
+
 .PHONY: demo-browserify
 demo-browserify: ## Run browserify demo build
 	make -C demos/browserify

README.md

@@ -167,7 +167,8 @@ CDNjs automatically pulls the latest version and makes all versions available at
 
 The `demos` directory includes sample projects for:
 
-- [`angular`](demos/angular/)
+- [`angular 1.x`](demos/angular/)
+- [`angular 2.x / 4.x`](demos/angular2/)
 - [`browserify`](demos/browserify/)
 - [`Adobe ExtendScript`](demos/extendscript/)
 - [`meteor`](demos/meteor/)

demos/angular2/.angular-cli.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular2"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "prefix": "app",
+      "scripts": []
+    }
+  ],
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

demos/angular2/Makefile

@@ -0,0 +1,12 @@
+.PHONY: angular
+angular:
+	# Test Angular2 build
+	cp package.json-angular2 package.json
+	npm install
+	ng build
+
+	# Test Angular4 build
+	cp package.json-angular2 package.json
+	npm install
+	ng build
+

demos/angular2/README.md

@@ -0,0 +1,68 @@
+# Angular 2+
+
+The library can be imported directly from TS code with:
+
+```typescript
+import * as XLSX from 'xlsx';
+```
+
+This demo uses an array of arrays as the core data structure.  The component
+template includes a file input element, a table that updates based on the data,
+and a button to export the data.
+
+## Switching between Angular versions
+
+Modules that work with Angular 2 largely work as-is with Angular 4.  Switching
+between versions is mostly a matter of installing the correct version of the
+core and associated modules.  This demo includes a `package.json` for Angular 2
+and another `package.json` for Angular 4.
+
+Switching to Angular 2 is as simple as:
+
+```bash
+$ cp package.json-angular2 package.json
+$ npm install
+$ ng serve
+```
+
+Switching to Angular 4 is as simple as:
+
+```bash
+$ cp package.json-angular4 package.json
+$ npm install
+$ ng serve
+```
+
+## XLSX Symlink
+
+In this tree, `node_modules/xlsx` is a symlink pointing back to the root.  This
+enables testing the development version of the library.  In order to use this
+demo in other applications, add the `xlsx` dependency:
+
+```bash
+$ npm install --save xlsx
+
+```
+
+## SystemJS Configuration
+
+The default angular-cli configuration requires no additional configuration.
+
+Some deployments use the SystemJS loader, which does require configuration.  The
+SystemJS example shows the required meta and map settings:
+
+```js
+SystemJS.config({
+	meta: {
+		'xlsx': {
+			exports: 'XLSX' // <-- tell SystemJS to expose the XLSX variable
+		}
+	},
+	map: {
+		'xlsx': 'xlsx.full.min.js', // <-- make sure xlsx.full.min.js is in same dir
+		'fs': '',     // <--|
+		'crypto': '', // <--| suppress native node modules
+		'stream': ''  // <--|
+	}
+});
+```

demos/angular2/node_modules/xlsx

@@ -0,0 +1 @@
+../../../

demos/angular2/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "angular2",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+
+    "@angular/router": "^4.0.0",
+    "core-js": "^2.4.1",
+
+    "rxjs": "^5.1.0",
+
+    "zone.js": "^0.8.4",
+    "file-saver": "^1.3.3"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.1.2",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
+    "@types/node": "~6.0.60",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}

demos/angular2/package.json-angular2

@@ -0,0 +1,39 @@
+{
+  "name": "angular2",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "~2.4.1",
+    "@angular/compiler": "~2.4.1",
+    "@angular/compiler-cli": "^2.4.1",
+    "@angular/core": "~2.4.1",
+    "@angular/forms": "~2.4.1",
+    "@angular/http": "~2.4.1",
+    "@angular/platform-browser": "~2.4.1",
+    "@angular/platform-browser-dynamic": "~2.4.1",
+    "@angular/platform-server": "^2.4.1",
+    "@angular/router": "~3.4.0",
+    "core-js": "^2.4.1",
+    "reflect-metadata": "^0.1.8",
+    "rxjs": "^5.0.2",
+    "systemjs": "0.19.40",
+    "zone.js": "^0.7.4",
+    "file-saver": "^1.3.3"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.1.2",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
+    "@types/node": "~6.0.60",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}

demos/angular2/package.json-angular4

@@ -0,0 +1,39 @@
+{
+  "name": "angular2",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+
+    "@angular/router": "^4.0.0",
+    "core-js": "^2.4.1",
+
+    "rxjs": "^5.1.0",
+
+    "zone.js": "^0.8.4",
+    "file-saver": "^1.3.3"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.1.2",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
+    "@types/node": "~6.0.60",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}

demos/angular2/src/app/app.module.ts

@@ -0,0 +1,28 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { SheetJSComponent } from './sheetjs.component';
+
+
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-root',
+	template: `<sheetjs></sheetjs>`
+})
+export class AppComponent {
+	title = 'test';
+}
+
+@NgModule({
+	declarations: [
+		SheetJSComponent,
+		AppComponent
+	],
+	imports: [
+		BrowserModule
+	],
+	providers: [],
+	bootstrap: [AppComponent]
+})
+export class AppModule { }

demos/angular2/src/app/sheetjs.component.ts

@@ -0,0 +1,74 @@
+/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
+/* vim: set ts=2: */
+import { Component } from '@angular/core';
+
+import * as XLSX from 'xlsx';
+
+import { saveAs } from 'file-saver';
+
+type AOA = Array<Array<any> >;
+
+function s2ab(s:string):ArrayBuffer {
+	const buf = new ArrayBuffer(s.length);
+	const view = new Uint8Array(buf);
+	for (let i = 0; i !== s.length; ++i) {
+		view[i] = s.charCodeAt(i) & 0xFF;
+	};
+	return buf;
+}
+
+@Component({
+	selector: 'sheetjs',
+	template: `
+	<input type="file" (change)="onFileChange($event)" multiple="false" />
+	<table class="sjs-table">
+		<tr *ngFor="let row of data">
+			<td *ngFor="let val of row">
+			{{val}}
+		</td>
+		</tr>
+	</table>
+	<button (click)="export()">Export!</button>
+	`
+})
+
+export class SheetJSComponent {
+	data:AOA = [[1,2],[3,4]];
+	wopts:XLSX.WritingOptions = { bookType:'xlsx', type:'binary' };
+	fileName:string = "SheetJS.xlsx";
+
+	public onFileChange(evt:any) {
+		const scope = this;
+		/* wire up file reader */
+		const target:DataTransfer = (<DataTransfer>(evt.target));
+		if(target.files.length != 1) throw new Error("Cannot upload multiple files on the entry");
+		const reader = new FileReader();
+		reader.onload = function (e:any) {
+			/* read workbook */
+			const bstr = e.target.result;
+			const wb = XLSX.read(bstr, {type:'binary'});
+
+			/* grab first sheet */
+			const wsname = wb.SheetNames[0];
+			const ws = wb.Sheets[wsname];
+
+			/* save data to scope */
+			scope.data = (<AOA>(XLSX.utils.sheet_to_json(ws, {header:1})));
+		};
+		reader.readAsBinaryString(target.files[0]);
+	}
+
+	export():void {
+		/* generate worksheet */
+		const ws = XLSX.utils.aoa_to_sheet(this.data);
+
+		/* generate workbook and add the worksheet */
+		const wb = XLSX.utils.book_new();
+		XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+
+		/* save to file */
+		const wbout = XLSX.write(wb, this.wopts);
+		console.log(this.fileName);
+		saveAs(new Blob([s2ab(wbout)]), this.fileName);
+	}
+}

demos/angular2/src/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- xlsx.js (C) 2013-present  SheetJS http://sheetjs.com -->
+<!-- vim: set ts=2: -->
+<html lang="en">
+<head>
+	<title>SheetJS + Angular 2+</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<pre>
+<b><a href="http://sheetjs.com">SheetJS + Angular 2+ demo</a></b>
+
+The core library can be used as-is in angular applications.
+The <a href="https://github.com/sheetjs/js-xlsx">Community Edition README</a> details some common use cases.
+We also have some <a href="http://sheetjs.com/demos/">more public demos</a>
+
+This demo shows `SheetJSComponent` which provides:
+- File input button with an event handler to parse the workbook
+- `data` property: array of arrays
+- Simple angular table which binds to the `data` property
+- `export` function that exports the `data` property to a new file.
+
+<a href="https://obamawhitehouse.archives.gov/sites/default/files/omb/budget/fy2014/assets/receipts.xls">Sample Spreadsheet</a>
+</pre>
+
+<app-root></app-root>
+</body>
+</html>

demos/angular2/src/main.ts

@@ -0,0 +1,3 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/angular2/src/polyfills.ts

@@ -0,0 +1,3 @@
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

demos/angular2/src/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  }
+}

demos/angular2/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  }
+}