angular 2 / angular 4 demo [ci skip]
This commit is contained in:
parent
20f22cf7f9
commit
56cf192615
7
Makefile
7
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
|
||||
|
|
|
|||
|
|
@ -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": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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': '' // <--|
|
||||
}
|
||||
});
|
||||
```
|
||||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue