Angular 2 Example With FancyGrid
Code and explanation below is for Angular RC4.
Here is link on working sample with Angular RC5+.
Working sample - FancyGrid with Angular 2 RC5+
Explanation below is for Angular RC4.
We are overbusy at the moment.
We will update this section as only get more time.
Here at FancyGrid we are big Angular fans.
We have built an Angular directive wrapped around our grid library: FancyGrid-AngularJS Directive.
We are also getting ready for Angular 2.
Link on working sample
You can skip below explanation and go to working sample - FancyGrid with Angular 2
Explanation
We start off by setting up a simple boilerplate which includes FancyGrid, Angular 2 and polyfills for browsers that are incompatible with some of Angular 2 dependencies.
index.html
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/http.min.js"></script>
<link href="https://cdn.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
}
});
System.import('app.ts')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
We include a number of dependencies inside of our HTML file.
The majority of these dependencies will not be needed for production code
if you intend on compiling and bundling the code. Going into each of these dependencies
in detail would be enough information for another article in itself so in short :
angular2-polyfills.js
Needed for zone.js and reflect-metadata
system.js
A module loader
typescript.js
A client-side version of the language TypeScript
Rx.js
Observables
angular2.min.js
Angular 2
http.min.js
The HTTP class
fancygrid.min.js
The FancyGrid library!
We utilize a library called SystemJS as a polyfill for the upcoming es6 require syntax.
This allows us to pull in files dynamically into our application, similar to how require works in Node.js.
The line System.import('app.ts') brings in our external file app.ts via ajax to be interpreted by the browser.
Let's look at that file now.
app.ts
import {bootstrap} from 'angular2/platform/browser';
import {Component, NgZone, AfterView, OnDestroy} from 'angular2/core'
class Grid {
constructor(config: Object) {
for(var p in config){
this[p] = config[p];
}
}
}
@Component({
selector : 'fancygrid',
inputs : ['grid'],
template : `<div id='{{grid.renderTo}}'></div>`
})
class fancygrid implements AfterView, OnDestroy {
constructor(private zone:NgZone) {
}
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
var myGrid = new FancyGrid(this.grid);
});
}
ngOnDestroy() {
FancyGrid.get(this.grid['renderTo']).destroy();
}
}
//Root Component
@Component({
selector: 'my-app',
directives: [fancygrid],
template: `