整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「开发实战」如何在Angular2中引入Wijmo控件?

ijmo是一款使用TypeScript编写的新一代JavaScript/HTML5控件集。它秉承触控优先的设计理念,在全球率先支持AngularJS,并提供性能卓越、零依赖的FlexGrid和图表等多个控件。

目前,很多开发者都在使用Angular2进行项目开发,小编近期也将陆续推出在Angular2中使用Wijmo的系列文章,帮助大家更好学习并在项目中使用Wijmo。

本文首先介绍如何在Angular2中引入Wijmo控件。

Wijmo5的Angular控件,包括表格、图表、输入类和仪表盘类,支持Angular2。Wijmo Angular 2 组件在一个单独的 wijmo.angular2.js 文件中提供,该文件包含多个模块,同时还提供了多个 TypeScript 定义文件(.d.ts),这些文件将为 TypeScript 编译器以及 Visual Studio(或者其他可能的IDE)的智能感知提供各个模块的API描述。

在Angular2应用程序中使用Wijmo5

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

1. 创建应用程序工程

在Visual Studio下:

  • 如果使用的是 Visual Studio 2015 版本,请确保已经安装 Update 3 更新。

  • 如果使用的是 Visual Studio 2013 版本,请确保已经安装扩展:Package 智能感知和最新的 TypeScript 版本。

  • 使用 “带 TypeScript 的 HTML 应用程序” 工程模板创建一个新的 Visual Studio 工程。

  • 向工程的根目录添加一个 package.json 文件,并参见 Angular 2 快速入门 手册向其中添加内容。 一旦保存了更新后的 package.json 文件,Visual Studio 将会自动地向工程安装 Angular 2 以及附属的其他库文件至 node_modules 子文件夹。

在 NodeJS 下:

  • 按照 Angular 2 快速入门 手册的指示设置工程即可。

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';

    整体的结构就像下面这样:

    3. 通过TypeScript使用Wijmo Angular2组件

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

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

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

    BuildAction=TypeScriptCompile。

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

    外部可访问的Wijmo Angular2模块需要一些额外的注意事项。 由于这些模块通过环境名称(形如“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 模块,并使用其包含的组件和伪指令。例如:

    以上就是Angular2应用程序中使用Wijmo5的全部内容。

    免费试用

    请通过以下方式联系葡萄城,获取Wijmo的免费试用版:

    微信:GrapeCityDT

    邮件:marketing.xa@grapecity.com

    官网:wijmo.gcpowertools.com.cn

    关于葡萄城控件

    葡萄城是一家跨国软件研发集团,专注控件领域近30年,是全球最大的控件提供商,也是微软认证的金牌合作伙伴

    HTML4.0、XHTML到HTML5,从某种意义上讲,这是HTML描述性标记语言的一种更加规范的过程。因此,HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性,下面具体介绍HTML5的一些优势。

    1、 解决了跨浏览器问题

    在HTML5之前,各大浏览器厂商为了争夺市场占有率,会在各自的浏览器中增加各种各样的功能,并且不具有统一的标准。使用不同的浏览器,常常看到不同的页面效果。在HTML5中,纳入了所有合理的扩展功能,具备良好的跨平台性能。针对不支持新标签的老式IE浏览器,只需简单地添加JavaScript代码就可以使用新的元素。推荐了解黑马程序员web前端课程。

    2、新增了多个新特性

    HTML语言从1.0到5.0经历了巨大的变化,从单一的文本显示功能到图文并茂的多媒体显示功能,许多特性经过多年的完善,已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。

    ● 新的特殊内容元素,比如header、nav、section、article、footer。

    ● 新的表单控件,比如calendar、date、time、email、url、search。

    ● 用于绘画的canvas元素。

    ● 用于媒介回放的video和audio元素。

    ● 对本地离线存储的更好支持。

    ● 地理位置、拖曳、摄像头等API。


    HTML5标准的制定是以用户优先为原则的,一旦遇到无法解决的冲突时,规范会把用户放在第一位。另外,为了增强HTML5的使用体验,还加强了以下两方面的设计。

    ● 安全机制的设计

    为确保HTML5的安全,在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于开源的安全模型,该模型不仅易用,而且对不同的API(Application Programming Interface,应用程序编程接口)都通用。使用这个安全模型,不需要借助于任何不安全的hack就能跨域进行安全对话。

    ● 表现和内容分离

    表现和内容分离是HTML5设计中的另一个重要内容。实际上,表现和内容的分离早在HTML4.0中就有设计,但是分离的并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题,HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题,一些陈旧的表现和内容的代码还是可以兼容使用的。

    4. 化繁为简的优势

    作为当下流行的通用标记语言,HTML5尽可能地简化,严格遵循了“简单至上”的原则,主要体现在这几个方面:

    ● 新的简化的字符集声明;

    ● 新的简化的DOCTYPE;

    ● 简单而强大的HTML5 API;

    ● 以浏览器原生能力替代复杂的JavaScript代码。 为了实现这些简化操作,HTML5规范需要比以前更加细致、精确。为了避免造成误解,HTML5对每一个细节都有着非常明确的规范说明,不允许有任何的歧义和模糊出现。


    喜欢记得关注一下哦。

    码:https://gitee.com/xproer/up6-vue-cli

    1.引入up6组件

    2.配置接口地址

    接口地址分别对应:文件初始化,文件数据上传,文件进度,文件上传完毕,文件删除,文件夹初始化,文件夹删除,文件列表

    参考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

    3.定义事件