Angular 2 sample added with systemjs module.
This commit is contained in:
Abinaya Subbiah
Родитель
c5df3fd2a5
Коммит
c8c1d0a8df
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules/
|
||||
/dist/
|
||||
/npm-debug.log
|
||||
/typings
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
## Angular 2 Syncfusion JavaScipt Components
|
||||
|
||||
Essential JavaScript provides support for Angular 2 Framework through wrappers. Each Syncfusion widgets are created as Angular 2 components with built in support for data binding and child directives to make complex property definition easier.
|
||||
|
||||
### ejAngular2-seed
|
||||
|
||||
A simple starter project to getting started with Angular 2 Syncfusion JavaScript components.
|
||||
|
||||
### Running the App
|
||||
|
||||
- Clone or fork this repository.
|
||||
- Make sure you have [node.js](https://nodejs.org/) installed version 5+.
|
||||
- Make sure you have NPM installed version 3+.
|
||||
- run `npm install` to install dependencies.
|
||||
- run `npm start` to fire up dev server.
|
||||
- open browser to [`http://localhost:3000`](http://localhost:3000)
|
||||
- if you want to use other port, create a `bs-config.json` in your project's folder with port option({"port": 8000}). Visit [https://github.com/johnpapa/lite-server](https://github.com/johnpapa/lite-server) to know more about lite-server configuration.
|
||||
|
||||
### Documentation
|
||||
|
||||
For complete documentation for getting started with Angular 2 Syncfusion Components, please visit [https://help.syncfusion.com/js/angular2](https://help.syncfusion.com/js/angular2)
|
||||
|
||||
### Demos
|
||||
|
||||
Find live demos for the Angular 2 Syncfusion Components [here.](http://ng2jq.syncfusion.com/)
|
||||
|
||||
### Support
|
||||
|
||||
In case of any questions regarding the use of Syncfusion JavaScript, please [contact us](http://www.syncfusion.com/support/#) by creating a support ticket.
|
||||
|
||||
### License Information
|
||||
|
||||
For licensing information about Syncfusion JavaScript, Download the Syncfusion License Agreements from [here](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf).
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.splash {
|
||||
text-align: center;
|
||||
margin: 10% 0 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.splash .message {
|
||||
font-size: 44px;
|
||||
line-height: 44px;
|
||||
font-family: Arial, sans-serif;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.splash .spinner {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
background: url('images/waitingpopup.gif') no-repeat center center #eee;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.9 KiB |
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<title>Essential JavaScript for Angular 2 | SystemJS seed</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" type="image/png" href="deps/images/favicon.ico">
|
||||
|
||||
<link href="node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css//bootstrap.min.css">
|
||||
<link rel="stylesheet" href="deps/default.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="node_modules/jsrender/jsrender.min.js"></script>
|
||||
<script src="node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script src="systemjs.config.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script>
|
||||
System.import('app')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<!-- 3. Display the application -->
|
||||
|
||||
<body>
|
||||
<ej-app>
|
||||
<div class="splash">
|
||||
<div class="message">Angular 2 Syncfusion Components App</div>
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</ej-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
{
|
||||
"name": "ejangular2-systemjs-starter",
|
||||
"version": "1.0.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/syncfusion/angular2-seeds.git"
|
||||
},
|
||||
"description": "A systemjs starter for Angular",
|
||||
"scripts": {
|
||||
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
|
||||
"lite": "lite-server",
|
||||
"postinstall": "typings install",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"typings": "typings"
|
||||
},
|
||||
"keywords": [
|
||||
"syncfusion",
|
||||
"ej",
|
||||
"essential",
|
||||
"javascript",
|
||||
"Angular 2",
|
||||
"angular2"
|
||||
],
|
||||
"author": "Syncfusion Inc",
|
||||
"license": "SEE LICENSE IN README.md",
|
||||
"bugs": {
|
||||
"url": "https://github.com/syncfusion/angular2-seeds/issues"
|
||||
},
|
||||
"homepage": "https://github.com/syncfusion/angular2-seeds#readme",
|
||||
"dependencies": {
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
"@angular/forms": "2.0.0",
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
"angular2-in-memory-web-api": "0.0.20",
|
||||
"bootstrap": "^3.3.6",
|
||||
"jquery": "^3.1.1",
|
||||
"jsrender": "^0.9.75",
|
||||
"syncfusion-javascript": "^14.3.49"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^2.0.0",
|
||||
"lite-server": "^2.1.0",
|
||||
"typescript": "^1.8.7",
|
||||
"typings": "^0.7.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<div style="padding-left:0px;" class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href="#" [routerLink]="['/']">Syncfusion Angular 2</a></li>
|
||||
<li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href="#home" [routerLink]="['/home']">Home
|
||||
</a></li>
|
||||
<li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href="#grid" [routerLink]="['/grid']">Grid
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ej-app',
|
||||
templateUrl: 'src/app.component.html',
|
||||
})
|
||||
export class AppComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { NgModule, enableProdMode, ErrorHandler } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
|
||||
import { EJ_GRID_COMPONENTS } from './ej/grid.component';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
|
||||
import { rootRouterConfig } from './app.routes';
|
||||
|
||||
enableProdMode();
|
||||
|
||||
class CustomErrorHandler implements ErrorHandler {
|
||||
call(error, stackTrace = null, reason = null) {
|
||||
console.log(error + "\n" + stackTrace);
|
||||
}
|
||||
handleError(error: any): void {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true })],
|
||||
declarations: [AppComponent, EJ_GRID_COMPONENTS, HomeComponent, GridComponent],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Routes } from '@angular/router';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
|
||||
export const rootRouterConfig: Routes = [
|
||||
{ path: '', redirectTo: 'home', pathMatch: 'full' },
|
||||
{ path: 'home', component: HomeComponent },
|
||||
{ path: 'grid', component: GridComponent }
|
||||
];
|
||||
|
|
@ -0,0 +1,418 @@
|
|||
import { Provider, forwardRef, ComponentFactory, ViewContainerRef, ContentChildren,
|
||||
ViewEncapsulation, EventEmitter, QueryList, Type, ContentChild,
|
||||
Component, enableProdMode, Directive, ElementRef, Input, OnInit, SimpleChange, DoCheck,
|
||||
ChangeDetectionStrategy, ChangeDetectorRef} from '@angular/core';
|
||||
|
||||
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
|
||||
|
||||
export {ContentChild, Type, forwardRef} from '@angular/core';
|
||||
|
||||
export interface IParentTag {
|
||||
tags: Array<any>;
|
||||
}
|
||||
|
||||
export interface IChildChange {
|
||||
index: number;
|
||||
change: any;
|
||||
}
|
||||
|
||||
export interface IChangeSet {
|
||||
[key: string]: Array<IChildChange>
|
||||
}
|
||||
|
||||
var firstVal = {};
|
||||
|
||||
/** Internal Helpers */
|
||||
export class Utils {
|
||||
static IterateAndGetChanges(obj: IParentTag): IChangeSet {
|
||||
if (ej.isNullOrUndefined(obj.tags) || obj.tags.length === 0)
|
||||
return null;
|
||||
var changes: Array<IChildChange>, res: IChangeSet = {};
|
||||
for (var i = 0, tags = obj.tags; i < tags.length; i++) {
|
||||
var tag = tags[i], tagElement = obj["_" + tag.replace(/\./g, '_')];
|
||||
if (!ej.isNullOrUndefined(tagElement) && tagElement.hasChanges) {
|
||||
res[tag] = tagElement.getChangesAndReset();
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
static AngularizeInputs(inputs: Array<string>, twoways: Array<string>): Array<string> {
|
||||
for (var i = 0, len = inputs.length; i < len; i++) {
|
||||
var element = inputs[i];
|
||||
inputs[i] = "model." + element + ": " + element;
|
||||
}
|
||||
for (var i = 0; i < twoways.length; i++) {
|
||||
var element = twoways[i];
|
||||
element = "model." + element + "_two:" + element;
|
||||
inputs.push(element);
|
||||
}
|
||||
return inputs;
|
||||
}
|
||||
}
|
||||
|
||||
export class EJComponents<W, T> implements IParentTag {
|
||||
public tags: Array<any>;
|
||||
public model: T = <T>{};
|
||||
public widget: W;
|
||||
protected outputs: Array<string>;
|
||||
protected twoways: Array<string>;
|
||||
protected __shadow: DocumentFragment;
|
||||
protected complexProperties: Array<string>;
|
||||
|
||||
private _firstCheck: boolean = true;
|
||||
|
||||
constructor(protected name: string, protected el: ElementRef, protected cdRef: ChangeDetectorRef) {
|
||||
// this.__shadow = this.dom.getShadowRoot(this.el.nativeElement);
|
||||
this.createEvents(this.outputs);
|
||||
this.createTwoways(this.twoways);
|
||||
}
|
||||
|
||||
protected createEvents(events: Array<string>) {
|
||||
var model = this.model, self = this;
|
||||
if (events && events.length) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var event = events[i];
|
||||
if (event.startsWith("model."))
|
||||
continue;
|
||||
self[event] = new EventEmitter(false);
|
||||
}
|
||||
}
|
||||
|
||||
var complex = this.complexProperties;
|
||||
if (complex && complex.length) {
|
||||
for (var i = 0; i < complex.length; i++) {
|
||||
var element = complex[i];
|
||||
ej.createObject(element, {}, model);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected createTwoways(twoways: Array<string>) {
|
||||
if (!twoways) return;
|
||||
var model = this.model;
|
||||
for (var i = 0; i < twoways.length; i++) {
|
||||
var element = twoways[i];
|
||||
if (element.indexOf(":") !== -1) {
|
||||
element = element.replace(/:.+/g, "");
|
||||
}
|
||||
ej.createObject(element + "Change", new EventEmitter(), model);
|
||||
ej.createObject(element, this.addTwoways(element), model);
|
||||
}
|
||||
}
|
||||
|
||||
protected addTwoways(prop): Function {
|
||||
var self = this, model = this.model, value = firstVal;//, originalProp = prop.replace(/-/g, ".");
|
||||
return function(newVal, isApp: boolean) {
|
||||
if (value === firstVal) {
|
||||
value = ej.getObject(prop + "_two", model);
|
||||
if (value === undefined)
|
||||
value = ej.getObject(prop, this === undefined || this.defaults === undefined ? {}: this.defaults);
|
||||
}
|
||||
if (newVal === undefined) {
|
||||
return value;
|
||||
}
|
||||
if (value === newVal) return;
|
||||
value = newVal;
|
||||
if (!isApp) {
|
||||
ej.createObject(prop + "_two", newVal, model);
|
||||
ej.getObject<EventEmitter<any>>(prop + "Change", model).emit(newVal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this._firstCheck = false;
|
||||
|
||||
for (var i = 0; i < this.tags.length; i++) {
|
||||
var element = this.tags[i], item = this["_" + element.replace(/\./g, '_')];
|
||||
if (!ej.isNullOrUndefined(item))
|
||||
ej.createObject(element, item.getList(), this.model);
|
||||
}
|
||||
|
||||
var model = this.model, self = this, events = this.outputs;
|
||||
if (events) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var event = events[i];
|
||||
EJComponents.bindAndRaiseEvent(this, model, event);
|
||||
}
|
||||
}
|
||||
this.widget = $(this.el.nativeElement)["ej" + this.name](this.model)["ej" + this.name]("instance");
|
||||
}
|
||||
|
||||
private static bindAndRaiseEvent(instance, model, event) {
|
||||
if (!event.startsWith("model.")) {// && instance[event]["observers"].length > 1) {
|
||||
model[event] = function(params) {
|
||||
instance[event]["emit"](params);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: { [key: string]: SimpleChange }) {
|
||||
if (this._firstCheck)
|
||||
return;
|
||||
var ngChanges = {};
|
||||
for (let key in changes) {
|
||||
let element = changes[key];
|
||||
if (element.previousValue === element.currentValue)
|
||||
break;
|
||||
key = key.replace("model.", "");
|
||||
if (key.endsWith("_two")) {
|
||||
let oKey = key.replace("_two", ""), valFn = ej.getObject<Function>(oKey, this.widget["model"]);
|
||||
valFn(element.currentValue, true);
|
||||
ej.createObject(oKey, valFn, ngChanges);
|
||||
}
|
||||
ej.createObject(key, element.currentValue, ngChanges);
|
||||
}
|
||||
|
||||
this.widget["setModel"](ngChanges, $.isPlainObject(ngChanges));
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
/// TODO: ChangeDetection Third/Multi level
|
||||
var changes: IChangeSet = Utils.IterateAndGetChanges(this);
|
||||
for (var key in changes) {
|
||||
if (changes.hasOwnProperty(key)) {
|
||||
var element = changes[key];
|
||||
this.widget["_" + key](element);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(){
|
||||
this.widget['destroy']();
|
||||
}
|
||||
}
|
||||
|
||||
export class ComplexTagElement {
|
||||
recentChanges: any;
|
||||
hasChanges: boolean = false;
|
||||
__firstChange: boolean = true;
|
||||
__index: number;
|
||||
__valueChange: EventEmitter<any> = new EventEmitter();
|
||||
protected complexProperties: Array<string>;
|
||||
property: string;
|
||||
__parent: EJComponents<any, any>
|
||||
|
||||
tags: Array<string>;
|
||||
|
||||
constructor() {
|
||||
var complexes = this.complexProperties;
|
||||
for (var i = 0; complexes !== undefined && i < complexes.length; i++) {
|
||||
var element = complexes[i];
|
||||
ej.createObject(element, {}, this);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.__firstChange = false;
|
||||
}
|
||||
|
||||
ensureCleanObject(){
|
||||
var tags = this.tags;
|
||||
for (var i = 0; i < tags.length; i++) {
|
||||
var element = tags[i], tagElement = this["_"+element.replace(/\./g, '_')];
|
||||
|
||||
if(i === 0 && this[element]) return;
|
||||
if(ej.isNullOrUndefined(tagElement)) continue;
|
||||
|
||||
ej.createObject(element, tagElement.getList(), this);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: { [key: string]: SimpleChange }) {
|
||||
if (this.__firstChange)
|
||||
return;
|
||||
this.recentChanges = changes;
|
||||
this.hasChanges = true;
|
||||
}
|
||||
|
||||
getChangesAndReset() {
|
||||
if (this.hasChanges === false)
|
||||
return;
|
||||
|
||||
var changes = this.recentChanges || {};
|
||||
|
||||
for (let key in changes) {
|
||||
if (changes.hasOwnProperty(key)) {
|
||||
changes[key] = changes[key].currentValue;
|
||||
}
|
||||
}
|
||||
|
||||
var contentChanges = Utils.IterateAndGetChanges(this)
|
||||
if (!$.isEmptyObject(contentChanges)) {
|
||||
for (let key in contentChanges) {
|
||||
if (contentChanges.hasOwnProperty(key)) {
|
||||
var element = contentChanges[key];
|
||||
//this.el.nativeElement.
|
||||
this.__parent.widget["_" + this.property.replace(/\./g, '_') + "_" + key](element);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.hasChanges = false;
|
||||
|
||||
return changes;
|
||||
}
|
||||
|
||||
ngAfterContentChecked(){
|
||||
var tags = this.tags;
|
||||
for (var i = 0, len = tags.length; i < len; i++) {
|
||||
var element = tags[i], tagElement = this["_" + element.replace(/\./g, '_')];
|
||||
if(tagElement && tagElement.hasChanges)
|
||||
this.hasChanges = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class ArrayTagElement<T extends ComplexTagElement> {
|
||||
list: Array<T>;
|
||||
children: QueryList<T>;
|
||||
recentChanges: Array<IChildChange>;
|
||||
hasChanges: boolean = false;
|
||||
|
||||
constructor(public propertyName: string) {
|
||||
}
|
||||
|
||||
// TODO: Need to consider dynamic child change
|
||||
ngAfterContentInit() {
|
||||
var index = 0;
|
||||
this.list = this.children.map((child) => {
|
||||
child.__index = index++;
|
||||
child.property = this.propertyName;
|
||||
return child;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnChanges(changes) {
|
||||
}
|
||||
|
||||
getList(){
|
||||
var list = this.list;
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
list[i].ensureCleanObject();
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
getChangesAndReset(): Array<IChildChange> {
|
||||
this.hasChanges = false;
|
||||
return this.recentChanges;
|
||||
}
|
||||
|
||||
ngAfterContentChecked():void {
|
||||
var changes = {}, res: Array<IChildChange> = changes[this.propertyName] = [], childChange;
|
||||
|
||||
for (var i = 0, list = this.list; i < list.length; i++) {
|
||||
var child = list[i];
|
||||
if (child.hasChanges) {
|
||||
childChange = child.getChangesAndReset();
|
||||
if (!ej.isNullOrUndefined(childChange)) {
|
||||
res.push(<IChildChange>{
|
||||
index: child.__index,
|
||||
change: childChange
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (res.length > 0) {
|
||||
this.recentChanges = res;
|
||||
this.hasChanges = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function CreateComplexDirective(args:{
|
||||
selector: string,
|
||||
inputs: Array<string>,
|
||||
outputs? :Array<string>,
|
||||
queries ?: { [key:string]: any }
|
||||
}, ejArgs): Type<any> {
|
||||
return Directive(args).Class({
|
||||
extends: ComplexTagElement,
|
||||
constructor: [ejArgs.type, function (widget: EJComponents<any, any>) {
|
||||
this.tags = ejArgs.tags;
|
||||
this.complexProperties = ejArgs.complexes;
|
||||
this.__parent = widget;
|
||||
ComplexTagElement.call(this);
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
||||
export function CreateArrayTagDirective(property: string, selector: string, type): Type<any> {
|
||||
return Directive({
|
||||
selector: selector,
|
||||
queries: {
|
||||
children: new ContentChildren(type)
|
||||
}
|
||||
}).Class({
|
||||
extends: ArrayTagElement,
|
||||
constructor:function () {
|
||||
ArrayTagElement.call(this, property);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function CreateComponent(name:string, componentArgs: {
|
||||
selector: string,
|
||||
inputs: Array<string>,
|
||||
outputs: Array<string>,
|
||||
template: string,
|
||||
changeDetection?: any,
|
||||
queries: {
|
||||
[key:string]: any
|
||||
}
|
||||
}, ejArgs): Type<any> {
|
||||
componentArgs.changeDetection = ChangeDetectionStrategy.OnPush;
|
||||
|
||||
var comp = Component(componentArgs);
|
||||
return comp.Class({
|
||||
extends: EJComponents,
|
||||
constructor: [ElementRef, ChangeDetectorRef, function (el: ElementRef, cdRef: ChangeDetectorRef) {
|
||||
this.tags = ejArgs.tags;
|
||||
this.outputs = componentArgs.outputs;
|
||||
this.twoways = ejArgs.twoways;
|
||||
this.complexProperties = ejArgs.complexes;
|
||||
EJComponents.call(this, name, el, cdRef);
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
||||
export function CreateControlValueAccessor(selector: string, component: Type<any>): Type<any> {
|
||||
var EJDefaultValueAccessor;
|
||||
var constAccessor ={ provide : NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => EJDefaultValueAccessor), multi: true
|
||||
};
|
||||
|
||||
var valDirective = Directive({selector: selector,
|
||||
host: { '(change)': 'onChange($event.value)', '(focusOut)': 'onTouched()' },
|
||||
providers: [constAccessor]
|
||||
})
|
||||
|
||||
EJDefaultValueAccessor = valDirective.Class({
|
||||
constructor: [component, function (host) {
|
||||
this.host = host;
|
||||
}],
|
||||
onChange : (_) => { },
|
||||
onTouched : () => { },
|
||||
|
||||
writeValue(value: any): void {
|
||||
if(this.host.widget)
|
||||
this.host.widget.option("model.value", value);
|
||||
else
|
||||
this.host.model.value = value;
|
||||
},
|
||||
|
||||
registerOnChange(fn: (_: any) => void): void {
|
||||
this.onChange =fn;
|
||||
},
|
||||
|
||||
registerOnTouched(fn: () => void): void {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
})
|
||||
|
||||
return EJDefaultValueAccessor;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
import {CreateArrayTagDirective, CreateControlValueAccessor, CreateComplexDirective, CreateComponent, Utils, ContentChild, Type, forwardRef } from './core';
|
||||
export var CommandDirective = CreateComplexDirective({
|
||||
selector: "e-commands>e-command",
|
||||
inputs: ["buttonOptions", "type"],
|
||||
queries: {
|
||||
}
|
||||
}, {
|
||||
tags: [ ],
|
||||
type: forwardRef(() => GridComponent)
|
||||
});
|
||||
|
||||
|
||||
export var CommandsDirective = CreateArrayTagDirective("commands", 'e-columns>e-commands', CommandDirective);
|
||||
|
||||
export var ColumnDirective = CreateComplexDirective({
|
||||
selector: "e-columns>e-column",
|
||||
inputs: ["clipMode", "allowEditing", "allowFiltering", "allowGrouping", "allowSorting", "allowResizing", "commands", "cssClass", "customAttributes", "dataSource", "defaultValue", "disableHtmlEncode", "displayAsCheckBox", "editParams", "editTemplate", "editType", "field", "foreignKeyField", "foreignKeyValue", "format", "headerTemplateID", "headerText", "headerTextAlign", "isFrozen", "isIdentity", "isPrimaryKey", "priority", "showInColumnChooser", "template", "textAlign", "tooltip", "type", "validationRules", "visible", "width"],
|
||||
queries: {
|
||||
_commands : new ContentChild(CommandsDirective),
|
||||
}
|
||||
}, {
|
||||
tags: ["commands" ],
|
||||
type: forwardRef(() => GridComponent)
|
||||
});
|
||||
|
||||
|
||||
export var ColumnsDirective = CreateArrayTagDirective("columns", 'ej-grid>e-columns', ColumnDirective);
|
||||
|
||||
export var SummaryColumnDirective = CreateComplexDirective({
|
||||
selector: "e-summarycolumns>e-summarycolumn",
|
||||
inputs: ["customSummaryValue", "dataMember", "displayColumn", "format", "prefix", "suffix", "summaryType", "template"],
|
||||
queries: {
|
||||
}
|
||||
}, {
|
||||
tags: [ ],
|
||||
type: forwardRef(() => GridComponent)
|
||||
});
|
||||
|
||||
|
||||
export var SummaryColumnsDirective = CreateArrayTagDirective("summaryColumns", 'e-summaryrows>e-summarycolumns', SummaryColumnDirective);
|
||||
|
||||
export var SummaryRowDirective = CreateComplexDirective({
|
||||
selector: "e-summaryrows>e-summaryrow",
|
||||
inputs: ["showCaptionSummary", "showGroupSummary", "showTotalSummary", "summaryColumns", "title", "titleColumn"],
|
||||
queries: {
|
||||
_summaryColumns : new ContentChild(SummaryColumnsDirective),
|
||||
}
|
||||
}, {
|
||||
tags: ["summaryColumns" ],
|
||||
type: forwardRef(() => GridComponent)
|
||||
});
|
||||
|
||||
|
||||
export var SummaryRowsDirective = CreateArrayTagDirective("summaryRows", 'ej-grid>e-summaryrows', SummaryRowDirective);
|
||||
|
||||
export var StackedHeaderColumnDirective = CreateComplexDirective({
|
||||
selector: "e-stackedheadercolumns>e-stackedheadercolumn",
|
||||
inputs: ["column", "cssClass", "headerText", "textAlign"],
|
||||
queries: {
|
||||
}
|
||||
}, {
|
||||
tags: [ ],
|
||||
type: forwardRef(() => GridComponent)
|
||||
});
|
||||
|
||||
|
||||
export var StackedHeaderColumnsDirective = CreateArrayTagDirective("stackedHeaderColumns", 'e-stackedheaderrows>e-stackedheadercolumns', StackedHeaderColumnDirective);
|
||||
|
||||
export var StackedHeaderRowDirective = CreateComplexDirective({
|
||||
selector: "e-stackedheaderrows>e-stackedheaderrow",
|
||||
inputs: ["stackedHeaderColumns"],
|
||||
queries: {
|
||||
_stackedHeaderColumns : new ContentChild(StackedHeaderColumnsDirective),
|
||||
}
|
||||
}, {
|
||||
tags: ["stackedHeaderColumns" ],
|
||||
type: forwardRef(() => GridComponent)
|
||||
});
|
||||
|
||||
|
||||
export var StackedHeaderRowsDirective = CreateArrayTagDirective("stackedHeaderRows", 'ej-grid>e-stackedheaderrows', StackedHeaderRowDirective);
|
||||
|
||||
|
||||
var Outputs = [ "actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchDelete", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beginEdit", "cellEdit", "cellSave", "cellSelected", "cellSelecting", "columnDrag", "columnDragStart", "columnDrop", "rowDrag", "rowDragStart", "rowDrop", "columnSelected", "columnSelecting", "contextClick", "contextOpen", "create", "dataBound", "destroy", "detailsCollapse", "detailsDataBound", "detailsExpand", "endAdd", "endDelete", "endEdit", "load", "mergeCellInfo", "queryCellInfo", "recordClick", "recordDoubleClick", "resized", "resizeEnd", "resizeStart", "rightClick", "rowDataBound", "rowSelected", "rowSelecting", "templateRefresh", "toolBarClick" , "model.dataSourceChange: dataSourceChange", "model.pageSettings.currentPageChange: pageSettings.currentPageChange"];
|
||||
var ComplexProperties = [ "contextMenuSettings", "editSettings", "filterSettings", "groupSettings", "pageSettings", "resizeSettings", "rowDropSettings", "searchSettings", "selectionSettings", "scrollSettings", "sortSettings", "textWrapSettings", "toolbarSettings" ];
|
||||
var Inputs = Utils.AngularizeInputs( [ "allowCellMerging", "allowGrouping", "allowKeyboardNavigation", "allowFiltering", "allowSorting", "allowMultiSorting", "allowPaging", "allowReordering", "allowResizeToFit", "allowResizing", "allowRowDragAndDrop", "allowScrolling", "allowSearching", "allowSelection", "allowTextWrap", "allowMultipleExporting", "commonWidth", "gridLines", "childGrid", "columnLayout", "contextMenuSettings", "cssClass", "detailsTemplate", "editSettings", "enableAltRow", "enableAutoSaveOnSelectionChange", "enableHeaderHover", "enablePersistence", "enableResponsiveRow", "enableRowHover", "enableRTL", "enableTouch", "filterSettings", "groupSettings", "isResponsive", "keySettings", "locale", "minWidth", "pageSettings", "query", "resizeSettings", "rowTemplate", "rowDropSettings", "searchSettings", "selectedRecords", "selectedRowIndex", "selectionSettings", "selectionType", "scrollSettings", "showColumnChooser", "showStackedHeader", "showSummary", "sortSettings", "textWrapSettings", "toolbarSettings", "contextMenuSettings.contextMenuItems", "contextMenuSettings.customContextMenuItems", "contextMenuSettings.enableContextMenu", "contextMenuSettings.disableDefaultItems", "editSettings.allowAdding", "editSettings.allowDeleting", "editSettings.allowEditing", "editSettings.allowEditOnDblClick", "editSettings.dialogEditorTemplateID", "editSettings.editMode", "editSettings.externalFormTemplateID", "editSettings.formPosition", "editSettings.inlineFormTemplateID", "editSettings.rowPosition", "editSettings.showConfirmDialog", "editSettings.showDeleteConfirmDialog", "editSettings.titleColumn", "editSettings.showAddNewRow", "filterSettings.enableCaseSensitivity", "filterSettings.filterBarMode", "filterSettings.filterType", "filterSettings.maxFilterChoices", "filterSettings.showFilterBarMessage", "filterSettings.showPredicate", "groupSettings.captionFormat", "groupSettings.enableDropAreaAutoSizing", "groupSettings.groupedColumns", "groupSettings.showDropArea", "groupSettings.showGroupedColumn", "groupSettings.showToggleButton", "groupSettings.showUngroupButton", "pageSettings.enableQueryString", "pageSettings.enableTemplates", "pageSettings.pageCount", "pageSettings.pageSize", "pageSettings.showDefaults", "pageSettings.template", "pageSettings.totalPages", "pageSettings.totalRecordsCount", "pageSettings.printMode", "resizeSettings.resizeMode", "rowDropSettings.dropTargetID", "rowDropSettings.dragMapper", "rowDropSettings.dropMapper", "searchSettings.fields", "searchSettings.key", "searchSettings.operator", "searchSettings.ignoreCase", "selectionSettings.enableToggle", "selectionSettings.selectionMode", "scrollSettings.allowVirtualScrolling", "scrollSettings.enableTouchScroll", "scrollSettings.frozenColumns", "scrollSettings.frozenRows", "scrollSettings.height", "scrollSettings.virtualScrollMode", "scrollSettings.enableVirtualization", "scrollSettings.width", "scrollSettings.scrollOneStepBy", "textWrapSettings.wrapMode", "toolbarSettings.customToolbarItems", "toolbarSettings.showToolbar", "toolbarSettings.toolbarItems", "columns", "stackedHeaderRows", "summaryRows", "contextMenuSettings.subContextMenu", "filterSettings.filteredColumns", "sortSettings.sortedColumns" ],["dataSource", "pageSettings.currentPage" ]);
|
||||
export var GridComponent = CreateComponent("Grid", {
|
||||
selector: 'ej-grid',
|
||||
inputs : Inputs,
|
||||
outputs : Outputs,
|
||||
template:"",
|
||||
queries: {
|
||||
_columns : new ContentChild(ColumnsDirective),
|
||||
_summaryRows : new ContentChild(SummaryRowsDirective),
|
||||
_stackedHeaderRows : new ContentChild(StackedHeaderRowsDirective),
|
||||
}
|
||||
},{
|
||||
tags : ["columns", "summaryRows", "stackedHeaderRows"],
|
||||
twoways : ["dataSource", "pageSettings.currentPage" ],
|
||||
complexes : ComplexProperties,
|
||||
});
|
||||
|
||||
export const EJ_GRID_COMPONENTS: Type<any>[] = [GridComponent , CommandsDirective, ColumnsDirective, SummaryColumnsDirective, SummaryRowsDirective, StackedHeaderColumnsDirective, StackedHeaderRowsDirective, CommandDirective, ColumnDirective, SummaryColumnDirective, SummaryRowDirective, StackedHeaderColumnDirective, StackedHeaderRowDirective]
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData">
|
||||
<e-columns>
|
||||
<e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column>
|
||||
<e-column field="CustomerID" headerText="Customer ID" width="80"></e-column>
|
||||
<e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>
|
||||
<e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column>
|
||||
<e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>
|
||||
</e-columns>
|
||||
</ej-grid>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ej-app',
|
||||
templateUrl: 'src/grid/grid.component.html',
|
||||
})
|
||||
export class GridComponent {
|
||||
public gridData: any;
|
||||
constructor() {
|
||||
this.gridData = [{
|
||||
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,
|
||||
OrderDate: new Date(8364186e5), Freight: 32.38
|
||||
},
|
||||
{
|
||||
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,
|
||||
OrderDate: new Date(836505e6), Freight: 11.61
|
||||
},
|
||||
{
|
||||
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,
|
||||
OrderDate: new Date(8367642e5), Freight: 65.83
|
||||
},
|
||||
{
|
||||
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,
|
||||
OrderDate: new Date(8367642e5), Freight: 41.34
|
||||
},
|
||||
{
|
||||
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4,
|
||||
OrderDate: new Date(8368506e5), Freight: 51.3
|
||||
}];
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<br/>
|
||||
<p style="padding-left:20px;">Essential JavaScript provides support for Angular 2 Framework through wrappers.
|
||||
Each Syncfusion widgets are created as Angular 2 components with built in support for
|
||||
data binding and child directives to make complex property definition easier.</p>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ej-app',
|
||||
templateUrl: 'src/home/home.component.html',
|
||||
})
|
||||
export class HomeComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* System configuration for Angular 2 samples
|
||||
* Adjust as necessary for your application needs.
|
||||
*/
|
||||
(function (global) {
|
||||
System.config({
|
||||
paths: {
|
||||
// paths serve as alias
|
||||
'npm:': 'node_modules/'
|
||||
},
|
||||
// map tells the System loader where to look for things
|
||||
map: {
|
||||
// our app is within the app folder
|
||||
app: 'src',
|
||||
// angular bundles
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
// other libraries
|
||||
'rxjs': 'npm:rxjs',
|
||||
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
app: {
|
||||
main: './main.js',
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
rxjs: {
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
'angular2-in-memory-web-api': {
|
||||
main: './index.js',
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
})(this);
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "system",
|
||||
"moduleResolution": "node",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"removeComments": false,
|
||||
"noImplicitAny": false
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"deps"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"globalDependencies": {
|
||||
"ej.web.all": "registry:dt/ej.web.all#0.0.0+20160930121912",
|
||||
"es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
|
||||
"jquery": "registry:dt/jquery#1.10.0+20160929162922",
|
||||
"node": "registry:dt/node#6.0.0+20160928143418"
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче