WijmoAngular2:创建HTML5/TypeScript的输入控件
本文就来介绍使用Angular2来创建基于HTML5/TypeScript的输
入控件。
步骤:
1.使用VisualStudioHTML应用程序创建工程。
2.删除index.html,app.ts和app.css文件。
选择TypeScript项目设置,指定CommonJS作为项目模型系统
为了获取Angular2和库,在app的根目录添加.json文件。
复制angular2开始的内容,这部分是VisualStudio自动的。在
node_modules中定位所有的库。
添加default.html页面到项目的根节点。
添加引用,Angualr2的库,Wijmo控件引用。代码如下:
="text/javascript">
s/bootstrap.min.js"type="text/javascript">
for_IE.js">
s.js">
pt>
<
/script>
pt">
vascript">
/javascript">
配置systemJsS,定位Angualr2
3.配置项目结构。
添加三个文件:scripts,styles和src文件夹(用来包含我们用到的
组件)
打开资源管理器,添加2个文件夹:vendor和definitions(定义
api和包含wijmo控件的内部模型)。
从Interopwijmo包复制Angualar2的集合JS文件到Vendor路径。
复制d.ts文件从interop到新创建的文件夹。最后复制基础样式。
返回VisualStudio,然后将所有添加所有样式和脚本到工程。
现在项目已经创建好,添加app组件到src文件夹。添加新的
typescript类和组件模板。
导入少量的Angular模型到我们的组件。创建一个新的TS类同样
导入。
导入WijmoInput控件。首先,定义decorators和MetaData,这
样组件可以在扩展里使用到任何地方。
在src/app.html中导入引用。
必要的代码:
app.ts
///
import{Component}from‘angular2/core’;
import{CORE_DIRECTIVES}from‘angular2/common’;
import{bootstrap}from‘angular2/platform/browser’;
importaswjInputfrom‘wijmo/wijmo.angular2.input’;
@Component({
selector:‘app’,
templateUrl:‘/src/app.html’,
directives:[wjInput.WjInputDate,CORE_DIRECTIVES]//Directi
vesneededimportedfromcommon
})
exportclassapp{
}
bootstrap(app,[]);
app.html
WijmoInputDateControl
|
|