AngularJS と wijfileexplorer

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

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「 AngularJS Directive Gallery」を参照してください。

任意のテキストエディタで、新たな HTML ページを作成します。これには、次のコードを追加し、拡張子 .html を付けてドキュメントを保存します。

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

1 つは AngularJS 自身です。
もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

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

<head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。
スクリプト
コードのコピー

<script> function myCtrl($scope) { //set initial path $scope.currentFolder = "~/Example"; } </script>

参照	コードのコピー
<meta charset="utf-8"> <!--jQuery References--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> <!-- Angular--> <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js" type="text/javascript" ></script>--> <script src="AngularScripts/angular.js"></script> <!--Wijmo Widgets CSS and script --> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" type="text/css" /> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" /> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20161.90min.js"></script>

スクリプト	コードのコピー
<script> function myCtrl($scope) { //set initial path $scope.currentFolder = "~/Example"; } </script>

<body> タグ内に次のマークアップを追加して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、Wijfileexplorer の「クイックスタート」を参照してください。
<wij-wijfileexplorer> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。

action-uri オプションを設定して、表示するファイルとフォルダを指定します。
init-path オプションを設定して、表示するフォルダの初期パスを指定します。
current-folder オプションを設定して、表示するフォルダを指定します。

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

関連トピック