Wijmo:使用Angular2建立HTML5/TypeScript的輸入控件

<Wijmo Enterprise 2016 v1下載>

從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

<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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/// 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.

PS: 關於ComponentOne，這些產品你能夠關注>>

本文轉載自葡萄城