<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grid2</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/angular-ui-grid@^4.0.4/ui-grid.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- polyfill for global context (window) with essential ES6 features -->
<script type="text/javascript" src="https://unpkg.com/core-js@^2.5.0/client/shim.js"></script>
<!-- polyfills for Angular itself -->
<script type="text/javascript" src="https://unpkg.com/zone.js@^0.8.16/dist/zone.js"></script>
<script type="text/javascript" src="https://unpkg.com/reflect-metadata@^0.1.10/Reflect.js"></script>
<!-- useful for debuging -->
<script type="text/javascript" src="https://unpkg.com/zone.js@^0.8.16/dist/long-stack-trace-zone.js"></script>
<!-- Web Animations API polyfill for most browsers (basically any browser other than Chrome and Firefox). -->
<script type="text/javascript" src="https://unpkg.com/web-animations-js@^2.3.1/web-animations.min.js"></script>
<!-- SystemJS loader itself and its configuration -->
<script type="text/javascript" src="https://unpkg.com/systemjs@^0.20.18/dist/system.src.js"></script>
<script type="text/javascript" src="systemjs.config.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
/* Styles go here */
import { AppModule } from './app/app.module';
import { initAngularjs } from "./app/anglarjs";
import { Router } from "@angular/router";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { UpgradeModule } from "@angular/upgrade/static";
// set the AngularJS lib and only then bootstrap AngularJS application
initAngularjs();
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['ng1Module']);
upgrade.ngZone.run(() => {
upgrade.injector.get(Router).initialNavigation();
});
});
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls\s*:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function(load){
if (load.source.indexOf('moduleId') != -1) return load;
var url = document.createElement('a');
url.href = load.address;
var basePathParts = url.pathname.split('/');
basePathParts.pop();
var basePath = basePathParts.join('/');
var baseHref = document.createElement('a');
baseHref.href = this.baseURL;
baseHref = baseHref.pathname;
if (!baseHref.startsWith('/base/')) { // it is not karma
basePath = basePath.replace(baseHref, '');
}
load.source = load.source
.replace(templateUrlRegex, function(match, quote, url){
var resolvedUrl = url;
if (url.startsWith('.')) {
resolvedUrl = basePath + url.substr(1);
}
return 'templateUrl: "' + resolvedUrl + '"';
})
.replace(stylesRegex, function(match, relativeUrls) {
var urls = [];
while ((match = stringRegex.exec(relativeUrls)) !== null) {
if (match[2].startsWith('.')) {
urls.push('"' + basePath + match[2].substr(1) + '"');
} else {
urls.push('"' + match[2] + '"');
}
}
return "styleUrls: [" + urls.join(', ') + "]";
});
return load;
};
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
const version = {
a1: "@1.6.6",
a2: "@^4.3.5",
uigrid: "@^4.0.4",
rxjs: "@^5.4.3",
typescript: "@^2.4.2",
ts: "@^7.1.0"
};
var paths = {
// 'npm:': '../node_modules',
'npm:': 'https://unpkg.com',
'angular2:': 'https://unpkg.com/@angular', // requiered for packages' mapping
};
// map tells the System loader where to look for things
var map = {
// the demo code is under the src/app folder
'app': 'app',
// AngularJS libraries
// 'angular': 'npm:/angular/angular.js',
'angular': 'npm:/angular' + version.a1,
'angular-ui-grid': 'npm:/angular-ui-grid' + version.uigrid,
// Angular 2 libraries
'@angular': 'angular2:',
// other libraries
'rxjs': 'npm:/rxjs' + version.rxjs,
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
'typescript': 'npm:/typescript' + version.typescript + '/lib',
'ts': 'npm:/plugin-typescript' + version.ts + '/lib'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
app: {
defaultExtension: 'ts',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
'angular': {
main: 'angular.js',
format: 'global'/*,
exports: 'angular'*/ // ne semble pas vraiment nécessaire
},
'angular-ui-grid': {
main: 'ui-grid.js',
format: 'global'
},
rxjs: { defaultExtension: 'js' },
ts: {
main: 'plugin.js'
},
typescript: {
main: 'typescript.js',
meta: {
'typescript.js': {
'exports': 'ts'
}
}
}
};
// @angular library list
var ngPackages = [
[ 'animations', 'browser' ],
'common',
'compiler',
'core',
'forms',
'http',
[ 'platform-browser', 'animations' ],
'platform-browser-dynamic',
'router',
[ 'upgrade', 'static' ],
];
// @angular libraries as umd bundles
function setNgUmdPackages(ngPackages) {
ngPackages.forEach( (ngp) => {
ngp = typeof ngp !== 'string' ? ngp : [ ngp ];
var name = ngp.shift();
var suffixes = ngp;
var tag = '@angular/' + name;
var path = 'bundles/' + name + '.umd.js';
map [ tag ] = 'angular2:/' + name + version.a2;
packages[ tag ] = {
'main': path,
'defaultExtension': 'js'
};
if (! suffixes || ! suffixes.length) return;
packages[ tag ].map = {};
suffixes.forEach( (suffix) => {
var key = './' + suffix;
var path = 'angular2:/' + name + version.a2 + '/bundles/' + name + '-' + suffix + '.umd.js';
packages[ tag ].map[ key ] = path;
});
});
}
setNgUmdPackages(ngPackages);
System.config({
warnings: true,
paths: paths,
map: map,
packages: packages,
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
}
});
global.bootstrapping = System
.import('./main.ts')
.then(
function handleResolve() {
console.info("System.js successfully bootstrapped app.");
},
function handleReject(error) {
console.warn("System.js could not bootstrap the app.");
console.error(error);
return (Promise.reject(error));
});
})(this);
{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2016",
"dom"
],
"outDir": "../out-tsc/app",
"target": "es5",
"module": "commonjs",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
<p>
about from dashboard works!
</p>
<hr/>
<form #form="ngForm" (submit)="logForm(form.value)">
<label>Firstname:</label>
<input type="text" name="firstname" required ngModel>
<label>Lastname:</label>
<input type="text" name="lastname" required ngModel>
<label>Street:</label>
<input type="text" name="street" ngModel>
<label>Zip:</label>
<input type="text" name="zip" ngModel>
<label>City:</label>
<input type="text" name="city" ngModel>
<button [disabled]="!form.valid" type="submit">Submit</button>
</form>
<app-shared></app-shared>
import { Component } from '@angular/core';
import { Http, Response } from "@angular/http";
import "rxjs/add/operator/map";
@Component({
selector: 'app-dashboard-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent {
myData = [];
constructor(public http: Http) {
this.http
.get('https://jsonplaceholder.typicode.com/users')
.map((response: Response) => response.json())
.subscribe((data) => {
this.myData = data;
});
}
logForm(value: any) {
console.log(value);
}
}
<p>
dashboard works!
</p>
<router-outlet></router-outlet>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { RouterModule } from "@angular/router";
import { AboutComponent } from "./about/about.component";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { SharedModule } from "../shared/shared.module";
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
SharedModule,
RouterModule.forChild([{
path: "", component: DashboardComponent,
children: [{
path: "about",
component: AboutComponent
}]
}])
],
declarations: [DashboardComponent, AboutComponent]
})
export class DashboardModule { }
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-shared',
templateUrl: './shared.component.html',
styleUrls: ['./shared.component.css']
})
export class SharedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<p>
shared works!
</p>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SharedComponent } from "./shared.component";
@NgModule({
imports: [
CommonModule
],
declarations: [
SharedComponent
],
exports: [
SharedComponent,
CommonModule,
FormsModule
]
})
export class SharedModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-route2',
template: `<h2>Route 2 </h2> <form #form="ngForm" (submit)="logForm(form.value)">
<label>Firstname:</label>
<input type="text" name="firstname" required ngModel>
<label>Lastname:</label>
<input type="text" name="lastname" required ngModel>
<label>Street:</label>
<input type="text" name="street" ngModel>
<label>Zip:</label>
<input type="text" name="zip" ngModel>
<label>City:</label>
<input type="text" name="city" ngModel>
<button [disabled]="!form.valid" type="submit">Submit</button>
</form>`,
})
export class Route2Component {
constructor() {}
logForm(value: any) {
console.log(value);
}
}
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-route1',
template: `<h2>Grid Route </h2> <app-grid></app-grid>
`,
})
export class Route1Component implements AfterViewInit {
constructor() {}
ngAfterViewInit() {}
}
import {
Directive, ElementRef, Injector, Input, OnInit, SimpleChanges, OnChanges, DoCheck,
OnDestroy, Output, EventEmitter
} from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
@Directive({selector: 'ui-grid'})
export class Ng1ComponentFacade extends UpgradeComponent implements OnInit, OnChanges, DoCheck,
OnDestroy {
@Input() data: {};
@Output() onUpdate: EventEmitter<{}>;
constructor(elementRef: ElementRef, injector: Injector) {
super('ui-grid', elementRef, injector);
}
ngOnInit() { super.ngOnInit(); }
ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); }
ngDoCheck() { super.ngDoCheck(); }
ngOnDestroy() { super.ngOnDestroy(); }
}
import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-grid',
template: `<ui-grid [data]="myData$ | async" (onUpdate)="onUpdate($event)"></ui-grid><pre>{{ data | json }}</pre>`,
})
export class GridComponent implements OnInit {
data: {};
myData$: Observable<Object[]>;
constructor(public http: Http) {}
ngOnInit() {
this.myData$ = this.http
.get('https://jsonplaceholder.typicode.com/users')
.map((response: Response) => response.json());
}
onUpdate(data: {}) {
this.data = data;
}
}
<p>
about works!
</p>
<hr/>
<app-grid2></app-grid2>
<form #form="ngForm" (submit)="logForm(form.value)">
<label>Firstname:</label>
<input type="text" name="firstname" required ngModel>
<label>Lastname:</label>
<input type="text" name="lastname" required ngModel>
<label>Street:</label>
<input type="text" name="street" ngModel>
<label>Zip:</label>
<input type="text" name="zip" ngModel>
<label>City:</label>
<input type="text" name="city" ngModel>
<button [disabled]="!form.valid" type="submit">Submit</button>
</form>
import { Component } from '@angular/core';
import { Http, Response } from "@angular/http";
import "rxjs/add/operator/map";
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent {
myData = [];
constructor(public http: Http) {
this.http
.get('https://jsonplaceholder.typicode.com/users')
.map((response: Response) => response.json())
.subscribe((data) => {
this.myData = data;
});
}
logForm(value: any) {
console.log(value);
}
}
import { Component } from '@angular/core';
import { Http, Response } from "@angular/http";
import "rxjs/add/operator/map";
@Component({
selector: 'app-grid2',
template: 'Draw new grid: <ng1 [data]="myData"></ng1>',
})
export class GridComponent {
myData = [];
constructor(public http: Http) {
this.http
.get("https://jsonplaceholder.typicode.com/users")
.map((response: Response) => response.json())
.subscribe((data) => {
this.myData = data;
});
}
}
import {
Directive, ElementRef, Injector, Input, OnInit, SimpleChanges, OnChanges, DoCheck,
OnDestroy
} from "@angular/core";
import { UpgradeComponent } from "@angular/upgrade/static";
@Directive({selector: 'ng1'})
export class Ng1TestComponentFacade extends UpgradeComponent implements OnInit, OnChanges, DoCheck,
OnDestroy {
@Input() data: {};
constructor(elementRef: ElementRef, injector: Injector) {
super('ng1', elementRef, injector);
}
ngOnInit() { super.ngOnInit(); }
ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); }
ngDoCheck() { super.ngDoCheck(); }
ngOnDestroy() { super.ngOnDestroy(); }
}
<p>
home works!
</p>
<a routerLink="about">About</a>
<br/><br/><br/><br/>
<router-outlet></router-outlet>
<app-shared></app-shared>
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { RouterModule } from "@angular/router";
import { AboutComponent } from "./about/about.component";
import { Ng1TestComponentFacade } from "./ng1/grid.directive";
import { GridComponent } from "./ng1/grid.component";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { SharedModule } from "../shared/shared.module";
@NgModule({
imports: [
CommonModule,
SharedModule,
ReactiveFormsModule,
FormsModule,
RouterModule.forChild([{
path: "",
component: HomeComponent,
children: [{
path: "about",
component: AboutComponent
}]
}])
],
declarations: [
HomeComponent,
AboutComponent,
GridComponent,
Ng1TestComponentFacade
],
bootstrap: [HomeComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class HomeModule {}
import * as angular from 'angular';
//import uiGrid from 'angular-ui-grid';
//import * as uiGrid from 'angular-ui-grid';
import { setAngularLib, downgradeComponent } from '@angular/upgrade/static';
import { AppComponent } from './app.component';
setAngularLib(angular);
//setAngularLib(uiGrid);
export function initAngularjs() {
const ng1Component: angular.IComponentOptions = {
bindings: {
data: '<',
onUpdate: '&'
},
transclude: true,
controller: ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
const ctrl = this;
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(nextWeek.getDate() + 7);
$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
if (col.filters[0].term) {
return 'header-filtered';
} else {
return '';
}
};
$scope.msg = {};
$scope.gridOptions = {
enableFiltering: true,
showGridFooter: true,
showColumnFooter: true,
enableSorting: true,
enableColumnResizing: true,
treeRowHeaderAlwaysVisible: true,
enableGridMenu: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, (rowEntity, colDef, newValue, oldValue) => {
$scope.msg.lastCellEdited = `edited row id: ${rowEntity.id} Column: ${colDef.name} newValue: ${newValue} oldValue: ${oldValue}`;
ctrl.onUpdate({
'rowId': rowEntity.id,
'column': colDef.name,
'new': newValue,
'old': oldValue
});
$scope.$apply();
});
}
};
$scope.toggleFiltering = function () {
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
};
function makeColDefs(row) {
const colDefs = [];
let exist = [];
for (let i = 0; i < row.length; i++) {
for (const colName in row[i]) {
if (exist.indexOf(colName) === -1) {
colDefs.push({
'field': colName,
'width': 200
});
exist.push(colName);
}
}
}
exist = undefined;
return colDefs;
}
this.$onChanges = function(obj: { data: { currentValue: Array<{}>}}) {
if (obj.data.currentValue && obj.data.currentValue.length) {
const colDefs = makeColDefs(obj.data.currentValue);
$scope.gridOptions.data = obj.data.currentValue;
$scope.gridOptions.columnDefs = colDefs;
}
};
this.$onInit = function() {}
}],
template: 'Hello, Angular 2 from angular 1! <div ui-grid="gridOptions" ui-grid-grouping ui-grid-edit ui-grid-selection class="grid" style="width:100%;"></div> {{msg.lastCellEdited}}'
};
const ng1Component2: angular.IComponentOptions = {
bindings: {
data: '<'
},
transclude: true,
controller: ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
const ctrl = this;
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(nextWeek.getDate() + 7);
$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
if (col.filters[0].term) {
return 'header-filtered';
} else {
return '';
}
};
$scope.gridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
$scope.toggleFiltering = function () {
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
};
function makeColDefs(row) {
const colDefs = [];
let exist = [];
for (let i = 0; i < row.length; i++) {
for (const colName in row[i]) {
if (exist.indexOf(colName) === -1) {
colDefs.push({
'field': colName,
'width': 200
});
exist.push(colName);
}
}
}
exist = undefined;
return colDefs;
}
this.$onChanges = function(obj: { data: { currentValue: Array<{}>}}) {
if (obj.data.currentValue.length) {
const colDefs = makeColDefs(obj.data.currentValue);
$scope.gridOptions.data = obj.data.currentValue;
$scope.gridOptions.columnDefs = colDefs;
}
};
this.$onInit = function() {}
}],
template: 'Hello, Angular 2 from angular 1! <div ui-grid="gridOptions" ui-grid-grouping ui-grid-edit ui-grid-selection class="grid" style="width:100%;"></div>'
};
return angular.module('ng1Module', [
'ui.grid',
'ui.grid.grouping',
'ui.grid.edit',
'ui.grid.selection'
])
.component('ui-grid', ng1Component)
.component('ng1', ng1Component2)
.directive('appRoot', downgradeComponent({ component: AppComponent }));
}
<h1>
{{title}}
</h1>
<ul>
<li><a routerLink="/">Home</a></li>
<li><a routerLink="route1">Grid</a></li>
<li><a routerLink="route2">Simple Route in AppModule</a></li>
</ul>
<router-outlet></router-outlet>
<app-shared></app-shared>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css']
})
export class AppComponent {
title = 'app works!';
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppComponent } from './app.component';
import { Ng1ComponentFacade } from './ng1/directive';
import { GridComponent } from './ng1/grid.component';
import { Route1Component } from './route1/route1.component';
import { Route2Component } from './route2/route2.component';
@NgModule({
declarations: [
AppComponent,
Route1Component,
GridComponent,
Route2Component,
Ng1ComponentFacade
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
UpgradeModule,
RouterModule.forRoot([
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: 'route1',
component: Route1Component
},
{
path: 'route2',
component: Route2Component
},
{ loadChildren: 'app/home/home.module#HomeModule', path: 'home' }
],
{
useHash: true,
initialNavigation: false
}),
],
entryComponents: [
AppComponent
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {
ngDoBootstrap(): void {}
}
import { RouterModule, Route } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { Route1Component } from './route1/route1.component';
import { Route2Component } from './route2/route2.component';
const routes: Route[] = [
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: 'route1',
component: Route1Component
},
{
path: 'route2',
component: Route2Component
},
{ loadChildren: 'app/home/home.module#HomeModule', path: 'home' },
{ loadChildren: 'app/dashboard/dashboard.module#DashboardModule', path: 'dashboard' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(
routes,
{
useHash: true
}
);
/* keep it */