从2016V1版本开始,Wijmo UI控件支持Angular 2。Wijmo 2016 V1 强势发布,全面支持Angular 2
本文就来介绍使用Angular2来创建基于HTML5/TypeScript的输入控件。
步骤:
1.使用VisualStudio HTML应用程序创建工程。
2.删除index.html, app.ts和app.css文件。
选择TypeScript项目设置,指定CommonJS作为项目模型系统
为了获取Angular2和库,在app的根目录添加.json文件。
复制angular2开始的内容,这部分是VisualStudio自动的。在node_modules中定位所有的库。
添加default.html页面到项目的根节点。
添加引用,Angualr2的库,Wijmo控件引用。代码如下:
<script src="http://code.jquery.com/jquery-2.0.0.min.js" type="text/javascript"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script> <!-- Shims, polyfills, Angular 2 --> <!-- IE required polyfills, in this exact order --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <!-- Wijmo --> <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script> <script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script> <!-- Wijmo Angular2 --> <script src="scripts/vendor/wijmo.angular2.min.js" type="text/javascript"></script> <script>// <![CDATA[ System.config({ packages: { 'src': { defaultExtension: 'js', }, }, }); // ]]></script> <script>// <![CDATA[ System.import('/src/app'); // ]]></script>
配置systemJsS,定位Angualr2
3.配置项目结构。
添加三个文件:scripts,styles和src文件夹(用来包含我们用到的组件)
打开资源管理器,添加2个文件夹:vendor和definitions(定义api和包含wijmo控件的内部模型)。
从Interop wijmo包复制Angualar2的集合JS文件到Vendor路径。复制d.ts文件从interop到新创建的文件夹。最后复制基础样式。
返回VisualStudio,然后将所有添加所有样式和脚本到工程。
现在项目已经创建好,添加app组件到src文件夹。添加新的typescript类和组件模板。
导入少量的Angular模型到我们的组件。创建一个新的TS类同样导入。
导入Wijmo Input控件。首先,定义decorators和MetaData,这样组件可以在扩展里使用到任何地方。
在src/app.html中导入引用。
必要的代码:
app.ts
/// import {Component} from ‘angular2/core’; import { CORE_DIRECTIVES } from ‘angular2/common’; import { bootstrap } from ‘angular2/platform/browser’; import * as wjInput from ‘wijmo/wijmo.angular2.input’; @Component({ selector: ‘app’, templateUrl: ‘/src/app.html’, directives: [wjInput.WjInputDate, CORE_DIRECTIVES] // Directives needed imported from common }) export class app { } bootstrap(app, []);
app.html
Wijmo Input Date Control.
到此,本文完。
欢迎大家试用Wijmo。
更多资源:
Wijmo系列文章参考:
http://blog.gcpowertools.com.cn/post/2015/10/22/Wijmo5_Acticle.aspx
Wijmo中文官网:/developer/wijmojs
Wijmo5在线示例:/developer/wijmojscore
Wijmo5产品文档:/developer/wijmojscore
如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html