angular 2 / angular 4 demo [ci skip]

This commit is contained in:
SheetJS 2017-06-21 19:10:36 -04:00
parent 20f22cf7f9
commit 56cf192615
16 changed files with 396 additions and 2 deletions

@ -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

@ -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/)

@ -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": {}
}
}

12
demos/angular2/Makefile Normal file

@ -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

68
demos/angular2/README.md Normal file

@ -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': '' // <--|
}
});
```

1
demos/angular2/node_modules/xlsx generated vendored Symbolic link

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

@ -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"
}
}

@ -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"
}
}

@ -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"
}
}

@ -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 { }

@ -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);
}
}

@ -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>

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

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

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

@ -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"
]
}
}