Wijmo Angular2入门:(一)引入Wijmo控件

发布时间:2017/02/24 00:02 发布者:alice

返回博客中心

Wijm5的Angular控件,包括表格、图表、输入类和仪表盘类,支持Angular2。

本文就来介绍如何在Angular2引入Wijmo控件。

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

在Angular 2 应用程序中使用 Wijmo 5

为了在 Angular 2 应用程序中使用 Wijmo 5 Angular,请按照如下步骤操作:

1.创建应用程序工程

在Visual Studio下:

在 NodeJS 下:

2.配置HTML

向 .html 文件的 <head> 区域内添加以下引用,这将为 Angular 2 应用程序创建托管根组件:

  • 添到 Angular 2 以及附属库的引用,如同在 the Angular 2 快速入门 手册中描述的那样。
  • 添加所需的 Wijmo 模块的引用,具体描述请参见 向应用程序添加对 Wijmo 5 的引用 主题。
  • 添加对包含 Angular 2 版本 Wijmo 模块的 wijmo.angular2.js 文件的引用。 如下所示:
    <script src="scripts/vendor/interop/angular2/wijmo.angular2.min.js" type="text/javascript"></script>
    该文件位于 Wijmo 下载包的 dist\interop\angular2 文件夹。 该文件夹包含了一些命名的 SystemJS 模块,比如说“wijmo/wijmo.angular2.input”,“wijmo/wijmo.angular2.grid”等等。 每一个模块包含了表示来自于相应的 Wijmo 类库模块(比方说 “wijmo.input” 以及 “wijmo.grid”)的控件的 Anular 2 组件。
    和 Wijmo 类库模块做一个比较,对于TypeScript 而言它是内部类型,而 Wijmo Angular 2 模块测试对外可访问的,可以通过 TypeScript 的 “import” 表达式使用。例如:
import * as wjGrid from 'wijmo/wijmo.angular2.grid';
整体的结构就像下面这样:
<!-- 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>
   
<!-- Wijmo controls and css -->
<script src="scripts/vendor/controls/wijmo.min.js"></script>
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script>
<link href="styles/wijmo.min.css" rel="stylesheet"/>
   
<!-- Wijmo Angular 2 components -->
<script src="scripts/vendor/interop/angular2/wijmo.angular2.min.js"></script>

3.通过 TypeScript 使用 Wijmo Angular 2 组件

    需要允许 TypeScript 编译器以及 Visual Studio 的智能感知(如果您使用后者),用来理解 Wijmo 模块的 API 声明,但它们无法在运行时使用的 .js 模块文件中获取。 针对此需求,Wijmo 模块提供了一组 TypeScript “定义” 文件(带有 .d.ts 扩展名的文件)。

    正如之前提到的,存在两种不同类型的模块,“内部”(Wijmo 控件)以及“外部”(Wijmo Angular 2 组件)模块。

    内部模块的定义文件应当简单地被包含在 Visual Studio 工程中,并设置该项目属性BuildAction=TypeScriptCompile。

    如果用其他编译器,可以按照该工程 tsconfig.json 文件中的设置,将这些 定义文件放置在任何 TypeScript 编译器命令行可见的文件夹中。

    外部可访问��� Wijmo Angular 2 模块需要一些额外的注意事项。 由于这些模块通过环境名称(形如“wijmo/wijmo.angular2.grid”)暴露,需要确保您的工程使用了“Node”模块解析算法,同时相关的定义文件(.d.ts 文件)放置在了合适的位置,以便 TypeScript 可以找到这些文件。

    以下步骤用来正确配置一个 .d.ts 文件。

    在 Visual Studio下:
    • 将 Wijmo 下载包 dist\contorls 文件夹下的全部 .d.ts 文件添加至您的 Visual Studio 工程,确保添加项目的 BuildAction 属性设置为 TypeScriptCompile,通常这一过程是自动完成的。 这些文件描述了包含 Wijmo 控件的内部模块的 API。
    • 将位于 Wijmo 下载包 dist\interop\angular2 文件夹下的全部的 .d.ts 文件复制到您工程根目录下的 node_modules\wijmo 子文件夹。 请注意,这些文件将不会包含在您的 Visual Studio 工程中。
    • 在 TypeScript 工程设置中指定工程模块系统为 CommonJS。 该设置意味着将自动地使用 Node 模块解析算法。

      注意:您可能使用了其他的模块系统。在这种情况下,您需要在 XML 编辑器中打开工程文件并添加以下修改模块解析的属性以修改 Node 解析算法: <TypeScriptModuleResolution>Node</TypeScriptModuleResolution>。 问题在于按照您使用的 TypeScript 版本的不同,您可能会遇到智能感知不工作的情形,如 这里的讨论。 或许您可以通过应用在这个讨论线程里提到的解决方法解决这个问题。 默认情况下,CommonJS 模块系统使用 Node 模块解析算法。

      在 Node 解析模式下,当 TypeScript 编译器在 TypeScript 的import声明中遇到了一个形如 “wijmo/wijmo.angular2.grid” 的环境模块名称, 它将搜索位于 node_modules/wijmo 文件夹下的 wijmo.angular2.grid.d.ts 定义文件。

    在 NodeJS 下:
    • 将位于 Wijmo 下载包 dist\controls 文件夹下全部的 .d.ts 文件拷贝到工程根目录下除了 node_modules 文件夹以外的任意位置。 这些文件描述了包含 Wijmo 控件内部模块的 API。

      应当确保在编译时 tsconfig.json 文件中的设置能够确保这些文件包含进来。通常可以使用 tsconfig 中的 “exclude” 选项进行设置,默认情况下 在编译时将排除 node_modules 文件夹。因此,不推荐将 Wijmo 的内部模块定义文件放置在这个文件夹下。 如果您更喜欢通过 “files” 选项显示地指定需要编辑的文件列表,那么需要将 Wijmo .d.ts 文件全部添加到选项列表。

    • 将位于 Wijmo 下载包 dist\interop\angular2 文件夹下全部的 .d.ts 文件拷贝到工程文件根目录下的 node_modules\wijmo 子文件夹。
    • 如果按照 Angular 2 快速入门手册中描述的过程设置应用程序,仅仅是需要确保 "moduleResolution": "node" 设置出现在 tsconfig.js 文件的 “compilerOptions” 部分。 在应用了该设置之后,当 TypeScript 编译器在 TypeScript 的import声明中遇到了一个形如 “wijmo/wijmo.angular2.grid” 的环境模块名称, 它将搜索位于 node_modules/wijmo 文件夹下的 wijmo.angular2.grid.d.ts 定义文件。
    完成以上设置之后,已经可以导入 Wijmo Angular 2 模块,并使用其包含的组件和伪指令。例如:
    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[];
    }

    本文就介绍了如何在Angualr2中使用Wijmo5,本文到此结束。

    更多资源:

    Wijmo中文官网:/developer/wijmojs

    Wijmo5产品文档:/developer/wijmojscore

    Wijmo5在线示例:/developer/wijmojscore

    如果依然有问题,可以到我们的官方产品论坛发帖咨询:

    Wijmo5问题响应通道:http://gcdn.grapecity.com.cn/forum.php?mod=forumdisplay&fid=173


    关于葡萄城

    赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

    了解详情,请访问葡萄城官网