Wijmo Inputコントロールは、Angular 2アプリケーションで使用できるHTML5およびTypeScriptベースの入力コントロールです。

このビデオで(英語)は、以下について説明します。

  1. Visual Studio 2015を構成する方法
  2. npmを使用してAngular 2と付属ライブラリを取得する方法
  3. 開発のためのプロジェクト構造を設定する方法
  4. Angular 2コンポーネントをビルドする方法
  5. Wijmo Inputコントロールを表示する方法

Wijmoをまだダウンロードしていない場合は、トライアル版を入手してください。

コードスニペット

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] // commonからインポートするためのディレクティブ
})
export class app {
}
bootstrap(app, []);

app.html


Wijmo Input Date Control.

default.html内のスクリプト参照


<script src=”https://code.jquery.com/jquery-2.0.0.min.js” type=”text/javascript”></script>
<script src=”https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js” type=”text/javascript”></script>
<!– シム、ポリフィル、Angular 2 –>
<!– IEには、正確にこの順序でポリフィルが必要でした –>
<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 Angular 2 –>
<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>

ビデオの内容

Angular 2を使用したWijmo Inputの導入ガイドへようこそ。私は、グレープシティ開発部門のロス・デドラーです。

今日は、新しいアプリケーションにWijmo Inputを追加する方法について説明します。このビデオでは、Visual Studio 2015でIntellisenseとTypeScriptを使用しますが、コマンドラインや他のエディタを使用することもできます。

最初に、Visual Studioの[TypeScriptを使用したHTMLアプリケーション]プロジェクトテンプレートを使用して新しいアプリケーションを作成します。アプリケーションの名前はInputAngular2にします。

次に、index.html、app.ts、app.cssの各ファイルを削除します。TypeScriptプロジェクト設定に移動し、プロジェクトモジュールシステムとしてCommonJSを指定します。

Angular 2ライブラリを取得するには、アプリケーションのルートにpackage.jsonファイルを追加します。

Angular 2クイックスタートマニュアルに記載されているファイルの内容をコピーします。このコードは、Visual Studioがライブラリを自動的に取得するように指示します。node_modulesにすべてのライブラリを置きます。

default.htmlページをプロジェクトのルートに追加します。クイックスタートマニュアルの説明に従って、Angular 2とライブラリへの参照を追加します。

WijmoコントロールとAngular 2相互運用ファイルへの参照を追加します。

CSSファイルへの参照も追加します。

systemJSを選択します。Angular 2コンポーネントをsrcフォルダに置きます。

次に、プロジェクト構造を構成します。フォルダを3つ追加します。Wijmoコントロールを置くscriptsフォルダ、stylesフォルダ、そしてコンポーネントを入れるsrcフォルダです。

Windowsのファイルエクスプローラーで、Wijmoダウンロードパッケージの横にあるプロジェクトを開きます。スクリプトにフォルダを2つ追加し、一方はvendor、もう一方はdefinitionsと名前を付けます。definitionsは、Wijmoコントロールを含む内部モジュールのAPIを記述します。vendorには、コントロール自体のコードが含まれます。

Wijmo.Angular2相互運用JSファイルをInterop Wijmoパッケージからベンダの場所にコピーします。node_modulesにWijmoという名前の新しいフォルダを作成し、interopからそのフォルダにd.tsファイルをコピーします。最後に、基本スタイルをコピーします。

Visual Studioに戻り、stylesとscriptsのすべての内容をプロジェクトに追加します。node_modulesのWijmoフォルダは入れません。

プロジェクトを設定できたので、srcフォルダにappコンポーネントを追加します。新しいTypeScriptクラスと付随テンプレートを追加します。htmlコードは削除できます。

コンポーネントにいくつかのAngular 2モジュールをインポートします。

データサービスがデータを取得できるように、新しいTSクラスを作成し、それもインポートします。

これで、Wijmo Inputをインポートする準備ができました。まず、コンポーネントをマークアップ内のどこに置いても呼び出せるように、デコレータとメタデータを定義します。

Wijmo FlexChartからコンポーネントにディレクティブを公開します。デコレータとメタデータは、src/app.html内に見つかるマークアップをロードして、appがある場所ならどこでもこのコンポーネントを配置できるように定義します。最後に、WijmoのInputからコンポーネントにいくつかのディレクティブを公開します。

アプリケーションを実行します。