Wijmo Angular2入门：（二）介绍和资源

在阅读本文前，可以先了解Angular 2 快速入门和向应用程序添加对 Wijmo 5 的引用

说明

基于Angular 2 2.0.0 版本构建

Wijmo组件允许您在Angular 2 模板标记语言中使用 Wijmo 控件。针对 TypeScript 的类继承特性，Angular 2 版本的 Wijmo 组件 “扩展”自他们所表示的control类。这表示，当您获取了对某个 Angular 2 组件的引用时，该引用实际指向的实例是一个 Wijmo control，同时将包括其全部的属性，事件及方法，以及一个 Angular 2 组件。一个 Wijmo 组件扩展自 control 类，并添加了一些必要的功能，使其能够在 Angular 2 模板标记语言中使用。该组件完全支持单向和双向的数据绑定以及事件绑定机制。这种集成是无缝的，因为所有的使用者， Wijmo 控件， Wijmo Angular 2 组件以及 Angular 2 自身，都是通过 TypeScript 语言进行书写。

Wijmo Angular 2 组件在一个单独的 wijmo.angular2.js 文件中提供，该文件包含多个模块，同时我们还提供了多个 TypeScript 定义文件（.d.ts)，这些文件将为 TypeScript 编译器以及 Visual Studio（或者其他可能的IDE）的智能感知提供各个模块的API描述。

模块 wijmo/wijmo.angular2.core

文件 wijmo.angular2.js

包含 wijmo 模块的 Angular 2 组件。

wijmo.angular2.core 是一个外部的 TypeScript 模块，可以通过其环境模块名称导入到您的代码中。例如：

import * as wjCore from 'wijmo/wijmo.angular2.core';
 
@Component({
    directives: [wjCore.WjTooltip],
    template: '<span [wjTooltip]="'Greeting'">Hello</span>',
    selector: 'my-cmp',
})
export class MyCmp {
}

模块 wijmo/wijmo.angular2.input

文件 wijmo.angular2.js

包含 wijmo.input 模块的 Angular 2 组件。

wijmo.angular2.input 是一个外部的 TypeScript 模块，可以通过其环境模块名称导入到您的代码中。例如：

import * as wjInput from 'wijmo/wijmo.angular2.input';
 
@Component({
    directives: [wjInput.WjInputNumber],
    template: '<wj-input-number [(value)]="amount"></wj-input-number>',
    selector: 'my-cmp',
})
export class MyCmp {
    amount = 0;
}

模块 wijmo/wijmo.angular2.grid

文件 wijmo.angular2.js

包含 wijmo.grid 模块的 Angular 2 组件。

wijmo.angular2.grid 是一个外部的 TypeScript 模块，可以通过其环境模块名称导入到您的代码中。例如：

import * as wjGrid from 'wijmo/wijmo.angular2.grid';
 
@Component({
    directives: [wjGrid.WjFlexGrid],
    template: '<wj-flex-grid [itemsSource]="data"></wj-flex-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

模块 wijmo/wijmo.angular2.chart

文件 wijmo.angular2.js

包含 wijmo.chart 模块的 Angular 2 组件。

wijmo.angular2.chart 是一个外部的 TypeScript 模块，可以通过其环境模块名称导入到您的代码中。例如：

import * as wjChart from 'wijmo/wijmo.angular2.chart';
 
@Component({
    directives: [wjChart.WjFlexChart, wjChart.WjFlexChartSeries],
    template: `
      <wj-flex-chart [itemsSource]="data" [bindingX]="'x'">
          <wj-flex-chart-series [binding]="'y'"></wj-flex-chart-series>
      </wj-flex-chart>`,
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

模块 wijmo/wijmo.angular2.gauge

文件 wijmo.angular2.js

包含 wijmo.gauge 模块的 Angular 2 组件。

wijmo.angular2.gauge 是一个外部的 TypeScript 模块，可以通过其环境模块名称导入到您的代码中。例如：

import * as wjGauge from 'wijmo/wijmo.angular2.gauge';
 
@Component({
    directives: [wjGauge.WjLinearGauge],
    template: '<wj-linear-gauge [(value)]="amount" [isReadOnly]="false"></wj-linear-gauge>',
    selector: 'my-cmp',
})
export class MyCmp {
    amount = 0;
}

模块 wijmo/wijmo.angular2.olap

文件 wijmo.angular2.js

包含 wijmo.olap 模块的 Angular 2 组件。

wijmo.angular2.olap 是一个外部的 TypeScript 模块，可以通过其环境模块名称导入到您的代码中。例如：

import * as wjOlap from 'wijmo/wijmo.angular2.olap';
 
@Component({
    directives: [wjOlap.WjPivotGrid],
    template: '<wj-pivot-grid [itemsSource]="data"></wj-pivot-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

资源

打开 Angular 2 的中文网，来阅读它的快速起步。
Wijmo中文官网
下载wijmoenterprise包，并打开：
/wijmoenterprise/Samples/TS/Angular2/FlexGridIntro/FlexGridIntro
如果你没有nodejs 环境，请先安装nodejs 环境。
Wijmo Angular2的参考示例路径：\C1Wijmo-Eval_5.20163.234\Samples\JS\Angular2