AngularJS と wijslider

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、AngularJS ディレクティブを使用して、HTML プロジェクトで Slider ウィジェットを使用する方法について説明します。

コントローラとモデルが別個のファイルにある複雑なサンプルについては、「AngularJS ディレクティブギャラリー」を Web サイトで参照してください。

新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
- <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
- <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。
ドロップダウンからマークアップをコピーします
任意のテキストエディタに貼り付けます。
コードのコピー

<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

任意のテキストエディタに貼り付けます。	コードのコピー
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。

１つは AngularJS 自体です。
もう１つは、Wijmo の Angular JavaScript 統合ライブラリです。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

<head> タグ内の参照の下に、次のスクリプトを追加して、Wijmo を使用するアプリケーションを設定します。また、$scope パラメータを使用して、データコンテキストを制御するための簡易コントローラを作成します。
スクリプト
コードのコピー
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) {} </script>
次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。Angular を使用せずに jQuery でこれをどのように行うかについては、スライダのクイックスタートを参照してください。<wij-slider> ディレクティブを使用してウィジェットを作成し、いくつかのオプションを要素内に属性として設定します。
- id 属性を「slider」に設定すると、css でウィジェットを参照できます。
- range オプションを true に設定して、２つのハンドル間の範囲を別のスタイルに設定します。
- min オプションを０に設定し、max オプションを 100 に設定して、スライダの値の範囲を設定します。
- step オプションを２に設定して、インクリメントボタンとデクリメントボタンがクリックされたときに各マーカーが移動する距離を設定します。
- values オプションを、ハンドルを表示する場所に対応する２つの値に設定します。
マークアップ
コードのコピー
<wij-slider id="slider" range="true" min="0" max="100" step="2" values="[25, 50]"> </wij-slider>
<head> タグ内のウィジェットを初期化するスクリプトの上で、CSS を使用してスライダの幅を設定します。
スタイル
コードのコピー
<style type="text/css"> #slider { width: 300px; } </style>
HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。

関連トピック

参照