从2016 v1版本开始，Wijmo UI控件支持Angular 2。Wijmo 2016 v1强势发布，全面支持Angular 2!本文就来介绍使用Angular2来创建基于HTML5/TypeScript的输入控件。
步骤：
1. 使用Visual Studio HTML应用程序创建工程。
2. 删除index.html，app.ts和app.css文件。
选择TypeScript项目设置，指定CommonJS作为项目模型系统；为了获取Angular2和库，在app的根目录添加.json文件。复制angular2开始的内容，这部分是VisualStudio自动的。在node_modules中定位所有的库。添加default.html页面到项目的根节点。添加引用，Angualr2的库，Wijmo控件引用。代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@H_502_82@
|
<!-- Shims,polyfills,Angular 2 -->
<!-- IE required polyfills,in this exact order -->
"node_modules/es6-shim/es6-shim.min.js"
>
"node_modules/systemjs/dist/system-polyfills.js"
>
"node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"
>
"node_modules/angular2/bundles/angular2-polyfills.js"
>
"node_modules/systemjs/dist/system.src.js"
>
"node_modules/rxjs/bundles/Rx.js"
>
"node_modules/angular2/bundles/angular2.dev.js"
>
<!-- Wijmo -->
"scripts/vendor/wijmo.min.js"
>
"scripts/vendor/wijmo.input.min.js"
>
<!-- Wijmo Angular2 -->
"scripts/vendor/wijmo.angular2.min.js"
>
>//
<![CDATA[
@H_301_196@System.config({
@H_301_196@packages: {
@H_301_196@'src': {
@H_301_196@defaultExtension: 'js',
@H_301_196@},
@H_301_196@});
<![CDATA[
@H_301_196@System.import('/src/app');
>
|
配置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.
|
