Wijmo5 Flexgrid基礎教程(七)【Angular2建立HTML5的輸入控制項】__HTML

從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控制項引用。代碼如下：

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

配置systemJS，定位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.