Ignite UI for jQuery コントロールは規格のモジュール ローダーで読み込むことができます。各モジュールは AMD 定義を含み、依存関係モジュールを参照します。 System.JS は JSPM パッケージ マネージャーで使用される人気のあるモジュール ローダーです。このトピックは、Ignite UI for jQuery コントロールを使用するために System.JS を構成する方法を説明します。
以下の例で、Windows のコマンド プロンプトが使用されます。同様のコマンドを MacOS のターミナルでも実行できます。Visual Studio コード の使用が推薦されますが、必須ではありません。
JSPM のインストール:
npm install -g jspm
新しいフォルダーを作成して、コマンド ラインでそのフォルダーに移動します。
mkdir igsample
cd igsample
JSPM を使用してアプリケーションを初期化します:
jspm init
質問に回答後 (デフォルトの回答でも構いませんが、TypeScript をトランスパイラーとして使用することを推薦します。)、JSPM および System.JS ローダーをアプリケーションで使用する準備が整っています。
jquery
、jquery-ui
、および css
ローダー パッケージをインストールします:
jspm install jquery
jspm install jquery-ui
jspm install css
オープンソースの Ignite UI for jQuery のコンポーネント セットは、GitHub でソース コードがホストされています。アプリケーションがオープンソース Ignite UI for jQuery コントロールのみを使用する場合、このパッケージをアプリケーションに追加するには、以下のコマンドを使用します:
jspm install github:igniteui/ignite-ui
すべてのコントロールを含む Ignite UI for jQuery の製品版も JSPM で使用できます。
Infragistics 非公開フィードを使用するには、Infragistics 非公開レジストリを構成するために「Ignite UI for jQuery npm パッケージの使用」トピックの「npmjs.com から Ignite UI for jQuery npm パッケージをインストール」セクションで説明した手順を実行します。
また、jspm の npm レジストリを更新する必要があります。
jspm registry config npm
レジストリを "https://packages.infragistics.com/npm/" に設定し、infragistics.com ウェブサイトのアカウント資格情報を使用します。
IgniteUI パッケージを新しく登録したフィードからインストールします。
jspm install npm:@infragistics/ignite-ui-full
Visual Studio Code (またはその他のテキスト エディター) を使用して index.html
、js/bootstrap.js
、および js/igsample.js
ファイルを作成します。現在のフォルダーでエディターを開くには、
code .
を入力します。
index.html
のコンテンツ:
<doctype html>
<head>
<title>IG Sample</title>
</head>
<html>
<span id="rating"></span>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
SystemJS.import('js/igsample.js');
</script>
</html>
js/bootstrap.js
のコンテンツ:
import 'igniteui/ignite-ui/src/css/themes/infragistics/infragistics.theme.css!';
import 'igniteui/ignite-ui/src/css/structure/modules/infragistics.ui.rating.css!';
import 'igniteui/ignite-ui/src/js/modules/infragistics.ui.rating';
export function bootstrap(){
// init code here
}
CSS モジュールの終わりにある「!」は、モジュール ローダーが JS モジュールとして使用せずに、CSS ローダーがこのモジュールを処理することを示します。
js/igsample.js
のコンテンツ:
import $ from 'jquery';
import {bootstrap} from './bootstrap';
// execute initialization procedure
bootstrap();
$(function(){
$("#rating").igRating();
})
上記の例は、要求されたコントロールにすべての必要なモジュールを読み込むことを System.JS ローダーに命令します。依存関係ツリーが解析され、必要なファイルが依存関係の順序に読み込まれます。
JSPM は、すべての参照されたモジュールおよびその依存関係および CSS ファイルを 1 つの JS ファイルにバンドルできます。サーバーに複数のファイルを要求しないため、ブラウザーの読み込み時間が軽減します。
すべてのモジュールをバンドルするには、以下のコマンドを実行します:
jspm bundle js/igsample.js --inject
個々のファイルに戻るには、以下のコマンドを実行します:
jspm unbundle
上記の例を web サーバーでホストできます。または、http-server を使用して実行できます:
npm install -g http-server
http-server
ブラウザーを開いて、http://localhost:8080
に移動すると、実行中のアプリケーションが表示されます。
このトピックでは、Ignite UI for jQuery コントロールを JSPM および System.JS ローダーと使用する方法を紹介しました。
オンラインで表示: GitHub